Cara Membuat Recent Post Responsive di Template Viomagz

Membuat recent post atau postingan terbaru di blogger tentu bukanlah sesuatu yang baru. Namun perlu diketahui bahwa selain membuat blog menjadi keren recent post juga bisa mendatangkan banyak trafic loh.

Jika pengunjung kamu mengklik salah satu artikel di recent post atau postingan baru yang kamu buat, otomatis pengunjung tersebut sudah menjadi satu pengunjung di website atau blog kamu. Bayangkan saja jika perhari 1000 klik?

Dalam pembuatan recent post ini, diperlukan sebuah kode atau script pemrogaman. Tapi kamu tidak perlu khawatir, karena di artikel ini kamu akan disiapkan sebuah script atau kode yang tentunya kamu tinggal copy paste aja.

Cara Membuat Recent Post Responsive di Template Viomagz

Untuk kamu yang memakai tema Viomagz versi old atau versi 2.4 sampai 3.2 kamu bisa menggunakan cara berikut ini. Namun ini tidak hanya untuk tema viomagz aja, ini berlaku untuk semua tema blog.

• Langkah pertama, masuk ke blogger.com kemudian pilih Tema kemudian Edit

• Langkah kedua, cari kode css di bawah ini

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

• Kemudian ganti code di atas dengan kode di bawah ini kemudian simpan.

 /* 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 keempat, pilih Tata letak >> tambah gadget di widget sidebar >> Html/Javascript, paste kode dibawah ini di konten kemudian beri judul postingan terbaru/recent post.

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

• Langkah Terakhir, simpan dan lihat hasilnya.

• Langkah pertama, Masuk ke blogger.com kemudian pilih Tema >> Edit

• Langkah kedua, Cari kode di bawah ini

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