Blog tutorial linux dan windows, Website SEO, Jaringan LAN, Pemrograman Dasar.

Cara Membuat Menu Recent Posts Pada Blogger

Cara Membuat Menu Recent Posts Pada Blogger

Diposting Oleh sopian Jumat, 28 Oktober 2011 0 komentar
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:220px; display: block; }

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

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

 .recentposts li{list-style: square;margin: 0;font-size:12px;padding: 0px 1px 0px 3px;}

 

</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://emensite.blogspot.com/feeds/posts/default?max-results=7&alt=json-in-script&callback=listEvents">

</script>

<ul></ul>

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

Ok selamat mencoba


Terima Kasih Atas Kunjungan Anda
Judul : Cara Membuat Menu Recent Posts Pada Blogger
Ditulis/Disusun Oleh : sopian
Tulisan Cara Membuat Menu Recent Posts Pada Blogger pada Blog Tutorial Komputer ini memang di bawah DCMA Protected. Tapi Bebas kok di COPAS dan di posting Ulang asalkan link sumbernya tetap disertakan.

Tidak ada komentar:

Posting Komentar