Cara Membuat Widget Recent Post Simple di Blogger

Selamat datang di repick.net, disini saya akan membagikan Cara Membuat Widget Recent Post (Postingan Terbaru) yang Simple tapi keren di Blogger. Seperti yang kita ketahui, widget ini sangat populer di kalangan blogger tidak terkecuali blog besar seperti masti*on.

Sebelum masuk ke tutorial, baca juga artikel menarik dari repick "cara membuat syntax highlighter dengan css".

Cara Membuat Recent Post Simple dan Keren

Nah  kali ini saya akan membagikan recent post yang sangat simple tanpa adanya thumbnial, jadi sangat bagus untuk anda yang menyukai sesuatu yang minimalis.

• Pertama masuk ke dashboard blogger anda.
• Pilih Tema, kemudian edit HTML
• Cari kode ]]</b:skin> atau </style>, letakkan CSS di bawah ini tepat diatas kode tersebut.

 /* Artikel Terbaru */

.artikel-terbaru ul li {

    border-bottom: 2px dotted $(label.border.color);

    padding-bottom: 8px;

    margin-bottom: 8px;

    font-weight: 500;

}

.list-label-widget-content ul li, .LinkList ul li, .PageList ul li {

    border-bottom: 2px dotted $(label.border.color);

    padding-bottom: 5px;

}

.artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before {

    content: "\f14b";

    font-family: FontAwesome;

    font-style: normal;

    font-weight: normal;

    text-decoration: inherit;

    margin-right: 6px;

}

.artikel-terbaru ul li:before {

    content: "\f14b";

}

.list-label-widget-content ul li:before {

    content: "\f07b";

}

.LinkList ul li:before {

    content: "\f14c";

}

.PageList ul li:before {

    content: "\f249";

}

• Jika sudah, silahkan save tema.
• Untuk Menggunakan widget postingan terbaru ini, anda harus beralih ke tata letak.
• Pilih HTML/Javascript.
• Masukkan kode di bawah ini.

<div class='artikel-terbaru'>

<script>

function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}

</script>

<script src="/feeds/posts/summary/?max-results=10&alt=json-in-script&callback=artikelterbaru"></script>

</div>

• Kemudian klik simpan.

Dengan melakukan cara tersebut, anda sudah berhasil membuat widget recent post atau postingan terbaru yang simple dan keren.

www.repick.net