1. Select image which you want to see in your blog. I will prefer 120*120, so it will don’t disturb your visitors.(I don’t like because it will slow blog speed.
2. Upload your Image where ever you want to host. Click here for My tutorial to host Image.
3. Copy your image link in notepad.
Here is link for my image:
http://img510.imageshack.us/img510/9505/laurelhardy3224bs5.gif
Here is step:
1. Log in into blogger with your ID.
2. Click Layout
3. Click Edit HTML Tab
4. Click Download Full Template and please back up your template first.
5. Copy and paste the following code right above ]]></b:skin>
#top_image {
position:fixed;
_position:absolute;
bottom:5px;
right:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }
6. Find this code </body> in your template (end of your template code)
7. Copy and paste the following code right above </body> (sample only)
<div id=’top_image’>
<img border=’0′ src=’http://img510.imageshack.us/img510/9505/laurelhardy3224bs5.gif?imgmax=800′/>
</div>
8. Click Save Template
9. Done and please see the result.
If you want this image as you want such as right or left..change it like below,
Here is code for right botom:
#top_image {
position:fixed;
_position:absolute;
bottom:5px;
right:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }
The code for left bottom of the screen
bottom:5px;
Left:5px;
The code for top left of the screen
top:5px;
left:5px;
The code for top right of the screen
top:5px;
right:5px;
You can see it here:
