Create Blogger Image Preview Pallete on Mouse Hover

Create Blogger Image Preview Pallete on Mouse Hover

Posted by Ahmed Shawan on 3/30/2013

In blogging professionals and experts always hunt for unique blog traffic as well as page views, so that they could promote their advertisements rapidly and thus increase the sales and services even more and ultimate. There are various types of ways online to promote one's advertisements throughout blogs or webpages adopting some tactical procedures. One of the common procedures that i'd tell to you all right now, is showing images overflow preview on cursor/mouse hover. It's not very related to promote your products but it could stylize your targeted banner and thus attract a reader to proceed the page, clicking on your custom banner ads (not Google ads appropriately). So let's go ahead an learn this delicious tutorial

Live Demo

Prepare Your Blog Template

1. First of all you need to go to blogger and log-in your account
2. Now select your blog and go to template section
3. Now download your blog (for instant backup) and proceed to Edit HTML
4. Now search for ]]></b:skin>  and add the following CSS script

.ahmedz {
margin:0px 12px 12px 0;
background:#2f2f2f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrrtK1A8EG5VfmNccbHNDR7SuPpFuuD2sdJswj2DgUcqxova1tS4zWdSwET88lNCHD_CN4q2RO_C_u5tnix9YZHs0CYO5ao8JWg4NPbTp3S2GGhpb3C3nmS1VF4-qfX50WWRgDLK-13NM5/s1600/post-bg.png) repeat-x top left;
adding:5px 8px;
width:194px;
height:210px;
float:left;
border:2px solid#232323;
positon:relative;
overflow:hidden;
filter:alpha(opacity=75);
opacity:.75;
transition:all 400ms ease-in-out;
-webkit-transition:all 400ms ease-in-out;
-moz-transition:all 400ms ease-in-out;
-o-transition:all 400ms ease-in-out;
-ms-transition:all 400ms ease-in-out;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
}
.ahmedz:hover {
background:#202020;
border:2px solid #5f5f5f;
filter:alpha(opacity=100);
opacity:1}
.ahmedz h1,.ahmedz h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPq__6g9HuP_vo5FapQzJ6zw58z4-PpCP6MUsJjGXKJqMTbfgMScz7gw9iLRbP4BxndBX60C2VgbqXMaCSPCVM9qg7kvsgAB8GfYVasKgcRzHT15rNrVqpO-ThxfEtHGenHUB2wchUBPQ/s1600/batas.gif) repeat-x scroll bottom;
font-size:14px
;font-weight:bold;
line-height:1.2em;
color:#868A08;
text-align:center;
font-family:Arial;
padding:0px 0 10px;
text-shadow: 1px 1px 1px #000}
.post-body{
margin:0.5em 0 .75em;
overflow:hidden;
clear:both
border-top:none;
padding-top:0px;}
.ahmedz h1 a, .ahmedz h1 a:visited, .ahmedz h1 strong,.ahmedzh2 a, .ahmedz h2 a:visited, .ahmedz h2 strong {
font-weight:bold;color:#fff;
}
.ahmedz h1 strong, .ahmedzh1 a:hover,.ahmedz h2 strong, .ahmedz h2 a:hover {
color:#2da0dc;
text-decoration:none;}
#preview{
position:absolute;
-moz-box-shadow:0 4px 4px rgba(0,0,0,0.6);-webkit-box-shadow:0 4px 4px rgba(0,0,0,0.6);
background:#348bd5;
padding:4px;
z-index:330;
color:#fff;
font:normal 14px Tahoma,Georgia, Verdana;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}

5. Don't save your template yet, search for </head> tag and add the following script before it

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 0;
summary_img = 0;
img_thumb_height = 210;
img_thumb_width = 195;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-0){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:center;margin:0px;"><a class="preview" href="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" title="Best Blogger Tactics For 2013"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
this.imagePreview=function(){xOffset=10;yOffset=30;$("a.preview").hover(function(e){this.t=this.title;this.title="";var c=(this.t!="")?"<br/>"+this.t:"";$("body").append("<p id='preview'><img src='"+this.href+"' alt='Image preview' />"+c+"</p>");$("#preview").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px").fadeIn("fast")},function(){this.title=this.t;$("#preview").remove()});$("a.preview").mousemove(function(e){$("#preview").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px")})};$(document).ready(function(){imagePreview()});
//]]>
</script>

6. Now save your template and go to post editor to check it
7. On your blogger post editor, click on HTML add the following code to embade the image on your targeted area

<div class='ahmedz-outer'>
<div class='ahmedz hentry'>
<div class='ahmedz-body entry-content'>
<div id='summary6241721880963338032'><div text-align="center">
</div>
<img class="latest_img" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1L8GhI_s6HfjY6bG5NIN7YOWJ2Ntp6s-YLLz_s811J7_wPYT9ftvOUFeAWv7yoE4wZXNxeQY5FWZJFmKuaUsCn6ILAOBApr96vEK8zaS9Bd6ZLJFyAJyg0F9jJWxaz26D8pEJSDjys59O/s1600/blogging+technology+pallete.png" width="310" />
<script type='text/javascript'>createSummaryAndThumb("summary6241721880963338032");</script>
</div></div></div>

Customization Guidance

1. Change image position by center
2. Change image title by Best Blogger Tactics For 2013
3. Change outer image(small image) height and width by 210, 195
4. Change preview image padding by 4px;, and background color by #348bd5
5. Change outer image border details by border:2px solid#232323; and hover by border:2px solid #5f5f5f;