Cara Membuat Recent Post Keren dengan Jquery

Bagaimana cara menigkatkan page view blog yang mudah? Salah satu Caranya adalah dengan mempercantik tampilan blog tersebut. Dan menampilkan recent post yang unik nan cantik adalah salah satu cara dalam mempercantik blog. Dengan tampilan blog unik, maka pengunjung blog akan semakin penasaran dan jika tingkat penasaran seseorang sudah meningkat terhadap sesuatu, biasanya akan semakin lama pula orang itu berada di situ.

Sebenarnya trik ini sudah banyak yang mempostingnya, tapi tidak apa-apa lah disini akan saya jadikan sebagai arsip online ku saja. Siapa tau kapan-kapan saya membutuhkan trik ini, saya tidak perlu repot-repot lagi mencari kesana kemari. Jadi, tinggal buka blog sendiri dan Copy kodenya saja.

Oya trik ini saya dapatkan dari blog 24work.blogspot.com. Terima kasih untuk 24work blogspot com. Jadi mohon maaf jika ada yang error atau tidak berfungsi sesuai dengan harapan Anda.

Contoh Projek :

Sebelum ke tkp untuk praktek, sebelumnya silahkan lihat demonya dulu melalui link dibawah ini.

Live Demo

Cara Membuat :

Langkah 1. Silahkan Anda login dulu ke Dashboard akun blogger Anda. Kemudian Pilih Layout atau tata letak pada menu disebalah kiri.
Langkah 2. Silahkan klik tombol Add a Gadget. dan pilih yang HTML/JavaScript. Lihat gambar dibawah ini.

Langkah 3. Masukkan kode berikut ini kedalam form HTML/JavaScript.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">


home_page = "http://myarcive.blogspot.com/";
numposts = 5;

imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-t/recent-posts-min-1-ycode.js" type="text/javascript"/></script><a href="http://myarcive.blogspot.com/" rel="dofollow" target="_blank" title="Arsip Online Ku"><img alt="Arsip Online Ku" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><a href="http://myarcive.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/></a><a href="http://myarcive.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips"><img alt="All Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/></a><link rel="stylesheet" type="text/css" href="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-t/recent-posts-min-1.css" /></div>

Langkah 4. Ganti http://myarcive.blogspot.com/ dengan alamat blog Anda. Lalu Simpan/Save dan Lihat hasilnya.

Keterangan : numposts = 5; adalah jumlah postingan yang ingin Anda Tampilkan. Silahkan ganti sesuai keinginan.