12 Juni 2014

Membuat Recent Post Thumbnail Keren

Salah satu trik untuk meningkatkan page view sebuah blog adalah dengan menampilkan artikel – artikel yang ada di blog anda kepada para visitor. Menampilkan artikel – artikel tersebut bisa dilakukan dengan cara menambahkan widget popular post, sitemap blog, arsip blog dan recent post atau post terbaru. Nah, di postingan kali ini saya akan mencoba membahas bagaimana cara membuat recent post di blog dengan thumbnail yang keren.
Perlu diingat juga, biasanya visitor akan tertarik untuk membaca sebuah artikel tidak saja membaca judul artikel, tapi mereka akan melihat gambarnya. Untuk itu dalam penyajian recent post, gambar thumbnail merupakan salah satu hal yang harus diperhatikan.
Sebelumnya, widget recent post ini sangat disarankan sekali oleh para master – master blog, karena selain untuk memberitahukan kepada visitor, recent post ini juga sangat bermanfaat sekali untuk menunjang page view blog anda. Widget recent post ini dahulunya telah disediakan oomatis oleh blogger.com tatpi tidak tahu mengapa sekarang ini sudah dihapus, padahal jika tidak dihapus kita tidak perlu repot – repot memasang scriptnya, tapi tenang saja memasang script untuk recent post ini sangatlah mudah, hanya setengah menit sudah jadi.
Baiklah, daripada panjang lebar langsung simak tutorialnya berikut ini.

Cara menambahkan widget recent post di blogger :
1. Langkah pertama dan yang utama silahlan anda masuk terlebih dahulu ke dasboard blogger anda masing - masing.
2. Jika sudah silahkan masuk ke "Tata letak" atau "Layout"
3. Klik tambahkan widget dimana anda akan menaruh widget recent post ini.
4. Pilih dan tambahkan widget "HTML/JavaScipt" dengan cara menekan tombol + yang terdapat disamping kanan.
5. Silahkan beri judul untuk Widget anda ini, misalkan saja "Artikel Terbaru", "Recent Post" atau yang lainnya.
6. Jika sudah silahkan pilih dan masukkan script berikut ini masukkan script dibawah ini pada kolom HTML/Javascript
<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin: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 style='text/javascript' src='http://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.zicblogger.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
Keterangan :
Ubah kode yang bewarna merah dengan alamat blog anda dank ode yang bewarna biru dengan berapa banyak post yang akan anda tampilkan.
Nah, itulah tutorial cara membuat recent post dengan thumbnail keren di blog. Semoga tutorial ini bermanfaat bagi anda. Silahkan juga untuk membagikan tutorial ini kepada teman – teman anda dengan cara menekan tombol share di bawah ini.

4 komentar:

Profil Dofollow mengatakan...

mantap ini mas bro..tapi saya masih kesulitan membuatnya

obat pelangsing cepat aman mengatakan...

masih belum bisa gan

Syaikal mengatakan...

wah keren,sob!!
terus lanjutkan postingannya sob!!

Sains SEO mengatakan...

pertamax dah!!!