Gallery foto bisa dibikin pakai css3

Ada banyak versi tutorial bagaimana membuat gallery foto di blog. Terutama di blogger yang berplatform blogspot diperlukan keterampilan khusus untuk dapat memajang gallery foto di area posting.

Selama ini yang kita tau teknik pembuatan Gallery foto hanya dengan menggunakan fungsi table, namun sekarang ada kemajuan dari pengembang blog dengan hadirnya css3.

Meskipun belum semua browser mendukungnya namun alternative penggunaan kode css3 ini patut kita aplikasikan dalam upaya melengkapi koleksi postingan kita.

Dalam percobaan ini disarankan anda menggunakan mozilla firefox versi baru agar hasilnya nanti dapat maksimal dan memuaskan.

Berawal dari coba-coba menerapkan css3 untuk postingan berkolom yang saya dapat dari blog OB (http://optimasi-blog.blogspot.com/) dan berhasil.  Untuk itu lewat kesempatan yang baik ini saya ingin mengucapkan terimakasih kepadanya karena beliau telah memberikan inspirasi terhadap postingan yang saya beri title Gallery foto bisa dibikin pakai css3 ini.

Lihat Demo

Untuk membuat galeri foto dengan css3 caranya seperti ini :

1. buatlah postingan baru
2. upload semua gambar yang ingin dipajang, usahakan gambar memiliki ukuran width dan height yang sama
3. setelah gambar terupload klik postingan mode Html (agar kode gambar terlihat)
4. masukkan kode ini di atas kode gambar posting lalu tutup dengan </div>

susunannya seperti ini :

<style>

.post-column-empat {

-moz-column-count: 4;

-moz-column-gap: 10px;

-webkit-column-count: 4;

-webkit-column-gap: 10px;

-khtml-column-count: 4;

-khtml-column-gap: 10px;

line-height:1.8em;

}

</style>

<div class="post-column-empat">

....KODE GAMBAR POSTING....

</div>

Kalau semuanya sudah terpasang, preview dulu jika sudah sesuai keinginan kita maka klik publish post.

Berikut ini contoh semua kode yang ada di halaman posting :

<style>
.post-column-empat {
-moz-column-count: 4;
-moz-column-gap: 10px;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-khtml-column-count: 4;
-khtml-column-gap: 10px;
line-height:1.8em;
}
</style>

<div class="post-column-empat">

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuVzrLqMY0cVcz2qVZJUtYJQtEyPuRaigu-cGfXXQlACPza5F7i8vpkhx_ygXRS9NLoju20JQIU4DFyth63gGJ0IIOWCebC94KsHcjHjHxk4Rs2yXOj6BafAnW6YpO3k2U0hy3xzuc0CA/s1600/yusuf+darussalam.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuVzrLqMY0cVcz2qVZJUtYJQtEyPuRaigu-cGfXXQlACPza5F7i8vpkhx_ygXRS9NLoju20JQIU4DFyth63gGJ0IIOWCebC94KsHcjHjHxk4Rs2yXOj6BafAnW6YpO3k2U0hy3xzuc0CA/s200/yusuf+darussalam.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3bZjNXwUknH0zJLWLukaJPDZ4KFV_uHCqW-uRncJhXbD7sNTSr4UKq1l70OAEFiJ8wvEXOeARoDfEtxV5ncHArFgi8YdKJnRbSkLIJ0DXkj_KFJzbMgOcabo8iWq0QoqmER68-19BjUg/s1600/Agus+Riyanto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3bZjNXwUknH0zJLWLukaJPDZ4KFV_uHCqW-uRncJhXbD7sNTSr4UKq1l70OAEFiJ8wvEXOeARoDfEtxV5ncHArFgi8YdKJnRbSkLIJ0DXkj_KFJzbMgOcabo8iWq0QoqmER68-19BjUg/s200/Agus+Riyanto.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9OmHnoOgkZC5lXMBflG6LxaVzj-RmGnOWHz0ugREJNQ2VmNNmwGFtwYxPS-xPesnSct-Zqf8Vv3Ue1w_GgA4j7G0ASx4NVRBo4kJKvcZScSW-gqe4KMeW6mZJbpJKw5_qYBR1x6BSx0/s1600/Akhmad+Saputro.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9OmHnoOgkZC5lXMBflG6LxaVzj-RmGnOWHz0ugREJNQ2VmNNmwGFtwYxPS-xPesnSct-Zqf8Vv3Ue1w_GgA4j7G0ASx4NVRBo4kJKvcZScSW-gqe4KMeW6mZJbpJKw5_qYBR1x6BSx0/s200/Akhmad+Saputro.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjkcefLVXbJxg1oTn6RPHxxa0Gc7jfKIDyyXMBcjuDOD5BrhLMDi83fJTZY7QcBdrdYyGtkNUk7rroL5di_znOLVyZQRUJrNnXeeoSYUyT1QL2c6UhtTEL8o5LsLfPaSyuEd2O-DucJ4/s1600/Anis+Khabibah.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjkcefLVXbJxg1oTn6RPHxxa0Gc7jfKIDyyXMBcjuDOD5BrhLMDi83fJTZY7QcBdrdYyGtkNUk7rroL5di_znOLVyZQRUJrNnXeeoSYUyT1QL2c6UhtTEL8o5LsLfPaSyuEd2O-DucJ4/s200/Anis+Khabibah.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbtuoy2BL8nhmk3FQp3yQO1qktqWNyhZ4CU6z8CkT0pG9m5OZ8WqMRSb5rZShxPaosTWoixbhRUVco9ldO5b9Fk6ESyCEQrLvZ7LXYt90gvPcjHpfTfmp3fD7QWHt1nVAzMO5bQkki-X4/s1600/Diana+Fitri+Anisah.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbtuoy2BL8nhmk3FQp3yQO1qktqWNyhZ4CU6z8CkT0pG9m5OZ8WqMRSb5rZShxPaosTWoixbhRUVco9ldO5b9Fk6ESyCEQrLvZ7LXYt90gvPcjHpfTfmp3fD7QWHt1nVAzMO5bQkki-X4/s200/Diana+Fitri+Anisah.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNbs715WKKo4nEWVV8qI9L4aDjRHRALLtoxVHuFFElr9h-lNqhe8A7_LGX8VASprWYjKQt3bqI507ftg3UcKG3puNbOU5sV72eGzolYqpDgFFKl02EAoHM6LgcwpHVKPBi75mmGSogQA/s1600/M+Budiman.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNbs715WKKo4nEWVV8qI9L4aDjRHRALLtoxVHuFFElr9h-lNqhe8A7_LGX8VASprWYjKQt3bqI507ftg3UcKG3puNbOU5sV72eGzolYqpDgFFKl02EAoHM6LgcwpHVKPBi75mmGSogQA/s200/M+Budiman.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2BdSbzopOV8Z8ZKnzPsWICYfwB9yPu-l2XKeSqWMU6nbwq-LEH-Dyz8cM09A0b7W6NBu6j3yxNoFrRyfxdxaUYJXOqtZMWlyVtcLpGuI5f8GK060OMbwPwSZbfQKsIpenh1lW9cPTTDQ/s1600/mega.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2BdSbzopOV8Z8ZKnzPsWICYfwB9yPu-l2XKeSqWMU6nbwq-LEH-Dyz8cM09A0b7W6NBu6j3yxNoFrRyfxdxaUYJXOqtZMWlyVtcLpGuI5f8GK060OMbwPwSZbfQKsIpenh1lW9cPTTDQ/s200/mega.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF7h3CE4HM7w8kVOPCIeYE5Br4VyC4H8XFjW3fOs37kym7AhHWXkDs0vRQWtMGT4M6pH0EHOysanseXYwnmejIeLgM9bgWfVCCQA7SU8tn263thvafJB1Fa6QcdyNL7JDLJ7PY-xLxpWs/s1600/Nurzanah.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF7h3CE4HM7w8kVOPCIeYE5Br4VyC4H8XFjW3fOs37kym7AhHWXkDs0vRQWtMGT4M6pH0EHOysanseXYwnmejIeLgM9bgWfVCCQA7SU8tn263thvafJB1Fa6QcdyNL7JDLJ7PY-xLxpWs/s200/Nurzanah.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfYsY5lGFS5tmCFTHZUNwg6st_D0OwVXr-M9i6ieA3nZlSuo4arDSr0c1ylwSKzrCnF7bDIlnvRl-hglgWuWafUdhW4DTQknowxb6H7AoDxDSTkfhH1g3AnVwL2CjJzHQzgAGRSTPs6vM/s1600/Putra+Triyanto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfYsY5lGFS5tmCFTHZUNwg6st_D0OwVXr-M9i6ieA3nZlSuo4arDSr0c1ylwSKzrCnF7bDIlnvRl-hglgWuWafUdhW4DTQknowxb6H7AoDxDSTkfhH1g3AnVwL2CjJzHQzgAGRSTPs6vM/s200/Putra+Triyanto.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7wpAp2GHv2-ugjZGL06ZoY_Q104eBcxRhY_4wawftuOo8zP8SRhtADb71DYZk29S7XBhqbycBSQGYHIJje4DF2PJvTXQunURiRwgyKSHJ9sQ9jBrgQQd2yUPrPRVrSu6mgTLS1S6AcPw/s1600/Sarifudin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7wpAp2GHv2-ugjZGL06ZoY_Q104eBcxRhY_4wawftuOo8zP8SRhtADb71DYZk29S7XBhqbycBSQGYHIJje4DF2PJvTXQunURiRwgyKSHJ9sQ9jBrgQQd2yUPrPRVrSu6mgTLS1S6AcPw/s200/Sarifudin.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgjeH90u29QR1YYJRYmy6XYKUbMjQai0k44PFZZfso5yMiVGdjN-u19sIK04pBQ5FBtVhOudRto168dG6OP0Fnv57VTfM2Z78oOSV0kl-nM_8TAlCSMTJnmGn6hchzl4SMfCUxd_i4js4/s1600/Siti+Sundari.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgjeH90u29QR1YYJRYmy6XYKUbMjQai0k44PFZZfso5yMiVGdjN-u19sIK04pBQ5FBtVhOudRto168dG6OP0Fnv57VTfM2Z78oOSV0kl-nM_8TAlCSMTJnmGn6hchzl4SMfCUxd_i4js4/s200/Siti+Sundari.jpg" width="150" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiUW9Hrq4VLqgThIG2MDyv8-LtgvQO-aCjzProE7gGb0E2HgKCPi7J5uRyMpM-qfikBL8jB9cuGnkV72Mrn54j845w7WLkUoLF1SXqCXpIeqnqogQmPilvnJHuXS5hRw3HkIEXBPyIYI/s1600/ududz.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiUW9Hrq4VLqgThIG2MDyv8-LtgvQO-aCjzProE7gGb0E2HgKCPi7J5uRyMpM-qfikBL8jB9cuGnkV72Mrn54j845w7WLkUoLF1SXqCXpIeqnqogQmPilvnJHuXS5hRw3HkIEXBPyIYI/s200/ududz.JPG" width="150" /></a></div>

</div>

Keterangan :
1.    Yang berwarna merah adalah kode css3
2.    warna biru menunjukkan kode URL Gambar posting
3.    column-count: 4; (agar empat gambar berjajar ke kanan)
4.    column-gap: 10px; (jarak antar kolom)
5.    line-height:1.8em; (ialah jarak antar gambar atas dengan gambar di bawahnya)