Warung Bebas

Rabu, 12 September 2012

Cara Membuat Recent Post Berdasarkan Label Kategori Dengan Thumbnail Gambar Di Bog

 Cara Membuat Recent Post Berdasarkan Label Kategori Dengan Thumbnail Gambar Di Bog - Pada kesempatan kali ini saya akan berbagi trik seputar dunia blogger, Yaitu tentang cara membuat recent post berdasarkan label atau kategori dengan gambar (Thumbnail) di blog.

 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.

 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 di butuhkan dalam label atau kategori tertentu.

 Sobat bisa melihat contohnya yang sudah saya pasang pada laman blog ini, Silahkan sobat klik menu "Trik Blog" pada menu dropdown blog ini atau lihat DEMO. Tampilan dari recent post perlabel dengn thumbnail ini kurang lebih seperti gambar screenshot berikut dibawah ini.

Cara Membuat Recent Post Berdasarkan Label Kategori Dengan Thumbnail Gambar Di Bog

 Cara pemasangan recent post perlabel atau kategori dengan gambar atau thumbnail di blog, Caranya sangat mudah sekali. Karena sobat tinggal memasukkan semua kode script yang saya sediakan ke dalam kotak HTML/JavaScript yang berada pada Tambah Gadget Tata letak blog. Selain itu sobat juga bisa memasangnya di postingan 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:
  1. Langkah pertama, Silahkan sobat >> Masuk/Login >> ke Blog sobat.
  2. Pada "Dashboard" tampilan blog 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://kuc0pas.blogspot.com/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.

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://kuc0pas.blogspot.com 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.
 Cara di atas adalah cara penerapan dalam widget blog. Jika sobat ingin memasangnya dalam postingan atau laman blog, Ikuti cara berikut:
  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 Kode pada Mode HTML dan bukan Compose dalam Entri Baru maupun Laman.
  4. Langkah yang terakhir silahkan sobat klik >> Publikasikan dan lihat hasilnya.
 Sampai disini saya rasa sobat pasti sudah bisa membuat dan memasangnya di blog sobat. Namun jika sobat masih menemui kesulitan untuk memasang recent post perlabel atau kategori dengan gambar atau thumbnail di blog sobat, Silahkan bertanya dalam form komentar yang tersedia.

 Semoga trik artikel seputar dunia blog yang saya share ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat berkarya...


0 komentar em “Cara Membuat Recent Post Berdasarkan Label Kategori Dengan Thumbnail Gambar Di Bog”

Poskan Komentar

 

M-Kolom Tutorial | All Tutorial Copyright © 2012 Fast Loading -- Powered by Blogger