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.
Recent post adalah widget berupa tampilan dari postingan terbaru dari blog kalian. Lihat tampilan recent post nya dibawah ini.
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.
This comment has been removed by a blog administrator.
ReplyDeleteOkh makasih atas saran nya
Deleteartikelnya bagus gan saya sempat kebingungan dalam membuat widget recent post, disini saya nemu jalannya ijin copas source gan
ReplyDeleteOkh silahkan
DeleteThis comment has been removed by a blog administrator.
ReplyDeleteMakasih mas artikelnya, oh ia mau tanya kalau recent post tersebut valid di template AMP atau nggak ya Mas? Lagi cari-cari bingung juga soalnya kebanyakan yg pake recent post amp simpan CDNnya di rawgit, sedangkan rawgit katanya mau ditutup akhir tahun ini...
ReplyDeletewah akhirnya ketemu juga, makasih ya mas ijin sedot dulu nih hehe
ReplyDeleteScript nya bisa di download dimana gan?
ReplyDeleteVisit my blog Exbisnis
ReplyDeletenice bro thanks
ReplyDeletehttps://www.totalstation.co.id
ini dia yang gua cari mas,, terimakasih
ReplyDeletesudah ketemu..terimakasih kawan
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteSitus slot online bolacasino88 joker123 terpercaya dan terbaik sebagai slot gacor yang memberikan bonus 100% di depan tanpa ribet.
ReplyDeleteVisit my blog about Indonesian Food
ReplyDeleteSitus judi slot online terbaik dan terpercaya yang ada di Indonesia Jantan69 sudah terbukti membayarkan kemenangan berapapun yang didapatkan!
ReplyDeleteCuci Sofa Jogja
ReplyDeleteCuci Sofa Jogja
Cuci Sofa Jogja
Cuci Sofa Jogja
Cuci Sofa Jogja
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeletemantap artikelnya......jos markotop
ReplyDeleteJABSDESIGNTIPS
JABSDESIGNTIPS
JABSDESIGNTIPS
JABSDESIGNTIPS
JABSDESIGNTIPS
JABSDESIGNTIPS
izin nyimak lutfin.com
ReplyDeleteIlmunya sangat bermanfaat trims ya
Cuci Sofa Jogja
ReplyDeleteLoker terupdate
Mampir kesini ya rdn times
ReplyDeleteGood job. Teologia Reformed
ReplyDeleteIt helped me a lot. If you have time, I hope you come to my site and share your opinions in my website. Have a nice day ^^.
ReplyDelete바카라사이트 CENTRALGACOR
Rekomendasi Kontraktor Jogja
ReplyDeleteNONTON21 Nonton Film Streaming Movie IndoXXI Rebahin Dunia21 Layarkaca21 BOOMXX1 Keren Cinema 21 Box Office Filmapik Pusatfilm21 IDLIX Savefilm21.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteCloud Datastore
ReplyDeleteCloud Storage
Bar & Restaurants
Finance
Azzury
sm3ha
ReplyDeletex2download
bagishared
bagishared
mxtube
mxtube
bokep indo
bokep indo
bokep hd
bokep indo
Deltapole
ReplyDeleteAkan saya coba terapkan diblog saya semoga berhasil, terimakasih atas tutorialnya
ReplyDeleteKode Bank
Tolong bikinkan tutor widget label di post statis bg?
ReplyDeleteDunia Kuliah
Sip lah Mantap bang.
ReplyDeleteMy Blog SEVANGAME
inisaya
ReplyDeleteinisaya
inisaya
inisaya
inisaya
ini saya
ReplyDeleteinisaya
ReplyDeleteYakangedu akhir temukan informasi yg bermanfaat ini.. kerenn...!
ReplyDeleteterimakasih bnyak mas, sangat membantu..
ReplyDeleteCetak Spanduk Terdekat
Cetak Banner Online
Cetak Banner Jakarta
Spanduk Online Murah
Cetak Backdrop Online
Terima kasih banyak untuk artikelnya sangat bermanfaat.
ReplyDeleteblog zombie
blog zombie
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteArtikel yang bagus untuk di baca Visit my blog at arhofficial
ReplyDeleteVisit my blog at arhofficial
Visit my blog at Celah Cahaya a href=" https://bit.ly/3GiPXjE
ReplyDeleteVisit my blog at Celah Cahaya
ReplyDeleteVisit mine
ReplyDeleteCuma Cakarbet yang memberikan event event menarik dengan hadiah besar berapapun dibayar.
ReplyDelete