Friday, 30 August 2013

Membuat Recent Post Berbentuk Grid Thumbnail

Membuat Recent Post Berbentuk Grid Thumbnail
Recent Post adalah widget yang menampilkan post-post terbaru dari blog. Salah satu bentuk recent post adalah Grid Thumbnail, yaitu widget yang menampilkan Gallery Thumbnail dari post terbarunya. Jadi hanya gambar atau foto dari post terbaru yang ditampilkan.

Cara Membuat Recent Post Bentuk Grid Thumbnail
1. Login ke www.blogger.com
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<div id='bp_recent'></div>
<script style='text/javascript' src='https://lioneldandy.googlecode.com/files/xc-recentpost.js'></script>
<script style='text/javascript'>
var numberOfPosts = 10;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 70;
var imgFloat = 'left';
var myMargin = 3;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://xpress-community.blogspot.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
5. Ubah xpress-community.blogspot.com dengan URL blogmu sendiri. 
var numberOfPosts = 10;  adalah banyaknya thumbnail post terbaru yang ditampilkan. 
Sedangkan var imgDim = 70; adalah ukuran dari thumbnailnya. 
Kamu bisa menyesuaikan tampilannnya dengan blogmu sendiri.
6. Simpan / Save Template jika sudah selesai.

Jika ada yang ingin ditanyakan silahkan berkomentar. Sekian dari saya, semoga artikel ini bisa bermanfaat.
Terimakasih.

Seorang pelajar yang ingin berkreatifitas di dunia blogging dan yang selalu ingin membuat kreatifitas yang lebih baru.

10 komentar

Thanks infonya gan, nanti ane pasang di blog ane http://bagta.blogspot.com

Keren mas, tapi saya lebih prefer dengan recent post tanpa thumbnail, pemuatan nya jauh lebih ringan. :D

gan kasi tau donk cara bikin double klik buat seleksi kode

disini sob :)
http://xpress-community.blogspot.com/2013/08/membuat-seleksi-otomatis-pada-tag.html

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.
EmoticonEmoticon