CSS3 Image Gallery Blogspot

Kali ini saya akan memperkenalkan kepada Anda pada sebuah tutorial menarik untuk gambar.
Ini adalah salah satu trick terbaik yang bisa Anda terapkan dan gunakan pada blog/situs Anda, dan untuk tutorial kali ini saya beri tema CSS3 Image Gallery Blogspot. Trick ini bekerja dengan CSS3 dan tidak akan begitu berpengaruh pada kecepatan pemuatan blog/situs Anda.
Dengan Anda menggunakan CSS3 Image Gallery Blogspot maka Anda dapat dengan mudah memamerkan koleksi foto-foto Anda pada pengunjung blog/situs Anda.
Untuk lebih jelasnya tentang CSS3 Image Gallery Blogspot silahkan Anda lihat demonya terlebih dahulu.

Lihat Demo

Cara Membuat CSS3 Image Gallery Blogspot

Disini saya akan memberikan Anda kode-kode yang di perlukan untuk membuat CSS3 Image Gallery Blogspot. Gunakan kode yang saya berikan berikut untuk membuatnya!

---

CSS

---

#gallery {
border: 10px solid #1D0C16;
height: 300px;
width: 800px;
margin-left: auto;
margin-right: auto;
overflow: visible;
background: #272229;
/* Kotak efek bayangan di Safari dan Chrome*/
-webkit-box-shadow: #272229 10px 10px 20px;
/* Kotak efek bayangan di Firefox*/
-moz-box-shadow: #272229 10px 10px 20px;
/*Kotak efek bayangan di IE*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);
/* Kotak efek bayangan di Browser yang mendukung, Opera 10,5 pra-alpha release*/
box-shadow: #272229 10px 10px 20px;
}

#gallery ul{
/* Posisi isi ul di tengah galeri */
margin-left:-30px;
}

#gallery ul li {
/* Untuk menciptakan efek yang tepat dengan melayang-layang kita harus menggunakan display inline-tabel
Ini akan menampilkan gambar besar di sebelah kanan thumbnail
*/
list-style:none; display:inline-table; padding:10px;
}

/*  Ini adalah pic untuk menampilkan saat efek yang melayang-layang terjadi selama li yang berisi thumbnail */
#gallery ul li .pic{
/* Animasi dengan transisi di Safari dan Chrome */
-webkit-transition: all 0.6s ease-in-out;
/* Animasi dengan transisi di Firefox (No supported Yet) */
-moz-transition: all 0.6s ease-in-out;
/* Animasi dengan transisi di Opera (No supported Yet)*/
-o-transition: all 0.6s ease-in-out;
/* The opacity menjadi 0 untuk menciptakan efek fadeOut*/
opacity:0;
visibility:hidden;
position:absolute;
margin-top:10px;
margin-left:-20px;
border:1px solid black;
/* Kotak efek bayangan di Safari dan Chrome*/
-webkit-box-shadow:#272229 2px 2px 10px;
/*Kotak efek bayangan di Firefox*/
-moz-box-shadow:#272229 2px 2px 10px;
/* Kotak efek bayangan di IE*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
/* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
box-shadow:#272229 2px 2px 10px;
}

#gallery ul li .mini:hover{
cursor:pointer;
}

/* Ini menciptakan efek yang diinginkan menampilkan gambar ketika kita mengarahkan mouse ke thumbnail*/
#gallery ul li:hover .pic {
/ * Lebar dan tinggi adalah seberapa besar gambar akan pertumbuhan dengan efek * /
width:200px;
height:200px;
opacity:1;
visibility:visible;
float:right;
}

---

HTML

---

