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. 


Ayo Berlangganan Artikel Terbaru Biar Gak Kudet:

0 Response to "Cara Menambahkan Widget Recent Post Minimalis"

Post a Comment

Contact Form

Name

Email *

Message *

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel