Add Image Always On top In Blogger Tutorial

Add Image Always On top In Blogspot Tutorial

If you like to display an image in your blog, Kang Rohman has an interesting info. This info is about adding image that will always appear in the front side of your blog, the image will always appear even though the visitors do scrolling down in your blog. See below to see the screenshot.

Are you interested in knowing the tricks? Below are the steps:

#1 step

1. Make a picture you want to display. I suggest you to make 125 X 125 pixels, so it doesn’t really disturb your visitors, the picture format is up to you and you may make animation image. Example:

   

2. Upload the image into a place where you usually save the picture. If you still don’t know how to upload the picture? Just read this posting
3. take note the image address tat you have uploaded. Example :

   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVyG8Xbg4wNkfdQZGJTptpXJo4oWoHPucAsX3V-kbHSn2MzIi11W9baeH90mwRHYJ9CeKlXloaK9VdVisIZDAkTu8gyumAHTQVREYQD4jq20QdyrQyId8z6oI4gg1wsRO2Xntnz6OB-o/?imgmax=800

#2 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;
   left: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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVyG8Xbg4wNkfdQZGJTptpXJo4oWoHPucAsX3V-kbHSn2MzIi11W9baeH90mwRHYJ9CeKlXloaK9VdVisIZDAkTu8gyumAHTQVREYQD4jq20QdyrQyId8z6oI4gg1wsRO2Xntnz6OB-o/?imgmax=800'/>
   </div>

8. Click Save Template
9. Done and please see the result.

The code above is used to display the image on the left bottom of the screen. You can change that position as you want, example on the right bottom of the screen, top right of the screen and top left of the screen. The code that you can edit is as below;

#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

The red code is the code tat you can change as you like

The code for right bottom of the screen

bottom:5px;
right:5px;

The code for top right of the screen

top:5px;
right:5px;

The code for top left of the screen

top:5px;
left:5px;

That example image cannot clicked with your visitor, if you want your image can clicked, you only add a link code, example :

<div id='top_image'>

<a href=”http://nachomasti.blogspot.com”><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVyG8Xbg4wNkfdQZGJTptpXJo4oWoHPucAsX3V-kbHSn2MzIi11W9baeH90mwRHYJ9CeKlXloaK9VdVisIZDAkTu8gyumAHTQVREYQD4jq20QdyrQyId8z6oI4gg1wsRO2Xntnz6OB-o/?imgmax=800'/> </a>
</div>

Happy blogging with