Cara Membuat Gallery Foto Pada Blogger
Karena kodenya panjang sekali maka langsung saja kita mulai membuat gallery foto pada blogger. Dalam hal ini kita mempergunakan 16 buah foto.
Cara pembuatan :
- upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
- dapatkan url foto yang telah diupload
- bikin postingan dalam mode HTML (bukan Compose)
- masukkan kode di bawah ini pada postingan
- publish dan lihat hasilnya
<div class="snap_preview">Catatan Penting :
<div>
<span style="color: #0066ff;font-size: medium;">Seribu Wajah Gayus</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHhctQy7Hr4vbewTspOq6vFCv-Sohm0LndcRmHFybe4kGLULkNsMshe5W4AfXlvn5Mg3C0Ww_QqbaCr4TP97yr9DN3JptNR3MjqkdpCFiFQ4AjtGqfQVyFglhidcfEVZoHjDt3MGzC4HQ/s320/atronout.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3AG1yEIbqbLKYHlCoJf8dnBJNYAWjfP9vDojRy1OtNSqexYcP2sQ7diZ-uu8Midh76-ThSyQIX-z_1bPc1dDtjIQMlNxF0g9j3_T4MvGdvUF_KpBMYoZTF6iqx-gj8A30eiYaUTDVbs/s320/bieeen.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEvcaQMqoCFW-6JJF_oD9XFzcQh3hWNdQTVnv_DrXVzCMSaALHLCsTaFsWiTMwwnXMikNi9vFfhSiqLQ5FMNy6zNzyBbeqqjIW_Taif4dx3DCIwJmI0mIhoh53HdngCaRG4fijJe_Jjj8/s320/blankon.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCxiCSfia396AUxoqC0SDHMozxOtCiPA9lp91UF_upN5aAzCmkERVVWWHK0ECYRG6XaR1vBXfrLTioBaz4OA46ud2eEmP9EL6dMaAYmqxChzyjPj8xAOv9w-8AANy8wG9jAjyrM8UUbds/s320/boxing.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmAwbqalgm2jz5pk8yatHV4WRIabktBwkv-odIhGM3l7lprjACAEjq3tFNPDIGu3UGv3vRc0UyWGFm2wv3ZckrEttmfk4obhXZKH9noz42xiQsq48cFCtheUJ7raa_orVy5ilNiYpk1w/s320/duits.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyqClc1EXGyQqFbYi5qJRvHkskaFLSPZQQttLwTh-QrPmMDgPCbWiDulpZIwoDolgg0YCP130iZWCzdpnn0yFxzcsTKbTl_TTdhSBOrwWtJLCeuof9mkvd371PhHkbXO15nA64mj-Cv9o/s320/goyang.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9dCuvLz0y2tRIyWbkHcZCP4HvL5w6Ra9DfCXy2ObkFta0hBg4Crlv7scGC0urNWppPKw-8W7CMbw2oK-dDpgxAm7kZSgkFyl6NRdESjSOTsxJ_wLTXQ_jToAe3SjcKTkYLmlX6PewwSI/s320/hormat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7NM3Pwln0Zsn44-G8oZxwTjUnwWK-dloYbL0DqDnkbqBvMkuxDeVvln1kFb82sO6O4wLqb-NE6Xafa9JPGvR93A3o58LO9FIo-d1vnGo5Bg5fXIIAIRIH5LX2r-EC4K5ZYtkMHav9io/s320/jendr.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlGWm4s8pJudtM23nPIkA4kP2-MQ7MBWMN-4sXP0przlriLrxyuu7KuRS-uIpW-dpjeZYqE_DonL0OeKS37PNdPWpJwij6awQJjg4-92erNnLtSHU2ZFMC7L_tbCx6Iq4WPv4iGZp9Yg/s320/koran.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNN8rUxgikSk6o519CRkwWpiuDquxaeqkCnA9b5jbObTmVYJohcY6KuYyI8d1YVN9VAN6y8pAfssEIB4pTTTQy77xYQZ5d051PqslWH0XObyM6Nzo6o7VWExpsk5f8mBw0-DD7HswfejU/s320/samar.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNMCiGsaflB3G1B9LDqNByq2WkEx-4Pmr4f0IYoZrPh5oP4FY7S7nP6r04drUeU9nDMzNcKOmwyKpr_K3H6_fowLqdyT8TbEXZ3I7cXEv-vJUa-RPd4MJyTujvj1gqYwHBiSU-U25d2MY/s320/seribu.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN6cDCD6Hd4P72V1hg-tjmbiRRolMkGyMYKsnHcvFXvZAG6AmTSGeMNkKWS-zyR_RPwoVRZjzy8bbRfk5oVkxxDsb68qKqFbvysR_NyjeqlXlNEM2r8xOudeXSvealfl8YdfWWMOma2FY/s320/silat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjER5stlQVnVmYMGDHbUx1XOfXCOSYpQpfEUwQBG5omb1zqU4myElCmuutjNmnBY1Ng4Gqp7t_X4oWynUZmrQSUA5v4eB-He5AVqBvz3KJAxVdFptDpyfpxX9eB0MavZqdXz6YAiDsbbgs/s320/wig1.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXnhUaCGPgaKHGU4JOOo6JuvuuOOVV4TU0HRuAGzVHR92CvQhkZ92oUJXtm96vPp5jr3QdEn7kp7JHjQt_uBnA4iwwn51fsQAxhw3NjYXB1DrNK47HSBChFPxWhed_tzXByWWvHtJ90ew/s320/tenis.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVLk9hjzW4NHOM6BXPvlRQqNz5Fh_-Z7pXRU6zSLM1OupiXnnGUFrRvkPX7CaO28TP96uXYoVLu7FozyOIzZj18gFJUiNNMqlU61CwKn-ovGsmNhw5HNkPmrJ4IeykKAN6hbKgaaAMllw/s320/santai.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5nF8KnP_-pKK_XHP57-1Qwi8HhaeXvtcXaCVkzGQs74fyaEjIbml817sITXrIPRxVjkQ-JaoOXdXoq7pObyTlazlmOxxYp8lVu6sdBRiJaYaCCJx_awLip7-rGP5iyTHM8sQRP4jr7Bc/s320/kacamata.jpg" width="200" /></a>
</dt>
</dl>
</div>
</div>
- Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
- Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
- Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
- Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
- Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.
- Kalau semuanya sudah dilakukan dengan benar, hasilnya bisa dilihat.
0 comments: