gadget--4

How To Add jQuery Thumbnail Hover/Zoom Effect to blogger images

1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Don't Click on "Expand Widget Templates"
3.Scroll down to where you see ]]></b:skin> tag:
4.Copy below code and paste it just before the ]]></b:skin> tag.

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8At2tzoeb_GSYg2XAEo5Pbu_CK01cxh_5aNU416j9-K6Zo3itFOgBJVTssJjTx2IR2d-5A5p7tk_q9dccxua1Wmt8faCtbSpJXeItKRzfE76KSaNTVNOmLdTKC7pK7NsirmjqhPdng4Cz/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Note : Please host 'thumb_bg.png' image yourself.
5.Scroll down to where you see </head> tag:
6.Copy below code and paste it just before the </head> tag.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
 .animate({
  marginTop: &#39;-110px&#39;,
  marginLeft: &#39;-110px&#39;,
  top: &#39;50%&#39;,
  left: &#39;50%&#39;,
  width: &#39;174px&#39;,
  height: &#39;174px&#39;,
  padding: &#39;20px&#39;
 }, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
 .animate({
  marginTop: &#39;0&#39;,
  marginLeft: &#39;0&#39;,
  top: &#39;0&#39;,
  left: &#39;0&#39;,
  width: &#39;100px&#39;,
  height: &#39;100px&#39;,
  padding: &#39;5px&#39;
 }, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

 var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
 $(&quot;#main_view img&quot;).attr({ src: mainImage });
 return false; 
});

});
</script>

7.Now Click on "Save Templates"
8.Now go to Layout-->page elements and Click on 'Add a Gadget'.
9.Now Select 'HTML/Javascript' and add the code given below and click save.

<ul class="thumb">
<li><a href="#"><img src="picture1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture4 Link" alt="" /></a></li>
<li><a href="#"><img src="picture5 Link" alt="" /></a></li>
</ul>

Note : Replace picture1 Link,picture2 Link,picture3 Link,picture4 Link,picture5 Link,..... with your images links.

 ==============================================

How to remove Labels number (counter)

October 26, 2008

In default Blogger templates, in your Label list, you can see the counter (number) beside each label. If you would like to get rid of this, read on. It takes a minute....

Ok. Let's remove them. Before you do anything Back up your template.
Go to:
DASHBOARD ► LAYOUT ► EDIT HTML ► click on EXPAND WIDGET TEMPLATES in the upper right corner:


You have to find the following line of code:

(<data:label.count/>)

Delete it. Save the Template. View your Blog. Ta-dam!


Smile!

 =============================================