Sunday, April 8, 2012

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.

No comments:

Post a Comment