Cara Membuat Widget Berwarna-warni

0
896
Cara Membuat Widget Berwarna-warni

Membuat tampilan blog anda berwarna-warni akan membuat pengunjung betah mengunjungi blog anda. blog anda jadi terlihat rapi dan berseni. untuk membuat widget warna-warni ini sangat mudah, anda hanya mengikuti langkah-langkahnya di bawah ini.

Cara Membuat Widget Berwarna-warni

Cara Membuat Widget Berwarna-warni

1. Login ke akun bloger anda

2. Masuk ke menu tema

3. Selanjutnya masuk ke menu Edit HTML

4. Cari kode ini </style> kemudian copy dan pastekan kode dibawah ini di atas kodeĀ </style>.kemudian klik Save. untuk memudahkan anda mencari kode tersebut anda bisa tekan Ctrl+f pada menu HTML anda.

./* Recent Wrapper By Vixiest.com */
#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}.

 

5. Setelah selesai menyimpan kode script di menu Edit HTML. selanjutnya anda masuk ke menu tata letak di blog anda. kemudian klik add a gadget pada side bar blog anda lalu pilih Widget recent post dan pastekan kode dibawah ini pada widget tersebut .

.<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>.

 

6. Jika sudah selesai anda klik Save dan kemudian lihat hasilnya pada halaman blog anda.

Disarankan Untuk Anda

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.