Membuat Widget Recent Post Warna Warni Di Blog

Membuat Widget Recent Post Warna Warni Di Blog - Selamat sore sahabat blog . Pada waktu yang kemudian saya sudah posting Membuat Widget Label Warna Warni Ketika Hover. Pada kesempatan kali ini saya akan coba posting Membuat Widget Recent Post Warna Warni Di Blog

Selain kita dapat modifikasi popular post dan widget label mnjadi warna warni, kita juga dapat modifikasi widget recent post biar terlihat lebih menarik dan keren, salah satunya dengan modifikasi recent post biar menjadi warna warni.

Jika Anda ingin memasangnya di blog Anda , mari ikuti langkahnya dibawah ini.

1. Masuk ke akun Blogger Anda.
2. Masuk pada Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Kemudian Copy dan Paste isyarat JavaScript dibawah ini.

<div id='recent-wrapper' class='recent-wrapper'>
 <ul id="recent-posts"></ul>
 <script>
 //<![CDATA[
 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="Membuat Widget Recent Post Warna Warni Di Blog" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
 //]]>
 </script>
 </div> 

4. Klik Simpan.

Anda juga dapat mengatur jumlah postingan yang ingin di tampilan pada widget recent post, caranya cukup merubah isyarat numPosts = 10; silahkan ganti 10 dengan jumlah yang Anda inginkan.

Agar widget recent post terlihat warna warni, silahkan tambahkan CSS dibawah ini.

1. Masuk ke akun Blogger Anda.
2. Klik Tema > Edit HTML.
3. Cari isyarat ]]></b:skin> atau </style>.
4. Kemudian Copy isyarat CSS di bawah ini, kemudian Paste sebelum isyarat ]]></b:skin> atau </style>.

 /* Recent Post */
 #recent-wrapper{display:block;position:relative;overflow:hidden;font-size:15px}
 #recent-wrapper ul{margin:0;padding:0;list-style-type:none;}
 #recent-wrapper ul li{position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
 #recent-wrapper ul li:first-child {background:#E11E28;width:100%}
 #recent-wrapper ul li:first-child:after{content:"01";}
 #recent-wrapper ul li:first-child + li{background:#FD3C03;width:97%}
 #recent-wrapper ul li:first-child + li:after{content:"02";}
 #recent-wrapper ul li:first-child + li + li{background:#FECB09;width:94%}
 #recent-wrapper ul li:first-child + li + li:after{content:"03";}
 #recent-wrapper ul li:first-child + li + li + li{background:#6EBE27;width:91%;}
 #recent-wrapper ul li:first-child + li + li + li:after{content:"04";}
 #recent-wrapper ul li:first-child + li + li + li + li{background:#149A48;width:88%;}
 #recent-wrapper ul li:first-child + li + li + li + li:after{content:"05";}
 #recent-wrapper ul li:first-child + li + li + li + li +li{background:#15d3c3;width:85%}
 #recent-wrapper ul li:first-child + li + li + li + li +li:after{content:"06";}
 #recent-wrapper ul li:first-child + li + li + li + li + li +li{background:#288abb;width:82%}
 #recent-wrapper ul li:first-child + li + li + li + li +li +li:after{content:"07";}
 #recent-wrapper ul li:first-child + li + li + li + li + li + li +li{background:#863e86;width:79%}
 #recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}
 #recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li{background:#71264b;width:76%}
 #recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}
 #recent-wrapper ul li:first-child + li + li + li + li + li + li + li + li +li{background:#502234;width:73%}
 #recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}
 #recent-wrapper ul li:first-child:after,
 #recent-wrapper ul li:first-child + li:after,
 #recent-wrapper ul li:first-child + li + li:after,
 #recent-wrapper ul li:first-child + li + li + li:after,
 #recent-wrapper ul li:first-child + li + li + li + li:after,
 #recent-wrapper ul li:first-child + li + li + li + li + li:after,
 #recent-wrapper ul li:first-child + li + li + li + li + li + li:after,
 #recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after,
 #recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li:after,
 #recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li +li:after {position:absolute;top:5px;right:5px;line-height:1em;text-align:center;color:rgba(0,0,0,0.2); font-size:23px !important; font-weight:700}
 #recent-wrapper ul li a{color:white;text-decoration:none} 

5. Klik Simpan.

Share this Article