Widget recent post kali ini tanpa menggunakan gambar , supaya lebih responsive saat di pramuat halaman.
Namun jika sobat menginginkanya dengan yang menggunakan gambar sobat bisa mencarinya di internet.
Pada kesempatan kali ini westoiku akan membagikan sebuah tutorial tentang cara membuat recent post responsive tanpa gambar.
Caranya cukup mudah , karna sobat tidak perlu mengoperasikan Edit HTML. disini cukup menambahkan kolom widget pada pengaturan blog kalian , tambahkan javascript.
Kelebihan dan kekurangan
Dari script ini yaitu :
Mudah di pasang ,cukup add widget
Mudah dihapus , tanpa masuk ke Edit HTML
Untuk tampilanya sangat responsive dan ringan pada saat loading , dan bisa menampilkan hingga 5 artikel terbaru yang sudah dipublikasikan.
Widget recent post ini saya menjumpainya pada sebuah blog yang berjudul jagoankode.
Situs web tersebut memang mahir dalam bidang pemograman html javascript.
Jika sobat penasaran seperti apa tampilanya , sobat bisa langsung di bagian ini
Kira kira seperti ini tampilanya.
Disini ada 2 kode ,
1. Pertama Tanpa Nomor
2. Kedua Menggunakan Nomor
Pratinjau :
Keren , simple , dan responsive , sangat cocok di pasang pada sebuah blog.
BACA JUGA :Cara Membuat Recent Post Tampilan Keren Dan Menarik
Cara Membuat Recent Post Pada Blogger
Sobat bisa ikuti panduan di bawah ini
1. Buka Akun Blogger.
2. Pilih Tata Letak.
3. Tambah Gadget.
4. Pilih "JavaSecript"
Salin dan pastekan pada blog milik sobat.
Script Tanpa Nomor.
salin kode ini
<style scoped='' type="text/css">
ul#posting-terbaru{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: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://westoiku.blogspot.com/",
jumlahpost = 5;
function PostingTerbaru(jagoankode){if(document.getElementById("posting-terbaru")){let jagoankodemantap=jagoankode.feed.entry,title,link,content="",jagoankodeasem=document.getElementById("posting-terbaru");for(let s=0;s<jumlahpost;s++){for(let g=0;g<jumlahpost;g++){if(jagoankodemantap[s].link[g].rel=="alternate"){link=jagoankodemantap[s].link[g].href;break}}let title=jagoankodemantap[s].title.$t;content+='<li class="posting-terbaru"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}jagoankodeasem.innerHTML=content}}let jagoankodeasu=document.createElement('script');jagoankodeasu.src=urlblogkalian+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+jumlahpost+'&callback=PostingTerbaru';document.getElementsByTagName('body')[0].appendChild(jagoankodeasu);
//]]>
</script>
Script Dengan Nomor.
Salin Kode ini
<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://westoiku.blogspot.com/",
jumlahpost = 5;
function PostingTerbaru(jagoankode){if(document.getElementById("posting-terbaru")){let jagoankodemantap=jagoankode.feed.entry,title,link,content="",jagoankodeasem=document.getElementById("posting-terbaru");for(let s=0;s<jumlahpost;s++){for(let g=0;g<jumlahpost;g++){if(jagoankodemantap[s].link[g].rel=="alternate"){link=jagoankodemantap[s].link[g].href;break}}let title=jagoankodemantap[s].title.$t;content+='<li class="posting-terbaru"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}jagoankodeasem.innerHTML=content}}let jagoankodeasu=document.createElement('script');jagoankodeasu.src=urlblogkalian+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+jumlahpost+'&callback=PostingTerbaru';document.getElementsByTagName('body')[0].appendChild(jagoankodeasu);
//]]>
</script>
Untuk bisa menyalin kode diatas cukup tekan tombol copy di pojok kanan atas.
Dengan satu kali tekan akan otomatis tersalin.
Perlu di ingat !
Pada saat menyalin kode diatas , dan pada saat menempelkanya pastikan javascript tersebut terpaste dengan benar.
Catatan :
Ganti URL pada kode diatas dengan URL blog milik sobat.
Demikian artikel dari westoiku yang membahas tentang cara membuat widget recent post tampilan responsive.
Semoga bermanfaat dan selamat mencoba.
Post a Comment