random post rounded list

Random post rounded list - random post rounded list memiliki tampilan yang menarik, random post rounded list cocok buat para blogger mania yang menginginkan tampilan widget yang menarik dan unik. Widget random post rounded list memakai list style type decimal dengan sistem rounded. Gambar disamping merupakan gambar tampilan random post rounded list buat para blogger mania yang ingin melihat tampilan demo random post rounded list ini silahkan kunjungi link sumber halaman demo dibawah ini. Bila anda tertarik memasang random post rounded list pada halaman blog kesayangan anda, silahkan simak penjelasan tutorial dibawah ini, langsung saja menuju TKP.

Demo

Code CSS random post rounded list.

/*****************************************
Name : random post rounded list
By : Rivai Silaban | Blog Design
Update :Minggu 05 January 2014
site : www.rivai.org
******************************************/
.random-post-rounded-list ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);}
.random-post-rounded-list a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;}
.random-post-rounded-list a:hover{background: #eee;}
.random-post-rounded-list a:hover:before{ transform: rotate(360deg);}
.random-post-rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
background-color: #000000;
color: #CCCCCC;}
/*** www.rivai.org CSS random post rounded list and ***/

Code HTML random post rounded list.

<!-- www.rivai.org code random post rounded list start-->
<div class="random-post-rounded-list"><ol>
<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,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 ="<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="http://www.rivai.org/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script></ol></div>
<!-- www.rivai.org code random post rounded list end-->

Code diatas merupakan code CSS dan code tag HTML dari widget random post rounded list yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama seperti saya silahkan kunjungi halaman tata cara pemasangan widget random post rounded list agar lebih detail dan jelas.....

http://www.rivai.org/2014/01/random-post-rounded-list.html

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 3:16 PM