Cara Membuat Menu/Widget Random Post Berwarna

By | 6 June 2015
188Domino | Agen Poker | Agen Domino | Poker Online Terpercaya

Cara Membuat Menu/Widget Random Post Berwarna – Salah satu manfaat widget di blog adalah untuk memudahkan pengunjung blog menavigasi konten di dalamnya. Salah satunya adalah widget random post, widget ini membantu mempromosikan artikel – artikel lain yang mungkin tidak ada kaitannya dengan artikel yang dibaca pengunjung.

Cara Membuat Menu/Widget Random Post Berwarna

Random post adalah tampilan posting secara acak di widget yang umumnya berada di sidebar blog. Banyak sekali cara untuk membuat widget random post, namun kali ini saya ingin share bagaimana membuat random post atau widget posting acak yang warna warni.

Cara Membuat Menu/Widget Random Post Berwarna

  • Masuk ke Blogger – Tata Letak – Tambahkan Widget – HTML/Java Script
  • Paste kode berikut:

<style type=”text/css”>
.noop-random-posts ul li {
list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 92%;
}
.noop-random-posts ul li:first-child:after {
content: “1”;
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 92%;
}
.noop-random-posts ul li:first-child + li:after {
content: “2”;
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: “3”;
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: “4”;
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: “5”;
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: “6”;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: “7”;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: “8”;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: “9”;
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div class=”noop-random-posts”><script type=”text/javascript”>
var randarray = new Array();var l=0;var flag;
var numofpost=5;function nooprandomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write(‘<ul>’);
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel==’alternate’){var item = “<li>” + “<a href=” + entry.link[k].href + “>” + entry.title.$t + “</a> </li>”;
document.write(item);}}
}document.write(‘</ul>’);}
</script><a href=”http://www.uceng999.com” style=”font-size:0pt”>Random Posts Widgets</a><script type=”text/javascript” src=”/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts”></script></div>

RomeoPoker | Agen Poker Online | Agen Domino99 Online | Agen BandarQ
  • Ganti kode warna merah dengan URL atau domain anda
  • Simpan

Untuk jumlah posting yang akan di tayangkan silahkan ganti angka 5 pada kode berwarna merah diatas dengan jumlah posting yang anda inginkan. Widget warna warni ini memang sangat menarik, sehingga memang banyak sekali yang menggunakannya.

Baca juga:

Demikian tutorial cara membuat random post berwarna, semoga bermanfaat dan selamat mencoba.

Obat Pembesar Penis
Category: Blogging Tags:

About s.magi

Jangan berpikir dua kali, ragu-ragu tak memberi kepastian. Mulai bertanya, biar penasaranmu terpuaskan. Gerakkan dunia, jangan biarkan dunia yang menggerakkanmu. Tuliskan kisah hidupmu, hidup terlalu singkat untuk alur kisah orang lain. Melangkahlah kemana hati ini melangkah. Go a head !!!

Leave a Reply

Your email address will not be published.