Cara Membuat Recent Post Warna - Warni

Hello Bro Kali Ini Saya Akan Memberikan Tutorial Blogging Untuk Anda Yaitu Cara Memasang / Membuat Recent Post Yang Warna - Warni Di Blog Anda , Recent Post Ini Di Design Oleh Bungfrangki Dan Design Nya Sangat Keren Untuk Blog Anda Pastinya , Oke Berikut Cara Memasang Recent Post Di Blog Anda .

Cara Memasang Recent Post Warna - Warni

Blogger == > Template == > Edit Template
Kamu Cari Kode CSS Yaitu : ]]></b:skin> Atau Juga Bisa </style>
Kemudian Kamu Copy Kode Yang Di Bawah Ini
Dan Pastekan Tepat Di Atas ]]></b:skin> Atau Juga Bisa </style>


/* Recent Wrapper By Bung Frangki */
#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:&quot;01&quot;;}
#recent-wrapper ul li:first-child + li{background:#FD3C03;width:97%}
#recent-wrapper ul li:first-child + li:after{content:&quot;02&quot;;}
#recent-wrapper ul li:first-child + li + li{background:#FECB09;width:94%}
#recent-wrapper ul li:first-child + li + li:after{content:&quot;03&quot;;}
#recent-wrapper ul li:first-child + li + li + li{background:#6EBE27;width:91%;}
#recent-wrapper ul li:first-child + li + li + li:after{content:&quot;04&quot;;}
#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:&quot;05&quot;;}
#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:&quot;06&quot;;}
#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:&quot;07&quot;;}
#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:&quot;08&quot;;}
#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:&quot;09&quot;;}
#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:&quot;10&quot;;}
#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}

Simpan Template

Kemudian Kamu Ke Menu Tataletak == > Add Gadget/Tambah Gadget
Lalu Kamu Pilih HTML/Javascipt
Dan Copy Kode Yang Di Bawah Ini
Dan Kamu Pastekan Di HTML/Javascript Kamu

<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="'+title+'" 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>

Lalu Kamu Simpan

Sekian Dan Terima Kasih

"Sumber :Script Recent Post Warna - Warni By Bungfrangki.com"


EmoticonEmoticon