Membuat Random Posts Style Polos

Membuat Random Posts Style Polos

Dengan bertepatan tanggal, hari ulang tahun saya, yaitu tepat  pada hari  ini taggal
07-11-2013, dan pada hari ini juga saya akan berbagi  buat sobat blogging semua
Sebelumnya  saya  posting,  Trik Membuat Artikel Ramai Pengunjung,  dan  pada
Kesempatan ini, saya akan publikasikan,  tentang cara widget  random posts yang
Mana widget ini, untuk memudahkan pengunjung, menavigasi dengan mudah dan
Membuka halaman  demi halaman  dari artikel,  dan posts yang ada  di blog sobat

Membuat Random Posts Style Polos

Untuk melihat hasil dari script ini buka halaman demo di berikut ini :   DEMO

Membuat Random Posts Style Polos :

Membuat random posts style polos,  adalah pelengkap -  Accessories  pada sebuah blog yang
Kita kelola mendengar namanya widget ini pasti semua  para master dansenior  blogging tentu
Tidak aneh dan tidak asing lagi, namun pada widget ini,  saya sajikan dengan sedikit fiture yang
Mungkin sedikit berbeda dari yang ada, namun intinya sama untuk menampilkan sebuah artikel
Dan posts pada sebuah halaman blog, dan widget ini sudah tervalidasi valid Html 5 juga CSS 3

Untuk memasang widget tersebut silahkan anda simak panduan memsangnya
Berikut tutorial cara  memasang  widget random posts style polos  di bawah ini

Cara memasangnya :

Pertama anda masuk account blog anda lalu sign in, terus pilih dasboard lalu pilih template
Kemudian pilih edite template,  selanjutnya cari kode  </head>  atau jika template blog anda
Memakai kode  </style>,  copy kode, di bawah ini   dan pastekan tepat  diatas kode,  </head>
Atau paste  kode di bawah,  tepat di atas kode,  </style>,  pada element,  template  blog anda

.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: 12px;
background: #F6A00D;
color: rgb(241, 241, 241);
position: relative;
font-family: georgia;
float: left;
border: 2px solid rgb(243, 243, 243);
box-shadow: 1px 2px 5px #F40423;
line-height: 23px;
}
.randombdrs-posts ul li a{
list-style-type: none;
color: #0F32E8;
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: #FF3D4C;
text-shadow:none;
}
.randombdrs-posts ul li {
list-style-type: none;
text-decoration: none;
height: 38px;
border-bottom:1px solid #999;
border-top:1px solid #52ED2A;
background-color: #F2F2F2;
padding:10px 5px;
}
.randombdrs-posts ul li:hover {
background-color: #1806E7;
}/* Widget Random Post Blue Style CSS End */

Setelah memasang kode diatas, dengan benar kemudian save template, dan selanjutnya
Berlanjut ke tahap,  selanjutnya memasang  kode Html javascript,  pilih dasboard blogger
Pilih layout  atau  tata letak,  lalu pilih add widget  selanjutnya copy  kode di  bawah ini dan
Pastekan pada  kolom Html  pada add widget   yang anda  buat tadi,  jangan, di compose

<!-- BDRS Widget Random Post Style code start -->
<h2>Random Posts Style Polos</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="http://karristaent.blogspot.com/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 --></div>

Keterangan kode diatas :

Ganti teks yang  berwarna  Orange  deng judul  widget  yang  anda inginkan
Ganti number  yang  berwarna  Biru  sesuai jumlah  posts yang  di inginkan
Ganti  juga  link   http://karristaent.blogspot.com  dengan  URL, blog  anda

Setelah semuanya terpasang dengan benar save widget, dan lihat hasilnya

Kesimpulan :

Widget ini sangat sederhana  dengan desain  yang seadanya  namun tetap
Akan memunculkan  posts,  artikel anda  secara relevan,  dengan  trick gaya
Dan tampilan yang mudah untuk membuat  kenyamanan  pengunjung blog
Sampai disini  artikel saya  kali ini  semoga bermanfaat  buat sobat semua.

Source : Rivai Silaban