Jika gambar di postingan anda tidak menggunakan sebuah efek, tentu saja tampilannya hanya biasa saja. Banyak macam-macam trik untuk mengembangkan tampilan gambar di postingan blog kita. Salah satu caranya adalah membuat gambar berputar saat disentuh cursor. contoh gambar di bawah dengan menggunakan Efek.

.post img{-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}
.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

5. Save template dan lihat hasilnya ..

Gimana simple bukan ga bikin ribet otak .

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. 

Hai`sobat blogger sekarang saya akan coba posting cara membuat " EFEK ZOOM PADA GAMBAR " mungkin kalian ada yang udah tau tentang Artikel ini. tapi tak apalah saya buat yang belom tau aja.hehe

Efek zoom adalah salah satu widget untuk memperbesar ukuran gambar dari aslinya, dan akan bereaksi saat kursor mengarah kesalah satu gambar yang ada,  widget ini berfungsi hanya untuk pemakai Blogger buat WordPress saya belom tau caranya.hoho
langsung aja lihat langkah-langkah cara pasang Efek Zoom.


1. Login ke blogger kalian
2. Lalu pilih Tata Letak/Rancangan lalu klik Edit HTML
3. Kasih centang ( Expand Template Widget )
4. Cari kode ]]></b:skin> gunakan ( Ctrl + F ) untuk lebih mudah mencarinya.
5. Jika kalian sudah menemukanya simpan code CSS di bawah ini di atas code ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }

6. Simpan template dan lihat hasinya

Selamat mencoba dan semoga behasil
Maaf saya tidak pasang contoh gambar atau demo nya, karna saya tidak pasang code CSS ini..
tapi buat kalian yang udah pasang pasti udah tau hasilnya.