Cara membuat recent post seperti mastimon

Daftar Isi

Recent posts atau postingan terbaru seperti mastimon memang menarik dan cukup elegan. Sehingga tak jarang banyak sekali para blogger yang menggunakan recent posts ala mastimon digunakan didalam blognya.

Meskipun begitu, ternyata ada juga Bloggers yang kesulitan dalam memasang recent posts seperti mastimon. Penyebabnya biasa terjadi karena Template yang digunakan tidak support dengan kode yang dipasang. Sehingga tampilan recent posts tidak muncul di homepage atau halaman blog.

Template yang digunakan oleh mastimon sama dengan Bloggers lainnya ialah VioMagz v.3.2.0 yang telah diedit oleh mastimon. Jadi, jika sobat menggunakan template VioMagz maka akan bisa menggunakan recent posts seperti mastimon.

Postingan ini saya buat untuk sobat blogger yang ingin membuat tampilan blognya menjadi lebih keren. sehingga membuat pengunjung terkesan lebih nyaman.

Memang recent post ala mastimon ini cukup dibilang sederhana, tapi siapa sangka banyak dari kalangan blogger yang menggunakan tampilan recent post ala mastimon ini.

Baca juga : cara membuat sitemap keren di blog

Sudah banyak blog yang membahas tutorial ini. selain sederhana dan mudah, mereka juga bisa mendapatkan backlink gratis dari mastimon sehingga dapat meningkatkan trafik blog.

untuk sobat yang sedang membaca Tulisan ini dan ingin membuat recent post atau postingan terbaru ala  mastimon, silahkan ikuti langkah-langkah dibawah ini. yuk simak sob.

Membuat postingan terbaru ala mastimon

langkah pertama

Silahkan sobat login ke dasbor blogger > lalu pilih tema > edit HTML 

kemudian copas kode CSS dibawah 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";
}

letakkan kode tersebut dibawah kode Blogger CSS 

gunakan Ctrl+f untuk memudahkan pencarian lalu isi Blogger CSS di kolom pencarian.

lihat gambar dibawah

Jagan lupa disimpan

jika sudah selesai  postingan terbaru belum bisa tampil di homepage, Karena sobat baru saja menyelesaikan langkah pertama. untuk selanjutnya yuk simak dibawah

Baca juga : cara membuat about me keren di blog

langkah kedua

agar bisa menampilkan postingan terbaru sobat membutuhkan kode CSS yang harus diletakkan didalam widget HTML/javascript

cara bagaimana ?

langsung aja sobat copas kode 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>

Nb : angka yang berwarna merah adalah jumlah Artikel yang akan di tampilkan.
silahkan ganti sesuai keinginan sobat.

Selanjutnya sobat masuk dasbor blogger > tata letak >  tambah widget > pilih HTML/JavaScript 

Kemudian ikuti gambar dibawah

kemudian isi judul dengan nama Postingan Terbaru > lalu paste kode tersebut didalam kolom yang sudah di sediakan

terakhir simpan

selamat recent posts keren sobat sudah jadi. silahkan sobat lihat tampilan blog untuk melihat hasilnya

Cukup sampai disini pembahasan mengenai cara membuat recent post ala mastimon. selamat mencoba dan semoga sukses.
Baca juga : cara jitu membuat blog yang SEO