Blogger Christmas Banner

It's that time of the year again. What better way is there to wish your readers a Merry Christmas than to place a Christmas banner in your blog? This is a request from a blog reader (KitchenMorph). I thought it was a good idea, so I decided to write a tutorial on it.

Add one now to your blog in 1 easy step!

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

<div id="sspeakerbanner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4_Gu1od02R6NmvnK4Vhyphenhyphen5caJIcgvqLLERXgvFKXte7MLliIe-nN3sDY2r1pbxQdoHQubLegVfTkVLw38vBpnkvzCFWSC2iEi0vIYbMIMkCmqqWEZJQd1zwsRrNMt3fdwCEWkV3mqVeYn/s1600/yoboy.gif" />
</div><style>
#sspeakerbanner{
position:fixed;
left:0px;
top:0px;
}
</style>

Customization:

I'm not much of a photoshop guy. I quickly created this banner with some Christmas brushes for the sake of this tutorial. What do you expect, I can't be writing a tutorial based on an image created by someone else now, can I?

Make Banner Non-sticky

I've made mine 'sticky', because I'm that Christmas-spirited. If you find it annoying, or if you think it will affect the readability of your blog, then just make it sit on top instead. It won't follow you when you scroll down. Use this code instead:

<div id="sspeakerbanner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4_Gu1od02R6NmvnK4Vhyphenhyphen5caJIcgvqLLERXgvFKXte7MLliIe-nN3sDY2r1pbxQdoHQubLegVfTkVLw38vBpnkvzCFWSC2iEi0vIYbMIMkCmqqWEZJQd1zwsRrNMt3fdwCEWkV3mqVeYn/s1600/yoboy.gif" />
</div><style>
#sspeakerbanner{
position:absolute;
left:0px;
top:0px;
}
</style>

Change Banner Image

Make sure you have an image first. If you're using an image created by someone else, get the creator's permission before adding it to your blog. Here's what you should change.

<div id="sspeakerbanner">
<img src="PLACEIMAGEURLHERE" />
</div><style>
#sspeakerbanner{
position:fixed;
left:0px;
top:0px;
}
</style>

Change the text 'PLACEIMAGEURLHERE' to your image's URL.
I have done a few versions of the original image. Feel free to use them:
Original- Right oriented
Original- Left oriented - Short
Original- Right oriented - Short

Change Banner Position

This depends on your image's orientation. I've made my banner to sit at the top-left corner of my blog. If you want to place your image at the top-right corner, use the following code instead:

Update: I have made a right-oriented banner, and changed the URL in the code below.

<div id="sspeakerbanner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8q8TOViNtzd1BFjSEPRTu9MHVJ5G7jgi7IM9tLH-zQLNEPYfEOM43g4zUyjaPBOEsFsx7iO7-fTAdjhVV1zvK-CtrFLBvM1YPPaAYERshEUybpPV6y9hu52-T9Qq5ZjKiegPJaObukjOk/s1600/right.gif" />
</div><style>
#sspeakerbanner{
position:fixed;
right:0px;
top:0px;
}
</style>

Shorten the Banner Length

Well, not exactly 'shorten' per se. The banner will still remain at the same size, but you can push it inwards if you think the banner is taking too much space. Here's what I'm talking about:

Use this code instead:

<div id="sspeakerbanner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4_Gu1od02R6NmvnK4Vhyphenhyphen5caJIcgvqLLERXgvFKXte7MLliIe-nN3sDY2r1pbxQdoHQubLegVfTkVLw38vBpnkvzCFWSC2iEi0vIYbMIMkCmqqWEZJQd1zwsRrNMt3fdwCEWkV3mqVeYn/s1600/yoboy.gif" />
</div><style>
#sspeakerbanner{
position:fixed;
left:-50px;
top:-60px;
}
</style>

Feel free to adjust the -50 and -60 values. Of course, by making the banner shorter, you'll be missing out on the mistletoes, and possibly the snowman. You don't want that to happen now, do you?

Note: If you want to shorten your image and make it stick at one place (setting 'position:absolute;) both at the same time, make sure your original image is short enough. I have uploaded short versions of the banner. The links are under the 'Change Banner Image' customization.

Merry Christmas and Have Fun!