Cara Menciptakan Recent Post Keren Menyerupai Blog Mastimon

- Cara Membuat Recent Post Keren Seperti Blog Mastimon. Widget recent post merupakan widget yang ada pada blog fungsinya untuk menampilkan postingan artikel terbaru pada blog.

Cara Membuat Recent Post Keren Seperti Blog Mastimon Cara Membuat Recent Post Keren Seperti Blog Mastimon

Sumber : mastimon.com

Widget recent post biasanya di pasang pada bab kanan atau pada sidebar blog, tapi tidak menjadi suatu keharusan sih pada sisi kanan semua tergantung impian sobat. alasannya tampilan ini menciptakan pengunjung blog atau visitor di blog teman sanggup mengetahui postingan terbaru, dan artikel yang gres dipublikasipun sanggup eksklusif di baca

NOTE : Jangan terlalu memasang widget di blog alasannya akan mengurangi kecepatan loading blog

Kali ini admin coba menawarkan sedikit tutorial singkat tentang Cara Membuat Recent Post Keren Seperti Blog Mastimon.

Kebanyakan para blogger pingin mengikuti jejak kesuksesan dari mas timon dan cara dan tips ngeblog dari mastimon.

Tidak lupUt pula cara design template dari Mastimon.com semuanya pingin di ikuti.

cara menampilkan recent post menyerupai mastimon

#1. Sobat login dulu ke blogger.com

#2. Setelah itu teman eksklusif ke dashboard blog klik hidangan " Tema" kemudian klik hidangan "Edit HTML".

#3. Copy semua arahan CSS dibawah ini dan pastekan di dalam arahan CSS lain di letakan dalam edit HTML.

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

#4. Sobat cari arahan Blogger CSS didalam kotak edit HTML dengan cara copy tulisan Blogger CSS setelah itu tekan tombol keyboard laptop secara bersamaan (Ctrl + f) maka akan muncul tinggal teman pastekan semua arahan diatas tadi, sesudah itu klik " Simpan "

#5. Sobat kembali lagi ke hidangan dashboard blog, kemudian klik hidangan " Tata Letak " ⟹ Tambahkan Gadget.

#6. Setelah itu cari" HTML / JavaScript " dan klik tanda +

#7. Pada kolom judul teman tulis ajha " Artikel Terbaru " dan sesudah itu teman masukan arahan HTML pada kotak dibawahnya. klik Simpan.

<div class='artikel-terbaru'>
<script>
functionartikelterbaru(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>
<scriptsrc="/feeds/posts/summary/?max-results=10&alt=json-in-script&callback=artikelterbaru"></script>
</div>

Lihat gambar

Gampangkan...mungkin hingga disini dulu tutorial singkat Cara Menampilkan Recent Post Keren Seperti Blog Mastimon.

Mungkin akan lebih praktis dan praktis kalau teman memakai template Viomagz buatan mas sugeng