Cara Membuat Recent Posts Blogger dengan Thumbnail

Cara Membuat Recent Posts Blogger dengan Thumbnail - Recent posts atau posting terbaru adalah salah widget atau fitur dalam sebuah blog yang sangat penitng. Sama dengan membuat related posts, juga navigasi breadcrumbs, widget ini bisa berfungsi untuk membuat pengunjung blog kita semakin betah.

Memang sudah ada widget recent posts bawaan dari blogger tapi sepertinya kurang menarik, dengan menambahkan beberapa fitur pada recent posts seperti thumbnail, komentar, dan summary bisa membuat pengunjung blog sobat tertarik untuk membaca artikel atau postingan terbaru tersebut. Yaudah langsung saja deh ke topik

Cara membuat recent posts atau posting terbaru dengan thumbnail

1. Masuk ke blogger, dan jelas kudu login lah hehehe
2. Pilih Rancangan (Desing) > Elemen Halaman (Page Elements)
3. Tambahkan widget/gadget HTML / Javascript
4. Ketikkan kode berikut
   

   <div style="overflow:auto; width:100%px; height:500px; padding:10px; border:1px solid #999999;">
<right><style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>

<script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recent-posts-with-thumb.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>

<script type="text/javascript" src="http://nama-blog-sobat.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right></div>

5. Sobat bisa merubah nilainya seperti menampilkan recent posts thubmnail atau tidak, summary, jumlah posting, tanggal, separator. Atur saja sesuai selera. Jangan lupa nama blognya yang berwarna merah juga diganti sesuai blog sobat.

Mudah kan cara membuat recent posts atau posting terbaru dengan thumbnail? Selamat mencoba :)

Title : Cara Membuat Recent Posts Blogger dengan Thumbnail
URL : http://blogedek.blogspot.com/2012/01/cara-membuat-recent-posts-thumbnail.html
Jangan lupa untuk membagikan artikel Cara Membuat Recent Posts Blogger dengan Thumbnail ini jika bermanfaat bagi sobat.