Karena kodenya panjang sekali maka langsung saja kita mulai membuat gallery foto pada blogger. Dalam hal ini kita mempergunakan 16 buah foto.
Cara pembuatan :
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://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZgJHjmAe4jOcF6okfNlEJw8Gao5kuRB259FVMxtGnlUPJyQyA1CcvH8cUPrJ98Pw8yQjsZDkeS55y2EHRODGOJudeJ-NfLl4dax0gIHIN_HeRUUMI6cVQ7UdEl1BMeLaiwH2LZ4QJpY/s320/atronout.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4CZBUuAA7ZJhu8x9qSj9CWxAlu387LBAK2mJykO2OSJ2UU6EhtlcDEQ7rJZTbxCzk5cvEkLqkLIeDGJjx1joim4iAiG7Zg8sKH3R9-r9U7so9Lpdf98IcEWzZ-NPYyGPyXb-p0q0Rx7E/s320/bieeen.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixhsNaNoqySTJxiCRaZnsvo4NvWri6UHF6KpQy4ziVJlNh6x1gw1x1_wHHWaS0uT49zR2GhsndoDndL1JIWNeQHus2O6n-UpQtkKxZouCwcpc646nkR3SeKG6M6LYHS-uWErOVoU5nQDA/s320/blankon.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcd7flsQxj75PcbFVYd_Xnju614Y_JzqfwB0Y6e_M03bi5SZk3WakWguSDn6uDAe3s_eqlAure69esraw0Fg9jxyEChbtIor60PevClo-rBeJ-TaA5WMbP2yttZQDY3DPdApFL3h43DV0/s320/boxing.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKqClXQbDaU_qQpr7LdnXRUtUipDMtkdbnVx7GHIqfXSz_C0a_6X9oLxRP-I3rnvX7E3BrTgU_VQ11hh1Yjcbh_1OISB5_l3cHE3vHgGLHpXRjDbwa2QN3E0pZ2RMAmp9wjGng4k6kdx4/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/AVvXsEiJp0qeuzXGoSFNnTaSfvm094mGceOpeDRe6o4TZSj3-rS95ObK0pnYQILva1Cpa8zerWaMghIO7KwqMO40udeYTT4uLXAv0tYbJwrmsie7dKb5RMDdBOGGpq9_D7pdS3FYssQBlH_yKWQ/s320/goyang.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXMFNtSRBwOYFdGYYMCTljvDMj9jDv_D3aKFSvpE_EpLZ2mdh8AYwEz9RHFzp5Wizgrc-pHKEcgcgOw5l3fD1NdmCZ5qK9qTzrYTe7MI38hKEEEwd7kQ8lhXqpG15dchPbrdCNM7z4Lyc/s320/hormat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3wxR9Bbth4QwEjLVbyVnavfiTnkS4tLwv4FKATwq0XntmVC4iFEguDIssDIkgYaVImDpkveu6Dx7k0hxeccviF2WHtj36vwTf8LrftsLVioZ0t-Z3OaoMxZO002wPgQ0yh2f5wGTKnsA/s320/jendr.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix36K4k_-cxULXsuMZs6xiRXQZqDHtjD_rSsYnf5qKwyx24kyM6FZIE6sFlS6jdpcHTGyEPXDNWMFuRmDQyjkaSnQgqvUEooGJNzlubvjbB2r5yfjlcAy5xrpZzVUprJ2462n4Rrm7lQw/s320/koran.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEighDY2-oE1cPRcSEa8QktcNPi2MIyWlfxJFqwBPHX7dH0kENQ9KaPMid03NwGJIbd-8zrME2OH6s-yDBvdSR2VD5EI8Y1Ak2_wjCLZpRbLQDflXYQielejY6U2eSEt2u7pXyJ6C2biBJY/s320/samar.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfsgwc-AHh97tWMv5pBMqwfuPQLW381obaYv53emMjrsJyfCJ-F4PjYDEJRCp-EXVfSzQsdGFVAg7ug3UrYHG1ZFQRcXfx-SdLZ446rvfLuzu-abGqlxs4n4qc5J1wXbitspFNOX02N-g/s320/seribu.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinboii6sCKTMOyTaw1nzcxmo0o7vfBLWrmku0J5Rn1xVuKgTKk6aFRO84vUZDy2MPRBkA704A2nwL6BapVFvSMOH83FUXtRFWPEhglZmBhotLyHfYc7XEJS_eDupMdMzRQiolgjKTAIdY/s320/silat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJikinZB-39vpjifK3VRoTFa9jYk_PZrz-6yMowSq0DTHsnwu5ppdiyMiq0UhIP_OY6nBESDGOboDcBzdZnBoNuQKM42SSF26uK0AmgQJNgNmrdc76iEglRtgKwOhL7xSQCQJOMnulHAY/s320/wig1.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8a1dlQyS9yFtn0bRAh48QEJVOwJGTJnr0L6SU3dhp3OcJ_pWGZIPcb4sY0gxX-2MqaBOGF6w4x0Bow2xEg6jkPBwb2GmiSBE3zyPL7aCeGdnNw8ySYsjXUy1YWQlGqq0vTenc47ciQ6E/s320/tenis.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQBRiXhq8QwJYt_sRL4su0Kv090ezwI4UQBFDt5CxcEPi9Diqx5OLTMdI5lBncG9TlUVihszV7c3IxkStoZpaDJD7o1mN62Ne2asy1eDJoOjugVtawCmyQ8HtJa2cOK0n0PPSIeKhi2bc/s320/santai.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://herdy-green.blogspot.com/ " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_hNDbVrSc3MYqZobBJL_xKUXcmpaZN9OjWe6LTryIUsb83U21LHB1qdO0DkctD9-KdHXvLkiEchypY2s1tEThxghcNp_O1kCT8JWuNY6YR0nw-y3Q0SLTWZEJhl6VMVshViFEBQgrnU/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 disini.
Tidak ada komentar:
Posting Komentar