Cara Buat Widget Recent Postal Service (Postingan Terbaru) Di Weblog Yang Unik

bayukusuma.com - Widget Postingan Terbaru atau biasa kita kenal sengan sebutan Recent Post pada sebuah Blog diperlukan supaya pengunjung mudah melihat yang baru. Banyak sekali Widget yang dapat kita gunakan mulai dari hanya tulisan saja sampai dengan menggunakan thumbail gambar. Dengan fitur ini maka pengunjung akan betah berlama lama untuk membaca tulisan kita.

Ini merupakan Widget milik Template VioMagz milik Mas Sugeng. Jika versi sebelumnya hanya menampilkan tulisan tenamun tak ada batasan garis dan paradigm pensil pada kepan kalimatnya. Tampilan Recent Post ini admin lihat pada versi terbaru mulai 2.4 sampai saat ini sudah versi 3.1. Banyak yang menanyakan ke admin bagaimana sih cara menciptakan wiget tersebut mas ?

Disini admin bukan menciptakankan untuk anda tenamun admin ambilkan Kode CSSnya dan kode HTML untuk menampilkan Postingan terbaru tersebut. Caranya cukup mudah dan tak menambah beban berat pagespeed Blog. Tampilannya cukup unik dan menarik walaupun sekilas terlihat simpel sebab tak menggunakan Gambar. Baca Juga : Widget Recent Post dengan Tab Next dan Gambar.

Cara buat widget Recent Post (Postingan Terbaru) di Blog yang Unik

Langkah i : Silahkan sobat semua masuk ke Daskboard Blogger sobat semua lalu pilih Tema >> Edit HTML >> 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";
}

Lihat Gambar berikut ini :

Langkah two : Selanjutnya masuk ke Tata Letak >> Tambahkan Ganget

Langkah iii : Klik tanda + pada pilihan HTML/JavaScript

 

Langkah iv : Tuliskan pada kolom judul "Artikel Terbaru" dan masukkan Kode HTML pada konten dibawahnya. Terakhir klik Simpan. 

<div class='artikel-terbaru'>

<script>
purpose 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 buka cara menciptakan Recent Post atau widget Postingan Terbaru di Blog sama seperti tampilan milik Template VioMagz. Jika sobat semua masih kebinggungan dapat melihatnya melalui Tutorial yang admin upload di Youtube. Selamat mencoba dan semoga berhasil. Baca Juga : Widget Postingan Terbaru dengan thumbail kecil dan cantik.

Vidio Youtube Cara buat Recent Post unik hanya Tulisan

Share this post