Posted in Wordpress
<div id="picture-grid-gallery"> <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/> <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/> <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/> <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/> <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/> <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/> </div>Setelah itu, masih pada teks editor Wordpress. Ketikkan kode CSS sebagai berikut:
<style> #picture-grid-gallery { max-width:600px; } .grid-gallery { height: 320px; width: 160px; display:inline-block; } </style>Selain disatukan pada teks di artikel, kode CSS juga dapat dimasukkan di Editor CSS Wordpress. Lokasinya ada di Appearance >> Edit CSS. Jika dimasukkan di Editor CSS, maka Anda tidak perlu menuliskan tag <style> ... </style> Saya sendiri lebih suka jika kode CSS ditaruh di Edit CSS, karena supaya dapat digunakan di post manapun. Tetapi kekurangannya adalah ketika kita mengubah theme, maka kode tersebut juga akan ikut hilang. Jadi jangan lupa back up! Untuk id dan class di atas (yang ada tanda # dan . ), pastikan tidak ada yang duplikat dengan CSS bawaan theme Wordpress yang kita gunakan. Oleh karenanya kita dapat memberinya nama yang unik, misanya: picture-grid-gallery menjadi picture-grid-gallery-keren, dan sebagainya.
<div id="picture-grid-gallery"> <table> <tr> <td> <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/> </td> <td> <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/> </td> </tr> <tr> <td> <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/> </td> <td> <img class="grid-gallery" src="#URL_gambar" alt="deskripsi gambar"/> </td> </tr> </table> </div>Kode CSS nya pun bisa jadi berubah mengingat tabel memiliki border yang mungkin saja mengganggu tampilan grid gallery kita. Berikut ini contoh CSS nya jika kita menggunakan table.
#picture-grid-gallery { max-width: 600px; } #picture-grid-gallery table { border: none; /* menghilangkan border di tag table */ } #picture-grid-gallery td { border: none; /* menghilangkan border di tag td */ } .grid-gallery { display: inline-block; width: 300px; }Berikut ini adalah beberapa contoh tampilan ketika kita berhasil membuat tampilan gallery grid.