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.



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.

Posting Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top