√ Cara Buat Widget Recent Post (Postingan Terbaru) Di Blog seperti Mastimon - Satriaryan22

Cara Buat Widget Recent Post (Postingan Terbaru) Di Blog seperti Mastimon

SATRIARYAN22.COM - Widget Postingan Terbaru atau biasa kita kenal sengan sebutan Recent Post pada sebuah Blog Atau Website sangat diperlukan supaya para pengunjung mudah melihat artikel yang terbaru. Banyak sekali Widget yang bisa kita gunakan mulai dari hanya tulisan saja bahkan sampai dengan yang menggunakan thumbail gambar. Dengan fitur tersebut maka para pengunjung akan betah berlama lama untuk membaca artikel kita.

Hasil gambar untuk postingan Terbaru

Disini saya menggunakan Template VioMagz milik Mas Sugeng. Jika pada versi sebelumnya yang hanya menampilkan tulisan saja tetapi tidak ada batasan yaitu antara garis dan icon pensil pada kepan kalimatnya. Tampilan Recent Post atau postingan terbaru ini saya lihat pada versi terbaru mulai dari versi 2.4 sampai saat ini sudah versi 3.2. Ada teman saya yang menanyakan ke saya bagaimana cara membuat widget postingan terbaru seperti blog punya mas?

Disini saya bukan membuatkan untuk kalian tetapi saya ambilkan sebuah Kode CSS dan kode HTML yang fungsi nya untuk menampilkan Postingan terbaru tersebut. Caranya cukup mudah dan tidak akan menambah beban berat pagespeed Blog kalian. 

Tampilan nya pun cukup unik dan menarik walaupun sekilas terlihat sederhana di karenakan tidak menggunakan Gambar.

Cara buat widget Recent Post (Postingan Terbaru) di Blog


Langkah-langkahnya :

1. Silahkan kalian masuk ke Dashboard Blogger kalian lalu pilih Tema >> Edit HTML >> dan Letakkan kode CSS dibawah ini tepat dimana Kode CSS lainnya diletakkan. Cari saja Kode "Blogger CSS" dan letakkan kode dibawah ini tepat dibawah CSS Tersebut. Jangan lupa Save.

/* 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";
}

2. Selanjutnya kalian masuk ke Tata Letak >> Tambahkan Gadget

3. Kalian Klik tanda + pada pilihan HTML/JavaScript

4. Lalu kalian Tuliskan pada kolom judul "Postingan Terbaru" dan masukkan Kode HTML pada konten dibawahnya. Terakhir klik Simpan.

<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>

Cukup mudah bukan cara membuat Recent Post atau widget Postingan Terbaru di Blog sama seperti tampilan Template VioMagz milik mas Sugeng.
Buka Komentar
Tutup Komentar

2 Responses to "Cara Buat Widget Recent Post (Postingan Terbaru) Di Blog seperti Mastimon "

  1. Ternyata mudah cara membuat postingan Terbaru seperti punya mastimon. Udah lama saya ingin membuatnya namun blm ketemu yg cocok atau sama persis. Baru ini artikel ini yang sangat cocok dan persis seperti mastimon

    Terima Kasih banyak gan :)

    ReplyDelete
    Replies
    1. Sama-sama gan, terima kasih juga sudah berkunjung :)

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel