random post list style

Pada hari ini taukahbahwa.blogspot.com akan menyajikan posting tentang random post list style. Semoga dengan artikel random post list style akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code </head>
4. Copy Code script CSS dibawah ini, pastekan tepat diatas code </head> yang tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Widget Random post list style
By : Arieadie | Blog Design
Update : Rabu, 05 Nopember 2013
******************************************/
.randombdrs-posts ul {
padding-left: 0px;
counter-reset: popcount;
width: 300px;
}
.randombdrs-posts ul li:before {
list-style-type: none;
margin-right: 10px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: rgb(241, 241, 241);
position: relative;
font-family: georgia;
float: left;
border: 2px solid rgb(243, 243, 243);
box-shadow: 1px 2px 5px #666;
line-height: 20px;
}
.randombdrs-posts ul li a{
list-style-type: none;
color: #000000;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
vertical-align: middle;
line-height:normal;
text-shadow: 1px 2px 2px #999;
}
.randombdrs-posts ul li a:hover{
color: #5E0000;
text-shadow:none;
}
.randombdrs-posts ul li {
list-style-type: none;
text-decoration: none;
height: 35px;
border-bottom:1px solid #999;
border-top:1px solid #fff;
background-color: #F2F2F2;
padding:10px 5px;
}
.randombdrs-posts ul li:hover {
background-color: #D2D2D2;
}/* Widget Random Post Blue Style CSS End */

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmnya 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 .

<!-- BDRS Widget Random Post Style code start -->
<h2>Random Post List Style</h2>
<div class='randombdrs-posts'>
<ul>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,7);
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 ="<li >" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></li>";
document.write(item);}}
}document.write();}
</script>
<script src="URL BLOG ANDA /feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script></ul>
<div class='clear'></div>
<!-- BDRS Widget Random Post Style code End -->

Kesimpulan

Widget Random Post style ini Valid HTML 5 dan CSS 3 serta memiliki penulisan script yang SEO Friendly dan loading yang ringan. Silahkan anda sesuaikan tampilan warna dari widget ini terhadap thems blog anda.

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

Homepage|http://taukahbahwa.blogspot.com