Tutorial Buat Posting Berbentuk Galeri Gambar

Contoh galeri gambar

Di internet sekarang banyak terdapat template blog bercirikan galeri. Bagaimanapun kadangkala template tersebut tidak sesuai untuk digunakan bagi tujuan lain. 

Bagaimanapun kali ini ambe berkongsi Tutorial Buat Posting Benbentuk Galeri Gambar, hanya pada postingan atau berlabelkan 'galeri' tanpa menggunakan template tersebut di atas. 

Lihat contoh postingan yang dihasilkan di sini

Cara penggunaannya juga sangat mudah, ikuti langkah-langkah di bawah ini :

1. Pertama Uploadlah terlebih dahulu File Gambar yang ingin anda tampilkan di blog, Upload ini boleh  di Blogger atau image hosting kesayangan anda.
2. Jika sudah upload gambarnya, sekarang kita memulakan membuat sebuah postingan gambar, Login Ke Blog » Posting » New Post » beri  tajuk album anda, sekarang klik HTML, Jangan yang Compose pada pilihan Pengeditan Dokumen.
3. Copykan Kod berikut ini :

<div class="snap_preview">
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
</div>
</div>

Sekarang ganti tulisan tebal "Url Image anda" dengan Url Gambar yang telah rakan-rakan Upload tadi, sebagai contoh seperti berikut ini :

<dl class="gallery-item">
<dt class="gallery-icon"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZszYAGYzi_N0kKmXV1w4JrnvwTAgSjgTALyNgP2ikrfmQ4bi8q4atqWY7e-j1yuss38-PPQvsqrTfKzdjZfvFJNpHqHzmWoXBInMan2hp9iygVfkmMTIdd_Bf8yz-8Qy387D_DP8qGPL/s1600/1.jpg" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Lrkpe-4yAPqnZ9t5gS8P_JUf8-3fBTRstouPhRpaIZXg-eMhv5sMueVYVJU_S2eAUnqFHbx5MxqyxhFXX3sdFdHm6Tp5GpQIzJIXIaGM11ljZDSCPNFsbIas23x188ruBVSMsyZOOFCE/s1600/2.jpg" width="200" /></a>
</dt>
</dl>

Jika sudah, sila teruskan post. Selamat mencuba. 

Tweet