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
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://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 :)

0 comment | add comment

Post a Comment

Terima kasih sudah mampir di Blog Gedek. Jika sobat ingin memberikan komentar silahkan isi form kementar di bawah dengan sopan dan jangan spam.

Semua komentar akan dimoderasi dahulu. Mohon maaf jika membalasnya lama, jangan lupa mampir lagi ya :)