Blogger New Year Banner

Not long ago, I did a tutorial on how you can add a Christmas banner to your blog to convey your Christmas wishes to your readers. Well, Christmas is technically over, so let's prepare for New Year now. This tutorial is similar to the Christmas one, but I figured no one will be looking for it anymore, so here's another one.

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

Choose HTML/Javascript gadget - Paste the following code - Apply to Blog:

<div id="sspeakerbannernewyear">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit7j-hVRnHnzqsZNXu-Sojv9QmSHj96njKX3vs0Qn0ccJXYe_YBIAb9Qgq9y6ucWJNRxn6f-Ehgig3FMR_fwPxrY8NJ43CgWhOo78ahdnTuXd5A4Wp7J43paHX-KqYO6RqG7l_FQV4UcKG/s1600/new.gif" />
</div><style>
#sspeakerbannernewyear{
position:fixed;
left:0px;
top:0px;
}
</style>

Customization:

Make Banner Non-sticky
 I've made mine 'sticky'. 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="sspeakerbannernewyear">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit7j-hVRnHnzqsZNXu-Sojv9QmSHj96njKX3vs0Qn0ccJXYe_YBIAb9Qgq9y6ucWJNRxn6f-Ehgig3FMR_fwPxrY8NJ43CgWhOo78ahdnTuXd5A4Wp7J43paHX-KqYO6RqG7l_FQV4UcKG/s1600/new.gif" />
</div><style>
#sspeakerbannernewyear{
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="sspeakerbannernewyear">
<img src="PLACEIMAGEURLHERE" />
</div><style>
#sspeakerbannernewyear{
position:fixed;
left:0px;
top:0px;
}
</style>

Change the text 'PLACEIMAGEURLHERE' to your image's URL.

Few variations that I've made:
New Year Orb
Right Banner

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:

<div id="sspeakerbannernewyear">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXZq5sqjR615STkanYjQvDjm1DTX5TpnwptgkHpFcmbWghwuF_2wt9WH11i401eX7WeK83kCCo6Bea9M9Zd3aE_iLDYXobAGswZHtLWkS2ynzgzAdbl2qQbQdR8oJq15w1BbPpSNLhaUw/s400/right.gif" />
</div><style>
#sspeakerbannernewyear{
position:fixed;
right:0px;
top:0px;
}
</style>

Happy New Year. May 2011 be the best year yet for you.