Cara membuat widget recent post responsive pada blog

Ya sekarang saya akan membagikan tutorial cara membuat postingan terbaru/recent post keren pada blogspot. Jika kalian menggunakan recent post yang jelek maka pembaca pada blog kalian akan merasa tidak betah di blog kalian. Kali ini saya akan membagikan tutorial cara membuat recent post keren pada blogger.

Baca juga: cara transfer saldo OVO ke rekening bank terbaru 2019

Recent post adalah widget berupa tampilan dari postingan terbaru dari blog kalian. Lihat tampilan recent post nya dibawah ini.

Gambar. recent post

Gimana? Keren bukan, agar menambah penonton blog kalian betah melihat nya. Recent post ini merupakan recent post dari template VioMagz dari mas Sugeng. Disini saya akan memberikan kode CSS pada blog untuk artikel terbaru dan akan membagikan HTML nya untuk ditempelkan di tataletak.

Saya mendapatkan kode CSS nya pada blog mastimon.com dan kali ini saya juga akan membagikan tutorial nya. Simak saja tutorial nya dibawah ini, caranya sangat mudah sekali kalian hanya menempelkan kode CSS nya pada HTML di blog kalian. Dan menempelkan kode HTML pada tataletak di blog kalian.

Cara membuat widget recent post pada blogspot dengan mudah

1.  Kalian masuk pada dashboard blog kalian, lalu masuk ke TEMA, lalu kalian klik Edit HTML, lalu kalian cari kode blogger CSS dengan menekan ctrl+f pada keyboard, lalu kalian letakkan kode dibawah ini setelah postbody, lihat contoh gambar dibawah.

gambar. Penempelan kode

Lalu kalian salin dan tempel kode dibawah ini seperti gambar diatas.

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

}

2. Lalu kalian masuk lagi ke dashboard kalian di blog, lalu kalian menuju ke tataletak. Lalu klik tambah gadget (lihat gambar dibawah ini).

3. Lalu kalian klik HTML/JavaScript, lalu kalian klik tanda plus/tambahkan, lihat gambar dibawah ini.

4. Lalu kalian masukkan kode dibawah ini ke kolom konten di tataletak, lalu pastekan kode nya, terus kalian kasih judul recent post atau postingan terbaru.

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

5. Setelah kalian pastekan kode nya kalian tinggal klik simpan, selesai.


Nah itu adalah tutorial cara membuat widget recent post pada blog dengan mudah, proses nya mudah bukan? Kalian bisa coba pada blog kalian.

Baca juga: cara membuat akun OVO gratis terbaru 2019

Terimakasih sudah membaca artikel dari saya semoga artikel yang kalian baca dapat bermanfaat buat kita semua, apabila ada yang ditanyakan silahkan komen saja dibawah. Biar kita sharing-sharing tentang apa yang kita tahu, apabila ada kata atau bahasa yang salah tulis mohon dimaafkan.

Terimakasih sampai jumpa di artikel selanjutnya.

Belajar Online

Perkenalkan nama saya Muhammad Lutfin, asal dari Majalengka, Jawa Barat. Hobi saya adalah menulis blog dan maen game. Terimakasih

Share this post