widget random post per label black style

Random post per label dengan efek transition yang menarik, cara membuat widget random post per label black style ini menjadi pilihat buat anda yang gemar dengan tampilan tampilan yang unik dan menarik. widget random post black style dengan efek hover transition ini memiliki script yang ringan dan valid html 5 / CSS 3, penulisan link untuk tag htmlnya menganut sistem SEO Friendly. Bila anda suka dengan widget random post per label black style ini silahkan simak tutorial dibawah ini dan kunjungi link dari beberapa artikel mengenai widget random post, jangan lupa dilihat DEMOnya, oke langsung saja menuju TKP.

Demo

Referensi Artikel

• Random Post Style
• Widget random post style horizontal
• Random post slide new's
• Widget slide random post
• Random post with admin profil
• Jquery widget tab random post
• Widget tabber random post per label
• Widget random post SEO Friendly
• Jquery Sliding widget random post

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.
  

Kesimpulan

Widget Random Post Black style dengan hover transition 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.

Bila teman teman mengalami kesulitan dalam memasang kode widget ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Semoga postingan ini bermanfaat buat teman teman.

Widget Random Post Black Style
Selasa, 08 Oktober 2013
Rivai Silaban | Blog Design

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 : 7:24 AM