Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Wednesday, November 6, 2013

random post list style

Random post style atau yang saya sebut dengan random post list style untuk blogspot, anda hanya tinggal memasang random post list style pada halaman blog kesayangan anda. Tampilan yang menarik dengan style list decimal membuat random post list style ini cocok di pasang di halaman blog kesayangan anda. Untuk tehnik pemasangan random post list style ini silahkan anda simak tutorial dibawah, agar lebih kenal dengan random post list style ini silahkan klik demo dibawah, langsung saja menuju TKP.

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.

/*****************************************
Name : Widget Random post list style
By : Rivai Silaban | 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.

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
Rabu, 05 Nopember 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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 9:46 AM

6 comments :

  1. Salam Bang Rivai, nyimak lagi nih di artikel Bang Rivai
    Yang baru tentang cara membuat, Random posts list style
    Ijin simpan scriptnya, dan jika di ijinkan saya juga ingin
    Berbagi dengan Sobat blogging saya, yang ada di Subang
    Jawa Barat. terima kasih yah Bang Rivai.

    ReplyDelete
  2. Caranya langganan blog akang lewat email gmana?

    ReplyDelete
    Replies
    1. terimakasih atas kunjungannya kang salam kenal..

      untuk join ke blog ini silahkan kunjungi link dibawah ini

      http://www.blogger.com/follow-blog.g?blogID=5055362939739660258

      untuk berlangganan email Update artikel, silahkan lihat subscribe dibawah halaman dibawah halaman pojok kanan,

      bila ingin tukaran link silahkan klik " link exchange " dibawah, dan silahkan komentar agar lebih cepat di approve

      makasih atas niat baiknya..

      Delete
  3. permisi , ini untuk random post ya dari semua postingan blog?
    :)
    thanks

    ReplyDelete
    Replies
    1. iya mas, dari semua yang terposting, tapi masih memiliki batas 1000 artikel terposting.

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog