Cara Menciptakan Widget Recent Post (Postingan Terbaru) Mudah Dan Ringan Ala Blog Mastimon
Blogging Widget Postingan Terbaru Mastimon - , Pada artikel kali ini kita akan membahas bagaimana cara menciptakan widget recent post praktis dan ringan ala blog mastimon. Artikel ini ditulis atas seruan banyak blogger yang menanyakannya bagaimana cara menciptakan widget tersebut. Widget postingan terbaru yang digunakan di blog mastimon tersebut memang sangat praktis tanpa memakai gambar sehingga menciptakan loading blog sangat ringan ketika dimuat baik itu di dekstop maupun android.
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 praktis dan memiliki kecepatan loading yang sangat cepat. Termasuk widget yang digunakan di blog Viomagz ini juga sangat praktis 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 menciptakan widget recent post praktis ala blog mastimon tersebut? Nah disini fahrinheit akan membagikan caranya dan sanggup anda terapkan pada blog anda sendiri meskipun tidak memakai template Viomagz. Widget postingan terbaru ini juga sama persis dengan yang digunakan blog mastimon. Adapun cara membuatnya langkah-langkahnya yaitu :
1. Masuk ke akun blogger anda kemudian masuk ke hidangan 'Theme' dan pilih 'Edit HTML'
2. Selanjutnya cari arahan script /b:skin dengan memakai fitur pencarian (tekan tombol Ctrl + F). Jika sudah menemukannya silahkan tempelkan script berikut ini di bawah script /b:skin tadi :
3. Selanjutnya masuk ke dalam hidangan layout / tata letak dan tambahkan widget HTML, kemudian masukkan script di bawah ini :
4. Selanjutnya klik simpan. Selesai
Nah itulah tadi cara menciptakan widget postingan terbaru viomagz ala blog mastimon. Sangat gampang sekali bukan caranya? Anda pun sanggup menerapkannya sendiri pada template anda meskipun anda tidak memakai template viomagz sekalipun. Selain itu memakai widget ini juga sanggup meringankan kecepatan loading blog anda. Demikian artikel kali ini, supaya bermanfaat.
Baca Juga : 2 Cara Meringankan Loading Iklan Adsense
Lalu bagaimana cara menciptakan widget recent post praktis ala blog mastimon tersebut? Nah disini fahrinheit akan membagikan caranya dan sanggup anda terapkan pada blog anda sendiri meskipun tidak memakai template Viomagz. Widget postingan terbaru ini juga sama persis dengan yang digunakan blog mastimon. Adapun cara membuatnya langkah-langkahnya yaitu :
1. Masuk ke akun blogger anda kemudian masuk ke hidangan 'Theme' dan pilih 'Edit HTML'
2. Selanjutnya cari arahan script /b:skin dengan memakai 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";
}
/* 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 hidangan layout / tata letak dan tambahkan widget HTML, kemudian 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>
<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 menciptakan widget postingan terbaru viomagz ala blog mastimon. Sangat gampang sekali bukan caranya? Anda pun sanggup menerapkannya sendiri pada template anda meskipun anda tidak memakai template viomagz sekalipun. Selain itu memakai widget ini juga sanggup meringankan kecepatan loading blog anda. Demikian artikel kali ini, supaya bermanfaat.
