widget random post per label black style

Dalam posting kali ini taukahbahwa.blogspot.com akan menyajikan berita tentang widget random post per label black style. Semoga dengan berita widget random post per label black style akan menambah wawasan bagi anda pembaca setia taukahbahwa.blogspot.com

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Widget Random Post per label black style
By : Rivai Silaban | Blog Design
Update : Selasa, 08 Oktober 2013
******************************************/
#bdrsstyle_random {
width:300px;
padding:5px;
border:solid 1px;
height:auto;
background-color: #FFFFFF;
border-color: #333333;
}
#bdrsstyle_random:hover{
box-shadow:0 0 3px #990000;
border-color: #990000;
}
#bdrsstyle_random h3 {
color: #000000;
font-family: Georgia;
font-size: 24px;
font-style: italic;
font-weight: bold;
text-align: center;
text-shadow: 2px 1px 2px #999;
margin:-2px 0;
}
#bdrsstyle_random ol{
margin:0;
padding:0;
color: #FFFFFF;
}
#bdrsstyle_random ol li{
list-style:none;
font:bold 14px Arial,Verdana,Helvetica,Geneva,Helvetica,sans-serif;
margin-bottom:10px;
padding:5px;
background:#FFFFCC;
border:1px solid #FF9900;
border-radius: 3px;
}
#bdrsstyle_random ol li small{
font:11px Tahoma,Arial,Helvetica,sans-serif;
margin-top:0px;
}
#bdrsstyle_random .bdrsstyle_randomlist ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 0em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
#bdrsstyle_random .bdrsstyle_randomlist ol ol{
margin: 0 0 0 2em;
}
#bdrsstyle_random .bdrsstyle_randomlist a{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}
#bdrsstyle_random .bdrsstyle_randomlist a:hover{
background-color: #333333;
color: #CCCCCC;
}
#bdrsstyle_random .bdrsstyle_randomlist a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #000;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #CCCCCC;
}
#bdrsstyle_random .bdrsstyle_randomlist a:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
#bdrsstyle_random .bdrsstyle_randomlist a:hover:after{
left: -0.5em;
border-left-color: #000;
list-style-type: none;
}

Install Program Tag HTML

Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ; 

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmlnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Add gadget " ( Tambahkan gadget )
• Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
• Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
• Edit script dan save .

<!-- Rivai Silaban | BLOG DESIGN code start -->
<div id="bdrsstyle_random">
<div class='bdrsstyle_randomlist'>
<h3>Random Post per label</h3><ol>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(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();
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 ="<div>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";
document.write(item);}}
}document.write();}
</script>
<script src="URL BLOG ANDA /feeds/posts/default/-/LABEL ANDA?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
</ol>
</div></div>
<!-- Rivai Silaban | BLOG DESIGN code end -->

Keterangan Gambar

• Code warna merah ganti dengan URL blog anda
• Code warna Biru ganti dengan label atau kategori artikel anda.
• Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda. 

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com