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

Bintan News - Cara membuat widget Postingan Terbaru juga biasa kita kenal dengan istilah Recent Post pada sebuah Blog diperlukan supaya pengunjung gampang bisa melihat postingan terbaru blog anda. Terdapat banyak sekali script Widget yang dapat anda gunakan, mulai dari format hanya tulisan saja sampai dengan menggunakan thumbail gambar. Dengan menggunakan fitur ini maka pengunjung akan betah berlama lama untuk membaca tulisan kita.

Script beriktu merupakan Widget milik Template VioMagz 3.3.0 miliknya Mas Sugeng. Sementara pada versi sebelumnya, widget ini hanya menampilkan tulisan tetapi tidak ada batasan garis dan icon pensil pada depan judul artikel. Display Postingan Terbaru (Recent Post) ini saya ambil dari template versi terbaru mulai 2.4 sampai saat ini sudah versi 4.6.0. Ada banyak blogger yang bertanya ke saya bagaimana sih cara membuat wiget tersebut Pak?

Saat ini, kami bukan membuatkan untuk anda, namun kami hanya ambilkan Kode CSSnya dan kode HTML untuk menampilkan Postingan terbaru tersebut. Langkahnya cukup mudah dan tidak menambah beban berat pagespeed Blog anda. Selain itu, tampilan dari recent post ini juga cukup unik dan menarik walaupun sekilas terlihat sederhana karena tidak menggunakan Gambar.

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

Langkah pertama : Silahkan anda masuk ke Dashboard Blogger anda, lalu pilih Tema >> Edit HTML >> Kemudian silahkan letakkan kode CSS dibawah ini tepat dimana Kode CSS lainnya diletakkan. Cari saja Kode "Blogger CSS" dengan menggunakan CTRL + F dan letakkan kode dibawah ini tepat dibawah CSS Tersebut. Jangan anda lupa untuk 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";
}

Silahkan Lihat Gambar berikut ini :

Langkah kedua  : Berikutnya adalah silahkan masuk ke Tata Letak >> Tambahkan Ganget

Tutorial cara membuat widget Recent Post (Postingan Terbaru) di Blog yang Unik bisa anda terapkan Viomagz 4.3.0 Keatas. Karena sudah saya terapkan pada template viomagz terbaru.

Langkah ketiga  : Anda klik pada tanda + pada pilihan HTML/JavaScript

 

Langkah empat : Isikan tuliskan pada kolom judul dengan kata "Artikel Terbaru" dan kemudian pastekan Kode HTML pada kolom dibawahnya. Jangan lupa 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>

Pengguna template Viomagz 4.6.0

Untuk template Viomagz 4.6.0 juga bisa diterapkan widget Recent Post (Postingan Terbaru) ini. Namun, ada bagian script yang perlu anda buang. Silahkan cari kode : $(label.border.color), setelah ketemu, HAPUS kode ini. Ingat, jangan hapus ; (titik komanya).

JANGAN LUPA TAMBAH SCRIPT FONT AWESOME ini tepat ditas </Body>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Catatan : Silahkan cek terlebih dahulu, jika font ini belum ada, silahkan tambahkan. Namun, apabila sudah ada terpasang script diatas, artinya sudah ada didalam template. Anda tidak perlu menambahkan script ini.

Sangat mudah bukan? Cara membuat Recent Post atau widget Postingan Terbaru di Blog mirip dengan tampilan milik Template VioMagz V2.8. Jika anda masih kebinggungan untuk menerapkannya, anda bisa melihatnya melalui Tutorial yang kami upload di Youtube. Selamat berkreasi dan semoga berhasil. 

Video Youtube Cara membuat Recent Post unik hanya Tulisan