random post style

Cara membuat random post style ini sudah saya kemas dengan beberapa style color, random post style ini memiliki 4 kode CSS yang berbeda warna tampilannya, jadi anda tinggal menyesuaikan warna yang sesuai dengan tampilan blog anda. Postingan kali ini terinspirasi dari seorang teman sekolah saya waktu SMP yang menginginkan style random post untuk dipasang di blognya, setelah hampir satu minggu saya pikir pikir akhirnya saya membuat kodenya dan membuat random post style ini dengan tampilan 4 warna yang berbeda agar beliau bebas memilihnya. Semoga beliau merasa senang atas kode yang sederhana ini. Agar semua teman teman yang membutuhkan juga ikut kebagian akhirnya saya memosting kode ini. Untuk melihat tampilan dari Random Post Style ini silahkan klik DEMO lihat tampilan random post style yang telah saya sajikan dengan warna : " Blue Style " " Red Style " " White Style " " Black Style " . Oke langsung saja menuju TKP dan simak tutorial dibawah ini :

Demo

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.
   
   Ada 4 pilihan warna tampilan widget random post ini, silahkan copy kode CSS menurut warna atau style yang anda sukai.

Blue Style

/*****************************************
Name : Widget Random Post Blue Style
By : Rivai Silaban | Blog Design
Update : Selasa, 24 September 2013
******************************************/
#BDrs_randomPOST{
list-style-type: none;
width:280px;
padding: 3px;
border:solid #000000 1px;
background-color: #000055;
color: #689DD9;
}
#BDrs_randomPOST a {height: 30px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
line-height:15px;
letter-spacing:0.1em;
box-shadow: 0 0 5px #111 inset;
text-decoration: none;
display:block;
padding:5px 6px 5px 6px;
background-color: #1F4B7C;
border:solid #2E71BA 1px;
}
#BDrs_randomPOST a:hover {
color:#333333;
text-transform: none;
background-color: #689DD9;
border:solid #498AD1 1px;
box-shadow: 0 0 7px #000 inset;
}/* Widget Random Post Blue Style CSS End */

Red Style

/*****************************************
Name : Widget Random Post Red Style
By : Rivai Silaban | Blog Design
Update : Selasa, 24 September 2013
******************************************/
#BDrs_randomPOST{
list-style-type: none;
width:280px;
padding: 3px;
border:solid #000000 1px;
background-color: #5C0000;
color: #6C0000;
}
#BDrs_randomPOST a {height: 30px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #999999;
line-height:15px;
letter-spacing:0.1em;
box-shadow: 0 0 5px #111 inset;
text-decoration: none;
display:block;
padding:5px 6px 5px 6px;
background-color: #530000;
border:solid #7C0000 1px;
}
#BDrs_randomPOST a:hover {
color:#FFFFFF;
text-transform: none;
background-color: #800000;
border:solid #8C0000 1px;
box-shadow: 0 0 4px #000 inset;
}/* Widget Random Post Red Style CSS End */

White Style

/*****************************************
Name : Widget Random Post White Style
By : Rivai Silaban | Blog Design
Update : Selasa, 24 September 2013
******************************************/
#BDrs_randomPOST{
list-style-type: none;
width:280px;
padding: 3px;
border:solid #000000 1px;
background-color: #CCCCCC;
}
#BDrs_randomPOST a {height: 30px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
line-height:15px;
letter-spacing:0.1em;
box-shadow: 0 0 5px #111 inset;
text-decoration: none;
display:block;
padding:5px 6px 5px 6px;
background-color: #F0F0F0;
border:solid #EBEBEB 1px;
}
#BDrs_randomPOST a:hover {
color:#000000;
text-transform: none;
background-color: #FFFFFF;
border:solid #CCCCCC 1px;
box-shadow: 0 0 3px #000 inset;
}/* Widget Random Post White Style CSS End */

Black Style

/*****************************************
Name : Widget Random Post Black Style
By : Rivai Silaban | Blog Design
Update : Selasa, 24 September 2013
******************************************/
#BDrs_randomPOST{
list-style-type: none;
width:280px;
padding: 3px;
border:solid #000000 1px;
background-color: #666666;
}
#BDrs_randomPOST a {height: 30px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
line-height:15px;
letter-spacing:0.1em;
box-shadow: 0 0 5px #111 inset;
text-decoration: none;
display:block;
padding:5px 6px 5px 6px;
background-color: #333333;
border:solid #666 1px;
}
#BDrs_randomPOST a:hover {
color:#FFFFFF;
text-transform: none;
background-color: #666666;
border:solid #797979 1px;
box-shadow: 0 0 10px #000 inset;
}/* Widget Random Post Black 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 -->
<div id="BDrs_randomPOST">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;// Jumlah artikel yang akan ditampilkan
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="http://rivai-silaban.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script> </div>
<!-- BDRS Widget Random Post Style code End -->

Keterangan Code

• Untuk kode CSSnya [ whidth =" 280px "] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
• Tulisan kode warna MERAH ganti dengan URL blog anda.
• Kode tulisan warna BIRU adalah jumlah judul artikel yang akan ditampilkan
• Ada 4 tampilan warna yang dapat anda pilih, yaitu Blue Style, Red Style, White Style, Black Style. anda hanya menggantikan kode CSSnya silahkan anda copy kode CSSnya menurut style yang anda sukai.
• Untuk " CODE HTML " anda tidak perlu menggantinya sesuai warna, hanya bagian CSS yang akan anda ganti sesuai tampilan warna yang cocok buat anda.
  

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.

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 Style
Selasa, 24 September 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:42 AM