Subscribe:

Ads 468x60px

Cara Membuat Recent Posts Blogger dengan Thumbnail

Recent posts atau posting terbaru adalah salaah widget atau fitur dalam sebuah blog yaang sangat penitng. Saama dengan membuat related posts, juga navigasi breadcrumbs, widget ini bisa berfungsi untuk membuaat pengunjung blog kita semakin betah.



Memang sudah ada widget recent posts bawaan dari blogger tapi sepertinya kuraang menarik, dengan menambaahkan beberapa fitur pada recent posts seperti thumbnail, komentar, dan summary bisa membuaat pengunjung blog sobat tertarik untuk membaaca artikel atau postingan terbaaru tersebut. Yaudah langsung saja deh ke topik


membuat recent posts thumbnail


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://blogndroy-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 nilaainya seperti menampilkan recent posts thubmnail ataau tidak, summary, jumlaah posting, tanggal, separator. Atur saja sesuai selera. Jangaan lupa nama blognya yang berwaarna merah juga diganti sesuai blog sobat.