Cara Menambahkan Widget Recent Post Minimalis
Hai semua, kali ini saya akan membagikan sebuah tutorial Cara Menambahkan Widget Recent Post Minimalis, sebelumnya saya pernah menulis artikel Cara Memasang Widget Recent Post Minimalis dan Ringan, nah kali ini caranya mudah juga, cuma dengan menambahkan sedikit code saja.
Langsung saja berikut adalah langkah langkahnya. Namun sebelumnya saya ucapkan terima kasih untuk www.tipsryand.com yang telah berbagi source codenya. 😊
Pertama masuk ke Dasbor Blogger, dan pilih pada bagian tata letak.
Nah selanjutnya seperti biasa klik pada tambahkan gadget seperti gambar diatas. lalu pilih HTML/Javascript, dan masukan kode javascript berikut.
<style type="text/css">li.recent-posts:nth-child(1){border-top-width:1px!important}li.recent-posts{background:#fff;margin:0!important;padding:8px 10px!important;position:relative;border:1px solid #d6dee4;border-top-width:0;border-left-width:4px;border-left-color:black;font-size:14px}li.recent-posts a {font-weight: 400!important;display: block;text-decoration: none!important;line-height: 1.4em!important;padding-right: 8px!important;}</style><ul id="recent-posts"></ul><script>//<![CDATA[var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){var homePage = "//www.blogsayugi.com/",numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);}//]]></script>
Catatan : Ganti yang saya tandai dengan nama blog kamu.
Selanjutnya simpan, dan lihat hasilnya.
Bisa dilihat pada gambar diatas hasilnya, lumayan minimalis dan keren kan, selain itu loadingnyapun cepat karena tidak memuat gambar.
Post a Comment for "Cara Menambahkan Widget Recent Post Minimalis"