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.
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/AVvXsEjtYhNJkD2YjjxmYEfIB9Vs5YfIgIyKKRlDDsFWKabbkEbrEyMmM4tOvREBi9DjWkRSmTsfdZnEAmcnauuST6vhuTWPAUKG8t5Eu_csqvjGkfLCjq8mBnQpazJp3Vs0KH8E2bSFFvfAHbC3/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?
Merry Christmas and Have Fun!
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:
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/AVvXsEjtYhNJkD2YjjxmYEfIB9Vs5YfIgIyKKRlDDsFWKabbkEbrEyMmM4tOvREBi9DjWkRSmTsfdZnEAmcnauuST6vhuTWPAUKG8t5Eu_csqvjGkfLCjq8mBnQpazJp3Vs0KH8E2bSFFvfAHbC3/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.
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
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">Change the text 'PLACEIMAGEURLHERE' to your image's URL.
<img src="PLACEIMAGEURLHERE" />
</div><style>
#sspeakerbanner{
position:fixed;
left:0px;
top:0px;
}
</style>
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.
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/AVvXsEiZWWwF2EBcsBV7ZattW4nGYArGPFVW9DHy8KnOF8h9uzh2wDorT80rl3P56EFmg6vKvPYZdiIdgegfHsN4-7aiiciQ1BF1DCRFlCDbixDEfJONaUZi8lZ_d1SdqnNVqESq62IUClHHuX4K/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:
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.
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">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?
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtYhNJkD2YjjxmYEfIB9Vs5YfIgIyKKRlDDsFWKabbkEbrEyMmM4tOvREBi9DjWkRSmTsfdZnEAmcnauuST6vhuTWPAUKG8t5Eu_csqvjGkfLCjq8mBnQpazJp3Vs0KH8E2bSFFvfAHbC3/s1600/yoboy.gif" />
</div><style>
#sspeakerbanner{
position:fixed;
left:-50px;
top:-60px;
}
</style>
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!
