Cara Membuat Menu Recent Posts Pada Blogger

Bagi temen-temen yang masih baru mualai membuat blog berikut ada tutorial menarik yakni cara menampilkan tulisan-tulisan terakhir pada widget blogger sobat. Memang blogger sudah memberikan dafault widget recent post yang bisa kita pasang, akan tetapi terkadang tidak sesuai dengan keinginan kita, mungkin font yang terlalu besar atau warna tidak sesuai dan untuk mengeditnya kita harus bongkar-bongkar kode template yang kita gunakan.

Berikut ini ada cara mudah yang bisa digunakan, seperti biasa buka menu Design, klik add Gadget dan tambahkah html/JavaScript. Untul posisi sesuaikan dengan selera sobat kemudian copy pastekan code di bawah ini.

<style>

.recentposts{ padding: 1px; border: 1px solid #000; border-width: 0px;width:170px; display: block; }

 .recentposts a { border: 1px solid #fff;display: block; text-decoration: none; padding: 3px 1px 3px 3px; color: ##0000CC; font-size: 12px;width:170px; }

 .recentposts ul {width:170px;list-style-type:square;float: left;}



</style>

<div class ="recentposts" id="latestposts"></div>

<script>

  function listEvents(root) {

    var feed = root.feed;

    var entries = feed.entry || [];

    var html = ['<ul>'];

    for (var i = 0; i < entries.length; ++i) {

      var entry = entries[i];

    var posturl;

   for (var k = 0; k < entry.link.length; k++) {

   if (entry.link[k].rel == 'alternate') {

    posturl = entry.link[k].href;

    break;

    }

  }

  var title = entry.title.$t;

  title = "<a href="+posturl+">"+title+"</a>"

        var start = (entry['gd$when']) ? entry['gd$when'][0].startTime : "";

        html.push('<li>', start, ' ', title, '</li>');

    }

    html.push('</ul>');

    document.getElementById("latestposts").innerHTML = html.join("");

  }

</script>

<script src="http://efri-hrf.blogspot.com/feeds/posts/default?max-results=7&alt=json-in-script&callback=listEvents">

</script>

<ul></ul>

Hasilnya bisa sobat lihat pada menu sidebar di blog ini. Alamat blog sesuaikan dengan nama blog sobat. Warna Font dan border list juga bisa diedit sesuai dengan kebutuhan.