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:
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/AVvXsEivQ1aTx5ko1ApBW6oBBh67D29NtIlgZLXoj8PBYvcz-IW_BLPIjevFN5pl0ggSTWLD_Oj6sDdopleTGGq9PIvAnK-jotmn3FXkx-q4H2bQ-no-wQuXFHMrMcjNFP7dBahthUq2ugImG6Lw/s1600/new.gif" />
</div><style>
#sspeakerbannernewyear{
position:fixed;
left:0px;
top:0px;
}
</style>
Customization:
Happy New Year. May 2011 be the best year yet for you.
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:
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/AVvXsEivQ1aTx5ko1ApBW6oBBh67D29NtIlgZLXoj8PBYvcz-IW_BLPIjevFN5pl0ggSTWLD_Oj6sDdopleTGGq9PIvAnK-jotmn3FXkx-q4H2bQ-no-wQuXFHMrMcjNFP7dBahthUq2ugImG6Lw/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.
Few variations that I've made:
New Year Orb
Right Banner
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">Change the text 'PLACEIMAGEURLHERE' to your image's URL.
<img src="PLACEIMAGEURLHERE" />
</div><style>
#sspeakerbannernewyear{
position:fixed;
left:0px;
top:0px;
}
</style>
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:
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/AVvXsEgySBfipB5yJjsmfxI6UudXDvZ39Hnv9YmeNJYW_vC4mMQ5gK6UCji5IoBts9v5km-7LDmBfQggQR6wiAYAbl1iYOzlPJJk-EknWIgjMBWv0ALyR_tt1A__I7WTbpByX09nqg5mNVFLJ3QS/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.
Category Article Tutorial
