Tutorial Membuat Recent Post Per Label Kategori Dengan Thumbnail Di Blog

Pada kesempatan kali ini saya akan berbagi trik seputar dunia blogger, yaitu tentang cara membuat recent post berdasarkan label atau kategori dengan gambar (Thumbnail) diblog.

Recent Post adalah artikel postingan blog yang paling terbaru, namun trik yang akan saya share kali ini adalah recent post berdasarkan label atau kategori dengan thumbnail atau gambar. Jadi intinya recent post ini hanya akan menampilkan artikel terbaru dari label atau kategori yang bisa kita tentukan sendiri dan sertai dengan gambar atau thumbnail.

Fungsi dari recent post perlabel atau kategori dengan gambar atau thumbnail ini adalah bisa untuk mempercantik tampilan blog kita dan juga bisa untuk mengategorikan isi dari semua masing-masing artikel blog kita yang ingin di tampilkan pada satu widget maupun laman. Selain itu juga bisa untuk memudahkan para pengunjung blog kita untuk mencari artikel yang dibutuhkan dalam label atau kategori tertentu.

Tampilan dari recent post perlabel dengan thumbnail ini kurang lebih seperti gambar screenshot berikut dibawah ini.


Cara Membuat Recent Post Per Label Kategori Dengan Thumbnail Di Blog


Cara pemasangan recent post perlabel atau kategori dengan gambar atau thumbnail diblog, triknya sangat mudah sekali. Karena sobat tinggal memasukkan semua kode script yang saya sediakan kedalam kotak HTML/JavaScript yang berada pada Tambah Gadget Tata letak blog. Selain itu sobat juga bisa memasangnya dipostingan maupun laman blog, dan tentu saja tanpa susah-susah Edit HTML dalam Template blog sobat.

Jika sobat tertarik untuk memasang recent post perlabel atau kategori dengan gambar atau thumbnail di blog sobat, silahkan ikuti langkah-langkahnya sebagai berikut.

Cara Memasang Recent Post By Label With Thumbnail Di Sidebar Blog

  1. Langkah pertama, silahkan sobat >> Masuk/Login ke Blogger.com menggunakan akun sobat.
  2. Pada Dashboard tampilan blogger baru, pilih dan klik Menu >> Tata Letak >> Tambah gadget>> HTML/JavaScript.
  3. Kemudian >> Masukkan semua Kode berikut ke dalam kotak HTML/JavaScript.
<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}
</style><script src=”http://kucopas.googlecode.com/files/recent-post-by-label-thumbnail.js”>
</script><script>
var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 150;
</script><script src=”http://www.daffa.xyz/feeds/posts/default/-/TUTORIAL%20BLOG?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs”>
</script>

4. Setelah sobat masukkan semua kode kedalam kotak HTML/javaScript, langkah yang terakhir silahkan sobat klik >> Simpan dan lihat hasilnya.

Cara Memasang Recent Post By Label With Thumbnail Pada Postingan Dan Laman Blog

  1. Silahkan sobat >> Masuk/Login >> Ke Blog sobat.
  2. Setelah berhasil masuk, silahkan sobat pilih dan klik >> Buat Entri Baru atau klik Menu Laman.
  3. Kemudian sobat masukkan semua Kode di atas tadi, dengan catatan sobat masukkan Kodepada Mode HTML dan bukan Compose dalam Entri Baru maupun Laman.
  4. Langkah yang terakhir silahkan sobat klik >> Publikasikan dan lihat hasilnya.

Keterangan:

  • var numposts = 10 adalah Jumlah artikel posting yang akan di tampilakan. Ganti nilainya sesuai dengan keinginan sobat.
  • var numchars = 150 adalah Jumlah karakter atau cuplikan tulisan posting yang akan di tampilkan. Ganti nilainya sesuai dengan keinginan sobat.
  • http://www.daffa.xyz/ Ganti dengan alamat URL blog sobat.
  • TUTORIAL%20BLOG adalah Label atau kategori yang akan di tampilkan daftar isinya. Ganti dengan Label atau kategori blog sobat. Besar kecil huruf harus harus sesuai dengan label blog sobat. Gunakan %20 jika label blog sobat ada Space atau spasinya.

Sampai disini saya kira sobat pasti sudah bisa membuat dan memasangnya di blog sobat. Namun jika sobat masih menemui kesulitan, silahkan bertanya dalam form komentar yang tersedia.

Okeeee, demikian artikel dari ane.. 
Terimakasih telah membaca ^^ bila ada kritik/saran silahkan disampaikan ^^
Semoga Bermanfaat Sobat DaffaXYZ ^_^

Cara Membuat Gambar Bergerak Slide di Blog
Cara Membuat Gambar Bergerak Slide di Blog
Cara Membuat Foto dan Gambar Bergerak Slide
Cara Membuat Banner Keren Sendiri di Blogger
Cara Membuat Banner Keren Sendiri di Blogger
Kali ini saya akan share Cara Membuat
Baca Juga×

Top