Berbagai macam Efek gambar yang bisa kita tampilkan pada blog sangat banyak. sekarang saya mau memberi satu lagi Efek gambar yang sangat berbeda yaitu BERSHADOW, efek ini bila di sentuh oleh mouse akan membesar bila di sorot oleh scroll nah kalian bisa di lihat tampilan Efek Bershadow di bawah ini..

/* Blogger Zoom Gallery By AllBlogTools.com */
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/AVvXsEjFxnNZcXnFnQdlA8fgwGVq_reqZVOU9zYwS-N372Nccg63_5E8GKbNIduAGFzLVapSVnlQ-IfyH2wfvpGNwX53zmUxLhO3EXgr_GuotzAOSIb66xlMlSQNtVSfr5gvfHXMMBgFuyrTKWTD/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

5. Cari code </head> dan simpan code di bawah ini di atas code </head>

<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>

6. Save template .

• Sekarang cara memasukan Galery ke dalam tampilan Template Blogger. 

Efek Galery Dengan BersHadow

>