Cara Membuat Gallery Gambar di Postingan

Baru posting lagi masalah edit-editan blog, setelah beberapa hari saya poting tentang islamic dan tentang Belajar inggris, oke postingan saya kali ini saya akan membahas tutorial membuat gallery gambar di postingan mungkin sebagian dari anda sudah banyak yang mengetahui bagaimana cara membuat gallery gambar di postingan, seperti gambar yang telah saya upload, sekira nya seperti itu lah, memang cukup mudah untuk menerapkannya, anda hanya memasukan saja code-code yang telah saya persiapkan untuk anda, untuk lebih detil nya yuk kita lihat demo nya....

 

Bagaimana ? apakah anda tertarik untuk memasangnya ? jika iya, yuk kita lihat apa-apa saja langkah-langkah nya,

Paling pertama anda harus masuk ke blogger anda dulu oke, jangan masuk ke blogger orang lain, nanti di omel'n..

Jiika anda sudah masuk blog anda, jangan anda keluarkan kembali blog anda, karna hal itu dapat menggagalkan usaha anda dalam pembuatan gallery gambarnya,

Tolong anda pilih New Post Jangan pilih Comment oke...

Jika anda sudah memasuki halaman post, anda pilih yang bertuliskan "HTML"

lalu anda bisa copy code yang dibawah ini ke tempat postingan anda..

<style type='text/css'>@font-face { font-family: 'Anton'; font-style: normal; font-weight: normal; src: local('Anton'), url('http://themes.googleusercontent.com/static/fonts/anton/v3/tilmJBBU81h1G7ZsdY3Hmw.woff') format('woff');}#harga { width: 200px; margin: 10px 5px; border: 4px solid #a95; padding: 0; height: 260px; overflow: hidden; position: relative; float: left; -moz-box-shadow: 0 0 3px 2px #222; -webkit-box-shadow: 0 0 3px 2px #222; box-shadow: 0 0 3px 2px #222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #000; } #harga .judul { position: absolute; background: #a95; padding: 5px; text-align: center; font: normal 15px/20px Anton, serif; text-transform: uppercase; top: 0; left: 0; right: 0 }#harga .gambar img { height: 200px; max-width: 100%; margin: 30px auto 0; display: block; } #harga .harga { margin: 0 auto; background: #a95; padding: 5px; position: absolute; bottom: 0; left: 0; right: 0; font: normal 15px/20px Anton, Arial, sans-serif; text-transform: uppercase; overflow: hidden; text-align: center; }</style> <div id='harga'><span class='judul'>American reunion</span><div class='gambar'><img src='URL Gambar'/></div><span class='harga'>Harga Rp. 10. 000</span></div><div id='harga'><span class='judul'>mean girls2</span><div class='gambar'><img src='URL Gambar'/></div><span class='harga'>Harga Rp. 10. 000</span></div><div id='harga'><span class='judul'>the avengers</span><div class='gambar'><img src='URL Gambar'/></div><span class='harga'>Harga Rp. 10. 000</span></div>

Jika gambar nya kurang, dan anda ingin menambah gambarnya anda tinggal tambah lagi kode seperti ini

<div id='harga'><span class='judul'>the avengers</span><div class='gambar'><img src='URL Gambar'/></div><span class='harga'>Harga Rp. 10. 000</span></div>

Oke mungkin hanya itu saja tutorial yang bisa saya kasih kepada anda, Jika anda kurang jelas, anda bisa bertanya melalui kotak komentar...