Cara Membuat Recent Post Keren Seperti Blog Mastimon

Blog kami -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.

recent post
Sumber : mastimon.com
Widget  recent post biasanya di pasang pada bagian kanan atau pada sidebar blog, tapi tidak menjadi  suatu keharusan sih pada sisi kanan semua tergantung keinginan sobat. karena tampilan ini membuat pengunjung blog atau visitor di blog sobat bisa mengetahui postingan terbaru, dan artikel yang baru dipublikasipun dapat langsung di baca

NOTE : Jangan terlalu memasang widget pada blog karena akan mengurangi kecepatan loading blog

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

Kebanyakan para blogger pingin mengikuti jejak kesuksesan berdasarkan mas timon & cara & tips ngeblog menurut mastimon.

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

Cara menampilkan recent post misalnya mastimon

#1. Sobat login dulu ke blogger.com

#2. Setelah itu sobat langsung ke dashboard blog klik menu " Tema" kemudian klik menu "Edit HTML".

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

/* Artikel Terbaru */

.Artikel-modern 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: "f249danquot;;

#4. Sobat cari kode 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 sobat pastekan semua kode diatas tadi, setelah itu klik " Simpan "

Blogger CSS

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

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

#7. Pada kolom judul sobat tulis ajha " Artikel Terbaru " dan setelah itu sobat masukan kode 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 sampai disini dulu tutorial singkat Cara Menampilkan Recent Post Keren Seperti Blog Mastimon.

Mungkin akan lebih mudah dan gampang jika sobat menggunakan template Viomagz buatan mas sugeng

No comments