Blogger Christmas Banner

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/AVvXsEidV-3bge7TxDAeRymc3RoL-fTn_7owa45O62FkPTehccUQUA-_ZtOiX-QoAK7766xm3HscwlOPektEe_2b6Aqk7gAP8WQxrWvHzgZtHehC1XHytEhYRGroNGNCdPm-F31OZi0vq7Eqnlnw/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/AVvXsEhfTrSPFtnXVWgFgHo3uk8QImvrs5E47HiEd33r7-lnZlalsVGGN3cAp-wurZ1P45Mqi9q61fXefuqFBfA50LAnRDKw_1NmvsGA2vE2JuyCfMAG3s66pT7xTHPi7thPh57Kg_89IuAPAAWb/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/AVvXsEidV-3bge7TxDAeRymc3RoL-fTn_7owa45O62FkPTehccUQUA-_ZtOiX-QoAK7766xm3HscwlOPektEe_2b6Aqk7gAP8WQxrWvHzgZtHehC1XHytEhYRGroNGNCdPm-F31OZi0vq7Eqnlnw/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.