Penulis
Ariez
Diterbitkan 22:44:00
Trik Membuat Recent Post Keren pada Blog - Recent Post adalah widget yang punya fungsi navigasi cukup penting yaitu agar pembaca tau posting terbaru di blog kita. Oleh karena itu tidak ada salahnya kalau widget ini kita buat semenarik mungkin. Disini saya akan menuliskan cara membuat widget recent Post ini dengan thumbnail gambar agar tampolan lebih menarik dan tentunya pengunjung akan senang dan mudah dalam mencari postinga-postingan menarik kita. kelebihan membuat recent post dengan thumbnail gambar adalah selain tampilan lebih menarik juga membuat pengunjung lebih nyaman.
Script widget recent post yang akan saya share kali ini adalah script yang cukup ringan karena menggunakan kode-kode yang simple dan tidak begitu rumit, sehingga script ini cocok untuk blog yang mengutamakan kecepatan loading. Sobat tingga mengubah lebar, jumlah post, garis pemisah, apakah ingin ditampilkan gambar atau tidak dan juga panjang keterangan postnya dengan mudah. Sobat hanya perlu mengubah kode "false" dan "true" saja maka hasil akan menyesuaikan dengan sendirinya. Langsung saja saya tuliskan cara mudah membuat recent post pada blog agar menarik seperti gambar dibawah ini.
Cara Membuat Recent Post dengan Gambar agar Blog Lebih Menarik:
- Login ke blogger sobat. Pilih tata letak >> tambah gadged >> pilih gadged "HTML/Java Script.
-
Copy Code script dibawah ini ke dalam HTML/Java Script nya.
<style type='text/css'>
img.recent_thumb {padding:1px;width:70px;height:72px;border:0;
float:left;margin: 10px 10px 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;margin: 10px 10px 5px 0px;padding: 0;font-size:13px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;}
.recent_posts_with_thumbs strong {font-size:12px;}</style>
<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 50; </script>
<script src='http://arifiant.blogspot.co.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
Keterangan: Lihat yang berwarna biru dan merah saja.
a. Var numpost = jumlah post yang ingin ditampilkan, silakan sobat ganti sesuai keinginan sobat.
b. var showpostthumbnail = true jika ingin gambar ditampilkan, ganti false jika tidak ingi tampil gambar.
c. var displaymore (keterangan), var display separator (garis pemisah), var showcommentnum (jumlah coment), var showpostdate (tanggal post), var showpostsummary (keterangan post) dan var numchar(panjang keterangan) silakan sobat ganti sesuka hati.
d.bagian paling penting yang berwarna merah ganti dengan url blog sobat.
- Pastekan ke dalam widget HTML tadi dan beri judul "Recent Post" atau sesuai keinginan sobat.
- Langkah terakhir klik "save" dan silakan cek tampilan blog sobat.
Selamat, widget Recent Post sobat sudah berhasil dibuat. Demikianlah tulisan singkat dari saya tentang cara memasang widget Recent Post dengan gambar di blog. Semoga bermanfaat dan selamat mencoba.
