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 :
DEMOMembuat 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&start-index=1&max-results=1000&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.