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/AVvXsEijV1DVISOWLkIaJp6NCdtzsNR_ADlqlelmaDNMvnwwJY-iyCJzWIpNyW0OuTXjgGMuva-45W8E6l4XVtFG-48ZR29OuGhJOxF0Ji_ZOs2OmQXLSt3lSL55YMbw06332IoSQuC8my4Iru0/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/AVvXsEhjekyC21XEOLAebzrqQppxWnDu5sR2aNjyU_fH9x7xtc4EzNqEOYE9I8uRO0WnokR9kkKWtzXnq-ckxuJfVwaiAlD9_xgGtKkTV2Z1Wa-c_xk5EinyNO34DnqU1lnTUMkn4LUaB_yjSF0/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/AVvXsEhA75sivKJGShwX1fb-pw4u0s6isj4BpWRkdp5W9HHMwpSf-k72Nf_25s0Hyc17Y6fMvWfsKlyyZVOj1y2U4M9K1K5gZLihyphenhyphenOTTRfGMaQyIK4sqEBA70RFCtYcNeNu7JQZkXTaaS87hwV4/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/AVvXsEheplDCivsNL77UF4m2Nt4zQurg9clrFyi8DddEqd1m_dAx58XdzYc29fro1cm9myOKupRavtgLVKxoKhq4k06B_CDytIQ-D-FwLEPCAm5VHkk67OuzEgO6VdU-dBYzDmM2Q343IhyphenhyphenJN-E/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/AVvXsEg6HqVUTiEb7CGBRTwIQD0oMJniTFvD-IdsrNhnQaS7kYx2ScXoVwGwpA-NrhRRN-uJTfJLllUyHpYHgITrlk_vkmFPD-9tgWBlmcsfytln4G6yTpyeqXMwe7N5OLSYS69k7XNiAPInNHM/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/AVvXsEh02jIpUCe1P7EuJ1tVuyUDlTFvDXTHi0q3WrA6KJMtAIfc0cpZ451aYUSbRmuMQJZwEmGUl0YlOcikTHmUPVXWs7ufWCGl7m2sfCAgysIOe4a4Rqr8yqpgFtaZk_HDF6pBYGrYnoslJ6g/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/AVvXsEijB-4iXyDhOSfFd7ydZAaawr90k4gMc6RDtbOD_7XlvH4wQWN9ouPOGwIq0u4fpcO5w3AnIjIAAM_GcgZwTJLd7jd8wYCV3P8Bm9sZrRlO9e0Gjs3AyqK4ABkuH7yKnh2f3gLbTO9Lz84/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/AVvXsEhrNqFnIZ8biVR9oap0V4E2Rh4ywmWHhRr1HP_FN8hF1UdzDeiPgO3zRZMHqjSmKPQkLr9Fje2DqF_lhfTg8cY9nQwVEzeUj5ta4VQddVJzNG7Vt3RB8nrpWyPOkp5K7FJFIRtNiUveuRQ/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/AVvXsEjljkIadr5fG47aibskLY3XKLV-9pBAvf_5IDBZ1bZsqnjkfwtDCyVVuQvruEfuGwNsZ_TMyrVFs6rf1m9ckZl2P-iDBu_6evMtPGvbq0urc5z3H-xtfRlzOH2Jj0c0TzoBgNb2FP_bRIU/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/AVvXsEgvee3g1XvqI9KjYvNn3O7Ri4ONF87yVZHwshE54NlzRSypzP5KOgesdfRC-3ThYZCjKjOiGJHrlQewPiWwnJPLh38HsnCJ3IqIwTWChHyniQ0fh3qY3pnlpFxUOAL8h72FDm2CBATrN4g/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/AVvXsEhRTUyF3hCM46VVEZ_zxI_PakunmRsUr5GHOSYs0yPR0QMigWnbN2JYyzs-0OTc7LMBRLSp_Pu4_VKnoAr8LphAD0nZz_8djTxGtFQ68KubyvYkmDRGsqQITiI-KhOxXaXEdxh4TX80h3M/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/AVvXsEi638JR1xbzufEaAA_3g5f9lt-YP_CupLvguiBKg8L2m8FNhyphenhyphen2cB7cvQiV2DZwIemKPnmwmWTt7QHDYPtbJilSlCdL-Di28NyabHu3nleSUWFiO5OhMdkS_fbG9HMiWmSjbyUx2eb3JzXE/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/AVvXsEjymwSnU0NAdx9cEWnTXHOd0cA__Q-BMld77ukZUKsM4Q2Mxc9TOW2xQ-9z94uwzvkarWUewQ8Eiyg4msibc_dmKbyMdHJYk-Ac_ECGAgoU_wbJMQ2PyM9HTFV0k38qu8Gef7w46MpKPSg/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/AVvXsEjvJsDYnUVKg9PpfVIEdFCmvBUBwAvA-IBm6diQcTKgpuXbluJc3mVbexbqHAmp8SfT8WjSwxyGbMJuAvQBOJ8JiUhkusTOmio8ozomwX8fAfD0whIPlvqCBPIZ3mgbpNpu8nBIF_CUenY/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/AVvXsEhr-EGdGBpL0XTgYpiT2mw2VND7TMkIP0UVL51bKzrC0xWpoctFfsTKvNKT58k33L18G9n_i1VA4hyCNF9h0GfrwaJwm8c7duE9GpFopJAypz5906PRNeH0d0OxGiFsxfZBpZwZH88Q-ZI/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/AVvXsEiUY-oPd_5t1BYZP5J13FcZA-lRTCoDpkuaMR86uSvds-SZlVNOQvui_iwCVWkDkZOdgvjhJh2uHaBKthpLmjiHCBefoaAVXS9cs6268gbu5JZRAqBOn68q18waqigFY-rZ_H_Jh2rnCp4/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.
Wassalam...
Tidak ada komentar:
Posting Komentar