Fs-Galery. Hmm, Cara Membuat Galleri Foto diblog. Kalo
sebelumnya saya sudah posting Cara Membuat Galery Foto Di Blog Sekarang tips
nya hampir sama, yaitu juga seputar membuat galleri Foto, namun dengan tampilan
yang berbeda. Sobat Bisa liat contohnya seperti berikut :
Contoh Diatas adalah Galleri My Design Project. Bagaimana,
Menarik bukan?..
Jika anda tertarik untuk menerapkannya, silahkan ikuti
tutorial Cara Membuat Gallery Photo Menarik Di Blog Berikut ini :
Tahap Pertama yang Harus Dilakukan adalah Mengupload
terlebih dahulu Foto yang ingin anda tampilkan didalam Gallery tersebut, Foto
ini bisa di Upload ke Image Hosting atau juga di Upload di Akun Blogger sobat.
Saya Anggap anda sudah mengerti tentang hal ini.
Buat Sebuah Postingan, Beri Judul misal My Design
Project.Kemudian Pada Halaman Postingan tersebut Pilih Metode HTML bukan
COMPOSE
Copy Kode Berikut ini :
<div class="snap_preview">
<style type="text/css">
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%; }
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>
<br />
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 1" target="_blank"><img alt="alt anda" class="attachment-thumbnail" height="96" src="IMAGE URL 1.jpg" title=" title anda" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 2" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 2" title="TITLE ANDA" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 3" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 3" title="TITLE ANDA" width="127" /></a>
</dt>
</dl>
<br />
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 4" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 4" title="Farish Blog" width="127" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 5" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 5" title="Fs-Calm" width="128" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 6" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 6" title="Book" width="128" /></a>
</dt>
</dl>
<br />
<br style="clear: both;" /></div>
</div>
<style type="text/css">
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%; }
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>
<br />
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 1" target="_blank"><img alt="alt anda" class="attachment-thumbnail" height="96" src="IMAGE URL 1.jpg" title=" title anda" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 2" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 2" title="TITLE ANDA" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 3" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 3" title="TITLE ANDA" width="127" /></a>
</dt>
</dl>
<br />
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 4" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 4" title="Farish Blog" width="127" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 5" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 5" title="Fs-Calm" width="128" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 6" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 6" title="Book" width="128" /></a>
</dt>
</dl>
<br />
<br style="clear: both;" /></div>
</div>
- Kemudian pastekan pada Postingan anda, INGAT dalam bentuk HTML
- Silahkan Ganti Tulisan URL IMAGE ANDA dengan Url Foto yang telah sobat Upload tadi
- Terbitkan
- Selesai
Selamat Mencoba, Semoga Sukses..
Thank's infonya sangat menarik..
BalasHapusYou're Welcome.
Hapus