Kode Widget Artikel Terbaru Responsive tanpa Gambar di Blog

Daftar Isi

Apa itu Recent Post Blog ?

Admin onesiswa.com akan membagikan script untuk membuat widget "Recent Post" atau daftar artikel terbaru dan menampilkannya di samping sidebar blog. Meskipun template Blogger sudah menyediakan berbagai jenis widget, tidak ada widget khusus untuk artikel terbaru, sehingga kita perlu memodifikasinya dengan sedikit CSS dan JavaScript.

Sebelumnya, admin telah memposting beberapa cara dan langkah untuk memasang widget responsive "Recent Post" di sidebar tanpa menggunakan gambar. Jika kamu tertarik memasang widget artikel terbaru silahkana ikuti langkah pemasanganya dibawah ini.

Kode Recent Post (Artikel Terbaru)

Kode secript tanpa nomer

<style scoped='' type="text/css">
ul#posting-terbaru{counter-reset: my-sec-counter;list-style:none;margin:0;padding:20px;background: linear-gradient(70deg, #ffffff 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #f5f5f5 60%, #fbfbfb 60%);font-weight:300}li.posting-terbaru{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.posting-terbaru::before{counter-increment: my-sec-counter;content: counter(my-sec-counter)".";font-weight: 800;font-style:italic;margin-right:5px;}
li.posting-terbaru:last-child{border-bottom:0;}
li.posting-terbaru a{color:#444;}li.posting-terbaru a:hover{color:#444;text-decoration:underline}
</style>
<ul id="posting-terbaru"></ul>
<script>
//<![CDATA[
let urlblogkalian = "https://onesiswa.blogspot.com/",
jumlahpost = 5;
function PostingTerbaru(onesiswa){if(document.getElementById("posting-terbaru")){let onesiswamantap=onesiswa.feed.entry,title,link,content="",onesiswaasem=document.getElementById("posting-terbaru");for(let s=0;s<jumlahpost;s++){for(let g=0;g<jumlahpost;g++){if(onesiswamantap[s].link[g].rel=="alternate"){link=onesiswamantap[s].link[g].href;break}}let title=onesiswamantap[s].title.$t;content+='<li class="posting-terbaru"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}onesiswaasem.innerHTML=content}}let onesiswaasu=document.createElement('script');onesiswaasu.src=urlblogkalian+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+jumlahpost+'&callback=PostingTerbaru';document.getElementsByTagName('body')[0].appendChild(onesiswaasu);
//]]>
</script>

Kode script dengan nomer 

<style scoped='' type="text/css">
ul#posting-terbaru{counter-reset: my-sec-counter;list-style:none;margin:0;padding:20px;background: linear-gradient(70deg, #ffffff 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #f5f5f5 60%, #fbfbfb 60%);font-weight:300}li.posting-terbaru{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.posting-terbaru::before{counter-increment: my-sec-counter;content: counter(my-sec-counter)".";font-weight: 800;font-style:italic;margin-right:5px;}
li.posting-terbaru:last-child{border-bottom:0;}
li.posting-terbaru a{color:#444;}li.posting-terbaru a:hover{color:#444;text-decoration:underline}
</style>
<ul id="posting-terbaru"></ul>
<script>
//<![CDATA[
let urlblogkalian = "https://onesiswa.blogspot.com/",
jumlahpost = 5;
function PostingTerbaru(onesiswa){if(document.getElementById("posting-terbaru")){let onesiswamantap=onesiswa.feed.entry,title,link,content="",onesiswaasem=document.getElementById("posting-terbaru");for(let s=0;s<jumlahpost;s++){for(let g=0;g<jumlahpost;g++){if(onesiswamantap[s].link[g].rel=="alternate"){link=onesiswamantap[s].link[g].href;break}}let title=onesiswamantap[s].title.$t;content+='<li class="posting-terbaru"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}onesiswaasem.innerHTML=content}}let onesiswaasu=document.createElement('script');onesiswaasu.src=urlblogkalian+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+jumlahpost+'&callback=PostingTerbaru';document.getElementsByTagName('body')[0].appendChild(onesiswaasu);
//]]>
</script>

Cara Memasang Kode Widget Recent Post (Artikel Terbaru)

  1. Login di situs www.blogger.com.
  2. Copy kode Recent Post pada Tata Letak/Layout > Tambahkan Gadget > Pilih HTML/JavaScript lalu paste.

    Kode Recent Post Artikel Terbaru Responsive

  3. Simpan, lihat hasilnya pada halaman utama Anda biasanya disebelah sisi pojok kanan.
Keterangan
Tidak semua template blogger support dengan kode Recent Post ini. Bila tidak support widget tidak akan menampilkan artikel terbaru pada blog.

Hasil Gambar Artikel Terbaru


Semoga dengan adanya Kode Responsive Widget Artikel Terbaru tanpa Thumbnail di Blog dan Memasang Kode Widget Recent Post (Artikel Terbaru) Tanpa Gambar Responsive dapat bermanfaat untuk anda. Terima kasih sudah berkujung di www.oenswisa.com.
Anang_at
Anang_at Belajar dari hal kecil, ingin menjadi orang Berhasil. Optimis, pasti bisa mencapai apa yang di inginkan.

Posting Komentar