<div id="gallery">
<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM52cPJP7GUAW5EBPod3o2WTFoBhc2uKN8SWJEtVoeTd-X2MQ3N7hwnYrCfO1BVh_Z7kjX2p0dee_5DDUdJWtWuLpag_AJtFtkp9m7E-S42_Bbo-InEasiEspLUq9X0bLo9Ft1IzfC9Q/s1600/transformers.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM52cPJP7GUAW5EBPod3o2WTFoBhc2uKN8SWJEtVoeTd-X2MQ3N7hwnYrCfO1BVh_Z7kjX2p0dee_5DDUdJWtWuLpag_AJtFtkp9m7E-S42_Bbo-InEasiEspLUq9X0bLo9Ft1IzfC9Q/s1600/transformers.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEIECZYEYcU_ryxoiBn6OXEiqjPhGb-1YkUIfp6idvcadGwC7ZGviMSeOSJlqSaJRc6TM2R6hMYtuCRP5mf6nkqxT4xOBIp-DoBOoEKtV_ANHQFkdUG6WIAhhlWmbvhuIezZ6A5SSgw/s1600/Transformers+3.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEIECZYEYcU_ryxoiBn6OXEiqjPhGb-1YkUIfp6idvcadGwC7ZGviMSeOSJlqSaJRc6TM2R6hMYtuCRP5mf6nkqxT4xOBIp-DoBOoEKtV_ANHQFkdUG6WIAhhlWmbvhuIezZ6A5SSgw/s1600/Transformers+3.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcDbEEHWemjSxmUNQwPzAgtNAoo_ijpK6v8J9Tu3dXb0AI_PRSp47R7Qietrz3155FxfDjDzrF4974IMGHUb582qsW3SeW8LVsS8TodBOTYGB6pDxQEhZf2Tdf_KuCEdWV0PLlMAlbQ/s1600/Transformers-Bumblebee-by-DevinePliskin.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcDbEEHWemjSxmUNQwPzAgtNAoo_ijpK6v8J9Tu3dXb0AI_PRSp47R7Qietrz3155FxfDjDzrF4974IMGHUb582qsW3SeW8LVsS8TodBOTYGB6pDxQEhZf2Tdf_KuCEdWV0PLlMAlbQ/s1600/Transformers-Bumblebee-by-DevinePliskin.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnZbbyv361si_YiMcMINkrIHmKCM6aIMB3GmS5NsQErWfFIV0uymnTpVkudKF9KUeaokcPuZ2B9OQtsAcWzYHj_yBWIOPZNDaykX_saOA79qej4XLTj99qd75z6QxfJQNKi_BpErn9KQ/s1600/megan-fox-transformers-2.jpg" class="mini"  width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnZbbyv361si_YiMcMINkrIHmKCM6aIMB3GmS5NsQErWfFIV0uymnTpVkudKF9KUeaokcPuZ2B9OQtsAcWzYHj_yBWIOPZNDaykX_saOA79qej4XLTj99qd75z6QxfJQNKi_BpErn9KQ/s1600/megan-fox-transformers-2.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgG-pWzssh50btmZkWGmP8R2YmTBB6NAdVJNmo5IyLQ9OuhSvTAYc95ru9lstRSK5qiVY7Vx0Zc4X4uahGJ2-MwMMJvued5Ia6tYWnWLDjl0kC-4xZWX_d7vU16cWtMbIB0M4EaQKtQ/s1600/transformers3(2).jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgG-pWzssh50btmZkWGmP8R2YmTBB6NAdVJNmo5IyLQ9OuhSvTAYc95ru9lstRSK5qiVY7Vx0Zc4X4uahGJ2-MwMMJvued5Ia6tYWnWLDjl0kC-4xZWX_d7vU16cWtMbIB0M4EaQKtQ/s1600/transformers3(2).jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuhjc6BsY1dRtB6DvRcyHeUqIDLaueXhZPA6wxhmpD-NmOY7cZeAh5RzeD-SLwgVHeEQuX_c9W042hnDF9a9VUCRjbAWem7leFInY-2xJsTZbyYtTG_kfHUVgB914zoo4S1Djg2XRGA/s1600/transformers_movie_image_gallery_016.jpg" class="mini" width="100" height="100"  /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuhjc6BsY1dRtB6DvRcyHeUqIDLaueXhZPA6wxhmpD-NmOY7cZeAh5RzeD-SLwgVHeEQuX_c9W042hnDF9a9VUCRjbAWem7leFInY-2xJsTZbyYtTG_kfHUVgB914zoo4S1Djg2XRGA/s1600/transformers_movie_image_gallery_016.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepLHQy35KIbVzVP2SIWSUZWjBXKa38fiswRgkT5fGOEa0nm_1zEwV6hmzENvPfpyti2LujKFUQxdlXTi9TCT-hNL_7DiDIeQ3Dhy5gygkvKTPIPMzbq3oyW_ofotLp_F3HCz-SFZl-g/s1600/transformers3.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepLHQy35KIbVzVP2SIWSUZWjBXKa38fiswRgkT5fGOEa0nm_1zEwV6hmzENvPfpyti2LujKFUQxdlXTi9TCT-hNL_7DiDIeQ3Dhy5gygkvKTPIPMzbq3oyW_ofotLp_F3HCz-SFZl-g/s1600/transformers3.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszWRIZVEqw6lsGsLKhEnI3EBPERclir09VLirmVDghB4hE7oeGqKqD5xAtEpcXQoHeB2aj68MvQu1H4lDOWqlimEfL14qZki3FXzPokYleLFlHwG8t-2rfKnaEHuFBt40VjuUPyQWeQ/s1600/Transformers_2_Optimus_Prime_3_by_CrossDominatriX5.png" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszWRIZVEqw6lsGsLKhEnI3EBPERclir09VLirmVDghB4hE7oeGqKqD5xAtEpcXQoHeB2aj68MvQu1H4lDOWqlimEfL14qZki3FXzPokYleLFlHwG8t-2rfKnaEHuFBt40VjuUPyQWeQ/s1600/Transformers_2_Optimus_Prime_3_by_CrossDominatriX5.png" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEfxyc754p6yhcI1TNALXcCnfy4_5BZae4_0ZWIJztv1zHNpv_j69JQmalKDFYv5YHdDPprpmppcJl0MO75X2I_fKVfFhQoyGpNCMkJV3nPW4Z3YBPQ2Brr515E0VFziAbZWKOOF86A/s1600/Transformers-313.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEfxyc754p6yhcI1TNALXcCnfy4_5BZae4_0ZWIJztv1zHNpv_j69JQmalKDFYv5YHdDPprpmppcJl0MO75X2I_fKVfFhQoyGpNCMkJV3nPW4Z3YBPQ2Brr515E0VFziAbZWKOOF86A/s1600/Transformers-313.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyU2uNAw5KSjvtxEto4k2LT5LUe4mLsyT_CjnzPkjbvH-ml8CDaWsNJ__ShZNeh7Mhl1F6zDBbOrSO26tGEvgTcU_97wWWm4N7qCFN8NjLnic3zftlE5uFdpGa0yNp57dqbA5VgZZ5Q/s1600/wp_transformers1322_1280.jpg" class="mini" width="100" height="100" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyU2uNAw5KSjvtxEto4k2LT5LUe4mLsyT_CjnzPkjbvH-ml8CDaWsNJ__ShZNeh7Mhl1F6zDBbOrSO26tGEvgTcU_97wWWm4N7qCFN8NjLnic3zftlE5uFdpGa0yNp57dqbA5VgZZ5Q/s1600/wp_transformers1322_1280.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTRRCPzhqWX1CPwEwe7J2KSpGC4tEYvx2IhIMF9PdHnzw_OmYIjPJTdsCE3oW5upbsNDzVg_6NIXRlAT0ERd5iJLFSIw3arV5A9anv31aMtpMoAdX7NodtGuXFWSjvnRg1c8Ew6ge8A/s1600/20100802164107!Megatron.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTRRCPzhqWX1CPwEwe7J2KSpGC4tEYvx2IhIMF9PdHnzw_OmYIjPJTdsCE3oW5upbsNDzVg_6NIXRlAT0ERd5iJLFSIw3arV5A9anv31aMtpMoAdX7NodtGuXFWSjvnRg1c8Ew6ge8A/s1600/20100802164107!Megatron.jpg" class="pic"  />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhUtyBqDbGFSNPpfLr0zm2ei3CHLW7o_Jwd9Zggwr11MboSt8Osza-nWgnGw2wCwAcyoeJF1lG-xAqCJ2q9Ntmz5QzAdw_Y6_lOHue2K450ynOSRveKqUZbrs9pfH6JavyPiHptWTMw/s1600/megan-fox-transformers-3.jpg" class="mini" width="100" height="100" alt="" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhUtyBqDbGFSNPpfLr0zm2ei3CHLW7o_Jwd9Zggwr11MboSt8Osza-nWgnGw2wCwAcyoeJF1lG-xAqCJ2q9Ntmz5QzAdw_Y6_lOHue2K450ynOSRveKqUZbrs9pfH6JavyPiHptWTMw/s1600/megan-fox-transformers-3.jpg" class="pic"  />
</li>
</ul>
</div>

Melakukan Perubahan dan Modifikasi

Anda dapat memodifikasi CSS3 Image Gallery Blogspot ini dengan mengedit kode CSS di atas yang telah saya beri tanda dan jika Anda ingin bereksperimen sendiri.
Perhatikan Kode HTML di atas, ganti semua url gambar dengan url gambar Anda sendiri.
Jika Anda kesulitan mencari kode HTML dalam Template silahkan klick DISINI.