Cara Membuat Widget Recent Post (Postingan Terbaru) Simpel dan Ringan Ala Blog Mastimon

Cara Membuat Widget Recent Post (Postingan Terbaru) Simpel dan Ringan Ala Blog Mastimon

Widget Postingan Terbaru Mastimon - Fahrinheit, Pada artikel kali ini kita akan membahas bagaimana cara membuat widget recent post simpel dan ringan ala blog mastimon. Artikel ini ditulis atas permintaan banyak blogger yang menanyakannya bagaimana cara membuat widget tersebut. Widget postingan terbaru yang dipakai di blog mastimon tersebut memang sangat simpel tanpa menggunakan gambar sehingga membuat loading blog sangat ringan saat dimuat baik itu di dekstop maupun android.

Widget-postingan-terbaru-viomagz-mastimon
Sebenarnya widget recent post (postingan terbaru) yang digunakan di blog mastimon tersebut merupakan widget bawaan dari template yang digunakannya. Ya, blog mastimon memang diketahui baru-baru ini mengganti template premium miliknya dari sebelumnya Kompi Flexible dari Kompi Ajaib menjadi Viomagz dari Mas Sugeng. Template Viomagz ini memang diketahui sangat simpel dan mempunyai kecepatan loading yang sangat cepat. Termasuk widget yang dipakai di blog Viomagz ini juga sangat simpel sehingga kecepatan loadingnya pun tidak perlu diragukan lagi meskipun sudah mengalami beberapa kali update.

Baca Juga : 2 Cara Meringankan Loading Iklan Adsense

Lalu bagaimana cara membuat widget recent post simpel ala blog mastimon tersebut? Nah disini fahrinheit akan membagikan caranya dan dapat anda terapkan pada blog anda sendiri meskipun tidak menggunakan template Viomagz. Widget postingan terbaru ini juga sama persis dengan yang digunakan blog mastimon. Adapun cara membuatnya langkah-langkahnya adalah :

1. Masuk ke akun blogger anda lalu masuk ke menu 'Theme' dan pilih 'Edit HTML'

2. Selanjutnya cari kode script /b:skin dengan menggunakan fitur pencarian (tekan tombol Ctrl + F). Jika sudah menemukannya silahkan tempelkan script berikut ini di bawah script /b:skin tadi :
<style type='text/css'>
/* 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";
}

3. Selanjutnya masuk ke dalam menu layout / tata letak dan tambahkan widget HTML, lalu masukkan script 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>

4. Selanjutnya klik simpan. Selesai

Nah itulah tadi cara membuat widget postingan terbaru viomagz ala blog mastimon. Sangat mudah sekali bukan caranya? Anda pun dapat menerapkannya sendiri pada template anda meskipun anda tidak menggunakan template viomagz sekalipun. Selain itu menggunakan widget ini juga dapat meringankan kecepatan loading blog anda. Demikian artikel kali ini, semoga bermanfaat.
Fahrinheit
Fahrinheit

"Blogger Paruh Waktu, Pemimpi Pengangguran Sukses."

Buka Komentar
Blogger
Disqus
Pilih Sistem Komentar

No comments