Widget HTML Atas

Cara Membuat Postingan Terbaru (Recent Posts) Pada Blogspot

Postingan Terbaru atau biasa yang kita sebut Recent Posts adalah salah satu yang harus kita gunakan pada blog kita. Tujuannya agar pengunjung dapat mengetahui yang post artikel terbaru kita.

Dengan membuat Recent Posts dapat membuat gairah pengunjung untuk membaca post artikel baru kita. Ini adalah satu tujuan pembuatan Recent Posts.

Dalam membuat Recent Posts, biasanya akan lebih gampang jika menggunakan komputer. Tapi, tidak menutup kemungkinan menggunakan smartphone tidak bisa. 

Disini, saya akan membuat tutorial pembuatan Recent Posts pada smartphone. Untuk langsung saja pada pembahasan nya:

Baca juga: Cara membuat blog terbaru untuk pemula 2020.

Langkah pertama

Anda Login pada Blogger, lalu ketik menu Tema. 

Disitu kalian bisa masuk ke menu Edit HTML lalu cari "Blogger CSS Reset".

Jika sudah, salin kode dibawah ini lalu tempel di bawah Blogger CSS Reset.

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

}

Cara Membuat Postingan Terbaru (Recent Posts) Blogspot Pada Smartphone

Tempel kode yang sudah disalin tadi seperti foto yang diatas. Tempel dengan benar dan rapihkan.

Jika sudah ditempel dan dirapihkan, anda dapat simpan kode tadi lalu anda masuk ke totorial langkah ke dua.

Baca juga: Cara membuat recent post dengan thumbnail gambar menarik.

Langkah kedua

Silahkan anda copy kode dibawah secara lengkap agar tidak terjadi kesalahan.
<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>
Setelah itu, silahkan anda masuk pada menu tata letak dan klik tambahkan widget. 

Cara Membuat Postingan Terbaru (Recent Posts) Pada Blogspot

Jika sudah, pilih HTML/JavaScript lalu klik tombol tambahkan berwarna biru seperti foto di bawah.

Cara Membuat Postingan Terbaru (Recent Posts) Pada Blogspot

Lalu, tempelkan kode yang sudah di copy tadi di dasboard HTML/JavaScript. Anda tinggal memasukan nya saja ke HTML.


Setelah itu, klik simpan lalu anda cek pada tampilan blog anda apakan sudah berubah atau belum.

Cara Membuat Postingan Terbaru (Recent Posts) Pada Blogspot

Kode diatas diberikan untuk pengguna blogger blogspot. Jika untuk WordPress itu kode yang diberikan berbeda lagi.

Perlu diingat, pada penempelan kode pertama pada edit html. Anda tempelkan dengan benar agar tidak mempengaruhi template dan tampilan blog.

Berlangganan via Email