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 :

1. upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
2. dapatkan url foto yang telah diupload
3. bikin postingan dalam mode HTML (bukan Compose)
4. masukkan kode di bawah ini pada postingan
5. publish dan lihat hasilnya

<div class="snap_preview">
<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/AVvXsEgxa-K1kE6Zdd1kVYpONN2IRT-Ad1YNQK5QdvUgZGDE3lmV4lAi1Oikkw3oc-JzfoMaRvJefYoxp8ERXwGChZ31BHAFMA9Dgu2uyhNFKY-RgjcM6b93QOpAakrVCvB1Vd65seDCQHp_YSY/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/AVvXsEg66t83rvwVe1cz36WEwnYFLjNVYuA-KBt1GOB03Dp37abT9UgVV6TXffcOYSTv8vXHPXZ-ixnnMCJVBeXZ9e7fEO5FM_Mws_4D4JQl7TybYFWg3_1SKD9ETUqBHUxnICNJ9pcAvuaP65w/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/AVvXsEjsxlxH0DXmAYTyDJfuvXLMe-I1ItJZYDClgCmfSlMOIX4wr_xRFstCX7OB29C1P96RKrvL4ZlIM4l32R3gHYoRRiX-ESTwxM_3nWtXqHUJBqDqQGMrVDfI81XTAh5Eo3EQyFHLcF6Upkg/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/AVvXsEgwOmc7yZsueVebUpITpg2axdfYwaGY-vH2CLFKPm5KpOhJsLeW37ViGZ8YygsWkubrCTOdvXoAODGPUoaNc4eqGMmvyZ9DYlz-M232QgBtQFIhquUCru3JLr3JrtZc05yC-8K_ydY9DHs/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/AVvXsEgcFkt4xUYvnCW_stSfG7Vv71VXJThfoiua1HBxh4qNxNWuP5sb4KiSlFc5Hnn2u9T6OsPfFdsgRYqm8Q_qKJs7t4VnOp8EZza1Q2ssaTLrDANWDw8L5rUSzffPoECdPkslek5yOON7vJ0/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/AVvXsEjKaNrCCcHOoJNlvc6_v8LpyWG4Y1GCO0Aj5AMMfuO7OrRYIip4-CiNhrnolU2ms1MhF2s8g0pT7SnzT-efRAt0aF6h0Fy_BUg9MN24pg7KHffKLv1kVTwW_sxie1FXAe-n39CDLYw51bc/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/AVvXsEjHDKoeY8xTKvY91t6cXGszZ4Exi6ElSUPFGVIHgPuW6QAS9V0Vjqp39UyR4wJ2drKoSblIkSjWYRO2KMBsFs7Lu14HbO2NCkGutjQjto8yymkvWlEIWEcvXbxly5v2RdVHNFxAac9qcmU/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/AVvXsEgxoQZHRw41HFxUg5HEUkM7PIJ8iSUGyvZRNOpVVlEoX0BaROFhP7AqbszIA4r5b1LtKvPAPa3nQ64O_hf7RsKak3TwHsun2ygEBRHToAD2kJJ-o6Etz6fO_hYg80btur9PdB_M8nWe2uY/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/AVvXsEhf_Y3ixLqNfxYd220tPzuD7jEOvWd-xfMBHhntNPIVJ65Dq0Rs0UwfbI6joUklLLfCtzyPR1SSssb4_A7irJjvSOYjDSMGP7YNDPQ_qCpxjKBNfrvXCaeOHDpZapSpI7nbdCVPY7TL2IA/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/AVvXsEizgepaLEwZ93YQ5LC9kIXIH_Q1pYbJ-xlUWkfOm1DzCU4zJUUDIiMTj8NAqjnuYLcH7KP9P7j1PYw9PIqlDpHV3-kt6miKR226_B8JZ6gDqF16dq3pQLnN_44SWFylVb0c6-3LCzPLDts/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/AVvXsEjNZ6qgqZCYbU35chsYlcH6zmrE3oli9E_NLSLhhThdEXUl-o8VPSLJ7REzfgNLvxDVFAT2Wtt7COrvDCOZen0mHDGnQzUORFCVLTYJdxLKxWs14UBLGqCsvvLGHZPuO557Kh5eRn-hz5c/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/AVvXsEg_tgR5F_B2vJKTLn4vDjpsHZBmyKigX-dyJro_k6Ef2vNObJ_jFyImUk5vsbWJ1FcIbQHX2wDHFCRwYhsU1wLwRdbdd9bo9F4IsDRyheDE3hFJfT5RNKsSQ0-9M1q0Z60esxCew40bOGc/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/AVvXsEhWdTYVnhq88CsO-ecn2jZdq-Ia3wBvF7fkz41DVCuozXMWA7vKKQQ8UCUyOqrxRvbtzsamiRVL0b7XuwaotVWP6Uw1GSFZroNz7nuFZzDqVGPOInpRnVogcSLQrFkA3wBGMfjWvgtmNHw/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/AVvXsEj-Lk7XIGDmE6a2_LOW7n-yzPUebpKiYqfTbHgO85OwTh7duoWABHR4u4YZHSaqglfEE5YE_s2VAyfYHyKVxdpQsWXxC8abI73-2tN9jAHPMpw57NsRE0pPwRYb4ZQPx9BYQR1f8jT5JE0/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/AVvXsEjTYKtUnL_rzRTn0vzdJW8344XoiY0UvpqszHbEQ0uvnNmdniTpdb2kIYDg5R3R5FxbkuL-INAmb4bbVBQVNEo04YLZrT0kF_bxJ0noJNEhyoHQBNPh7U0rF8QjBOW2dfifGCcv1DnNSoE/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/AVvXsEieCkNF0-n4mkKTCSSDWBx-gVBBxiT5leHp38rvahRq9RDlxa3vgF9_Q4sDHVO5skjrnQ2cpcRWL6HTgib3bkmerT8UJ8XQgovdsmgGBS0BSfDUIwZ9P5TN7A1EBuNHTylOKg2yzHJjv5c/s320/kacamata.jpg" width="200" /></a>
</dt>
</dl>
</div>
</div>

Catatan Penting :

1. Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
2. Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
3. Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
4. Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
5. Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.

Sumber : http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html

Posted in: Tips n Trik,Tutorial Blogger