Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Thursday, December 16, 2010

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="http://1.bp.blogspot.com/_VZprIDHV4-Q/TQnmMVppUcI/AAAAAAAACbw/UOknzECmIKw/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="http://1.bp.blogspot.com/_VZprIDHV4-Q/TQnmMVppUcI/AAAAAAAACbw/UOknzECmIKw/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="http://4.bp.blogspot.com/_VZprIDHV4-Q/TQpSclmvYYI/AAAAAAAACcE/lFLKCvq5YpY/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="http://1.bp.blogspot.com/_VZprIDHV4-Q/TQnmMVppUcI/AAAAAAAACbw/UOknzECmIKw/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!

4 comments:

  1. hi

    i went to add a gadget on page elements, design, dashboard. but when u add a gadget all those gadget options cum. how and where can u paste the code?

    ReplyDelete
  2. kitchenmorph: My bad. You should use the HTML/Javascript gadget. Thanks for pointing this out.

    ReplyDelete
  3. hi
    i did it. but i really wanted to customize it. no time. use another image but i have no clue abt photoshop. also i pasted your first code and changed to absolute and -50px and -60px. but when i added these changes the banner wd go down to where i added the gadget. that is bottom near the popular posts.

    anyway i'm off today. won't be logging in again. once again thank you and merry Christmas!

    ReplyDelete
  4. kitchenmorph: That's expected. If you want it to work, you can set its position as 'absolute' and use a very big negative values, like left: -800 and top: -250 (just an example). But I wouldnt recommend you on doing this, because this numbers that you set depends on your screen size (when you use 'absolute' position. Thus, it will look different on computer that have different screen size than yours. I will upload a shortened banner image later (check under 'Change Banner Image').

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.