Would you like to update your blog and make it sparkle with holiday cheer? Need a design for your holiday newsletter? Don't have enough time during the busy holidays? Try my coordinated blog wear set! Become a Follower of my Freebies BLOG, and you can download it for FREE. You can also get the entire Happy Santa Digital Scrapbooking Kit if you Follow Me.
This FESTIVE blog header and coordinating background made from my HAPPY SANTA collection with coordinating blog buttons will keep your blog FUN and CHEERY for the holiday season. Just add your text, photos, and what not.
Personalize your blog header and button graphics, then save and upload to your blog of choice. It's so easy - see my instructions here. For detailed instructions on uploading or special requirements, please visit your blog host.
The Happy Santa Blog Wear Set includes:
[1] blog header with 'photo window' (800 x 392 pixels; 200 ppi; PNG Image; 374 KB)
[1] blog background (1600 x 1200 pixels, 72 ppi; JPEG Image, 121 KB)
[1] blog button graphic (200 x 100 pixels, 200 ppi; PNG Image; 28.8 KB)
Separate header and button sets with a white background and no background are also included.
For personal and commercial use. Leave a little love if you can. THANKS! *holiday hugs* -k
Thursday, November 5, 2009
Wednesday, November 4, 2009
Tutorial: How to Use My Holiday Blog Wear Header for a Holiday Newsletter
Add a dash of holiday cheer to your holiday newsletter this year with my Happy Santa blog wear header (available the week of Nov. 16th). First become a KayDesignZ.com member by clicking here. It's really easy--just sign in with your name and a valid email so you can get your password to download lots of freebies, including this blog wear header.
There are two versions of the header. One is a jpeg file with a green background that was designed to be used with the coordinating Happy Santa blog wear background. Go here (to be added) for instructions on adding my blog wear. It's super easy, too! The version you want for a newsletter is the png file, which has no background.
Open a Word file and "insert," "picture," "from file." Go to the folder where you saved the file and select the header png file.
Once the file appears, you can double click on it, click "layout," and "center" the image. You can also enlarge it by double clicking on it and selecting "size." Just make sure the "lock aspect ratio" box is checked.
You can add a picture to go in the frame using the same process. Position the picture over the frame, then select "draw," "order," and "send to back."
Add a headline and start your newsletter! You can make the header larger, play with your headline type, add borders and/or more art, and even start the text in two or three columns for a more professional look. Your only limitation is your imagination. Have fun with it!!
Click on the image below to see a full-sized view of a sample newsletter.
You can also create a professional-looking online newsletter in Microsoft Word, by taking advantage of their free E-Mail Newsletter template. To see a tutorial and download the template, go here.
Sunday, November 1, 2009
Tutorial: Applying My Happy Santa Background to Your BLOG and Adding the Header and Buttons
This background is suitable for the Minima template, which has 2 columns, but is wide enough to accommodate 3 columns. Since I just started creating BLOG Wear, I only have instructions for Blogger.
1. Sign in to Blogger, and your “Dashboard” will open up.
2. Under the BLOG for which you want to change the background, click on “Layout.”
3. On the “Add and Arrange Page Elements” screen, click “Add a Gadget.”
4. When the “Add a Gadget” screen pops up, scroll down to “HTML/JavaScript” and click on the plus (+) sign.
5. The “Configure HTML/JavaScript” Screen will open. Paste the entire following HTML code in the “Content” box (leave the “Title” blank).
6. Click “Save,” and that’s it!
To Add the Matching Header
In your graphics program, insert a photo and text into the header and save it as a JPEG file. Don't use the PNG file as some computers don't recognize them.
Back at BLOGGER:
1. On the "Layout" screen, click on “Edit” in the “(Header)” box.
2. In the “Configure Header” screen, under “Placement,” select “Instead of title and description” THEN, under “Image,” select “from your computer,” and click on “browse.” Find the header file that you downloaded and select it.
You can now “view” your BLOG, but don’t worry, we’re not finished.
3. Click “Customize”
4. “Edit HTML”
5. To center your header and remove the lines around it, change the following highlighted lines of code:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:800px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
***
Scroll down to this bit of code, and change the outer-wrapper width to 800px. You can also change your main-wrapper and sidebar-wrapper widths, but they must add up to 800px. For example, you can change your main column up to 580px.
***
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
To Add a Button:
In your graphics program, copy your button and add text to it.
Back at BLOGGER:
1. Select “Dashboard,” then “Layout.”
2. On the “Add and Arrange Page Elements” screen, click “Add a Gadget.”
3. When the “Add a Gadget” screen pops up, scroll down to “Picture,” and click on the plus (+) sign.
4. On the “Configure Image” screen, deselect “shrink to fit” (the buttons are 200px wide)
5. Under “Image,” select “from your computer,” then “browse” to the button image you want and select.
All done!
If you want to use the header with the white background, simply follow the directions to "Add the Matching Header."
P.S. If your computer won't let you copy “just the code,” your browser may need to be updated. If you are using Internet Explorer, you need to upgrade to Internet Explorer 8. Visit this website: http://www.microsoft.com/windows/internet-explorer/default.aspx
The free code supplied must remain in its entirety by law. By viewing or using the content, you agree to the terms and conditions of KayDesignZ.com.
1. Sign in to Blogger, and your “Dashboard” will open up.
2. Under the BLOG for which you want to change the background, click on “Layout.”
3. On the “Add and Arrange Page Elements” screen, click “Add a Gadget.”
4. When the “Add a Gadget” screen pops up, scroll down to “HTML/JavaScript” and click on the plus (+) sign.
5. The “Configure HTML/JavaScript” Screen will open. Paste the entire following HTML code in the “Content” box (leave the “Title” blank).
6. Click “Save,” and that’s it!
To Add the Matching Header
In your graphics program, insert a photo and text into the header and save it as a JPEG file. Don't use the PNG file as some computers don't recognize them.
Back at BLOGGER:
1. On the "Layout" screen, click on “Edit” in the “(Header)” box.
2. In the “Configure Header” screen, under “Placement,” select “Instead of title and description” THEN, under “Image,” select “from your computer,” and click on “browse.” Find the header file that you downloaded and select it.
You can now “view” your BLOG, but don’t worry, we’re not finished.
3. Click “Customize”
4. “Edit HTML”
5. To center your header and remove the lines around it, change the following highlighted lines of code:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:800px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
***
Scroll down to this bit of code, and change the outer-wrapper width to 800px. You can also change your main-wrapper and sidebar-wrapper widths, but they must add up to 800px. For example, you can change your main column up to 580px.
***
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
To Add a Button:
In your graphics program, copy your button and add text to it.
Back at BLOGGER:
1. Select “Dashboard,” then “Layout.”
2. On the “Add and Arrange Page Elements” screen, click “Add a Gadget.”
3. When the “Add a Gadget” screen pops up, scroll down to “Picture,” and click on the plus (+) sign.
4. On the “Configure Image” screen, deselect “shrink to fit” (the buttons are 200px wide)
5. Under “Image,” select “from your computer,” then “browse” to the button image you want and select.
All done!
If you want to use the header with the white background, simply follow the directions to "Add the Matching Header."
P.S. If your computer won't let you copy “just the code,” your browser may need to be updated. If you are using Internet Explorer, you need to upgrade to Internet Explorer 8. Visit this website: http://www.microsoft.com/windows/internet-explorer/default.aspx
The free code supplied must remain in its entirety by law. By viewing or using the content, you agree to the terms and conditions of KayDesignZ.com.
Subscribe to:
Posts (Atom)
