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.