Cara Membuat Widget Recent Post Atau Postingan Terbaru Pada Template VioMaqz, Keren Dan Kece!

Mashabibi.com - Cara Membuat Widget Recent post atau postingan terbaru pada template Viomaqz,keren dan kece! - Salah satu cara untuk menjadikan visitor atau pengunjung blog anda tertarik dengan artikel lainnya dari blog anda ialah dengan menampilkan widget postingan populer atau postingan terbaru pada blog anda.

Widget postingan populer merupakan widget yang umumnya sudah disediakan oleh sang pemilik sebuah Template, Contohnya ialah widget postingan populer yang sudah disediakan oleh Mas Sugeng pada template Viomaqz, bisa dibilang Template ini sangat bagus digunakan oleh blogger yang menggunakan blogspot.

To the points, yang akan saya sampaikan di artikel kali ini ialah bagaimana cara membuat widget recent post atau postingan terbaru pada template Viomaqz, bisa di lihat pada blognya saya sendiri, widget postingan populer yang sudah tersedia saya ganti dengan widget postingan terbaru yang saya tak tahu jelas mana sumbernya, tapi yang penting widget postingan terbaru tersebut sangatlah minimalis dan responsif serta keren dan kece.

Karena itulah menarik hati saya untuk mengubah widget postingan populer di blog saya menjadi widget recent post atau postingan terbaru agar blog saya tampil keren dan kece.

Tak cukup disitu, pasti ada temen-temen blogger lainnya yang ingin tahu caranya membuat widget recent post atau postingan terbaru pada template Viomaqz, nahh, pada artikel kali ini, saya akan menjelaskan bagaimana cara membuat widget recent post atau postingan terbaru pada template Viomaqz.

Cara Membuat Widget Recent Post Atau Postingan Terbaru Pada Template Viomaqz

Sebelum menuju ke langkah-langkah pemasangan nya, sebenarnya template viomaqz sudah dilengkapi dengan widget postingan populer, untuk mengganti menjadi widget postingan terbaru seperti blog Mastimon, langsung saja anda hapus widget postingan populer nya, caranya gampang, klik Tata Letak >> Postingan Populer>> Hapus >> Simpan Perubahan.

Setelah itu, kita lanjut ke pemasangan widget recent post atau postingan terbaru pada template Viomaqz, berikut langkah-langkahnya yang harus anda perhatikan.

Langkah 1 :

Masuk ke menu Tema >> Edit html, klik Ctrl+f kemudian cari kode "Blogger CSS", setelah itu letakkan kode CSS di bawah ini tepat dibawah kode CSS tersebut, berikut kode CSS nya, setelah anda meletakkan nya, jangan lupa klik simpan perubahan.

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

}

Langkah 2 :

Masuk ke menu Tata letak, klik tambahkan Gadget di menu widget sidebar, kemudian klik tambahkan html/javascript.
Klik tambahkan gadget kemudian tambahkan html/javascript.
Kemudian tuliskan pada kolom judul "Postingan Terbaru" setelah itu letakkan kode Script di bawah ini di kolom konten javascript yang telah disediakan di bawah kolom judul.

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

Setelah itu klik simpan, apabila widget recent post atau postingan terbaru terletak di atas label, anda cukup menghapus widget label dan menambah kan nya kembali dengan cara klik tambahkan gadget >> Label, kemudian sesuai kan dengan keinginan anda, widget label dengan otomatis terletak di atas widget recent post atau postingan terbaru.

Bagaimana?, Cukup mudah kan membuat widget recent post atau postingan terbaru pada template Viomaqz, semoga artikel diatas dapat membantu Anda membuat blog anda lebih keren dan tampil unik, semoga bermanfaat, Assalamualaikum.wr.wb