widget random post jquery valid html5

Widget random post dengan sistem Jquery sangat cocok dihalaman blog anda, widget ini tergolong unik dan berbeda seperti random post biasanya, cara membuatnya tidak terlalu rumit sebab tutorial kali ini akan membantu anda dalam pemasangannya. Widget random post sistem Jquery ini sangat dibutuhkan para bloger sebab mempunyai 2 fungsi yang sangat menguntungkan para bloger. Keuntungan dari script ini adalah :

1. Menampilkan judul postingan secara acak baik itu postingan yang sudah lama ataupun postingan yang baru. Hal ini dapat menguntungkan anda sebab postingan anda yang lama akan muncul kembali dan dapat dilihat para pengunjung.
2. Menampilkan judul postingan dengan jumlah yang banyak. Pada tampilan random post yang biasa menampilkan jumlah judul postingan 100 judul akan memakan tempat dan terlihat tidak rapi, tapi widget yang satu ini dapat menampilkan semua judul postingan halaman blog anda dengan sistem nex dan prev.

Widget random post Jquery ini menganut sistem penulisan tag html SEO Friendly dan Valid HTML 5 serta CSS 3 jadi widget ini sangat cocok anda andalkan untuk urusan menampilkan semua judul postingan anda pada halaman blog kesayangan anda.Tampilan widget yang satu ini sangat menarik dan elegan membuat tampilan blog anda semakin cantik dan menawan, untuk melihat demonya
KLIK DISINI lihat bagian sidebar halamannya.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. 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 : Random Post Jquery
By : Rivai Silaban | Blog Design
Update : 27 Agustus 2013
******************************************/
#BDRS-WIDGET {
width:300px;
height: auto;
}
.slider{
box-shadow:inset 0px 0px 10px #555;
background: #868585;
}
.slider p{
border-top:1px solid #666;
/*border-bottom:1px solid gray;*/
padding:4px;
padding-left:5px;
margin:0;
min-height:30px;
}
.slider p:hover{
background-color: #0099FF;
}
.slider p:hover.selected{
background: transparent;
}
.slider p.selected{
color: #FFFFFF;
}
.slider p a{
display:block;
min-height:30px;
color:#FFFFFF;
text-decoration:none;
text-shadow: 1px 1px 2px #000;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 12px;
}
.slider p a:hover{
color:#CCCCCC;
font-style: normal;
}
.slider p.selected a{
font-weight:bold;font-style: normal;
}
.kiri {
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 12px;
color: #333333;
padding:5px 30px;
border: solid #666 1px;
background-color:#CCCCCC;
float: left;
margin-bottom:7px;
font-weight: bolder;
text-transform: uppercase;
width: 142px;
}
.kiri:hover {
background-color:#999999;
color: #FFFFFF;
text-shadow: 1px 1px 2px #000;
}
.kanan {
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 12px;
color: #333333;
padding:5px 30px;
border: solid #666 1px;
background-color:#CCCCCC;
float: right;
margin-bottom:7px;
font-weight: bolder;
text-transform: uppercase;
width: 142px;
}
.kanan:hover {
background-color:#999999;
color: #FFFFFF;
text-shadow: 1px 1px 2px #000;
}/*** Blog Design CSS and ***/

Install Script

1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
2. Pada Edit HTML template anda silahkan cari kode </head>
3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>

<!-- Rivai Silaban | BLOG DESIGN script random post start -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3915802180/script1.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1812001383/script2.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&quot;.slider&quot;).mb_vSlider({
template:&quot;&quot;
,totalElements:1000
,easing:&quot;easeOutExpo&quot;
,slideTimer:1000
,nextEl:&quot;.vSnext&quot;
,prevEl:&quot;.vSprev&quot;
,height:310
,width:295},{
elementsPerPage:20
,actualPage:0
,foo:100
})});
</script>
<!-- Rivai Silaban | BLOG DESIGN script random post End -->

Install tag html

• Setelah anda sudah memasang CSSnya dan scriptnya 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 .
  

<!-- Rivai Silaban | BLOG DESIGN widget start -->
<div id="BDRS-WIDGET">
<button class="kiri" onclick="$('.slider').vsPrevPage()">prev</button><span style="font-family:Arial, Helvetica, sans-serif; font-weight: bold; color: #000000; text-align: center; text-transform: uppercase; margin-left: 5px; font-size: 11px;"times new roman", Times, serif;"></span>
<button class="kanan" onclick="$('.slider').vsNextPage()">next</button>
<div style="box-shadow: 0 0 3px #111; width:295px; padding:2px; height: auto;margin-bottom:-10px;">
<div class="slider"><span class="page">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=100;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 ="<p class='result'>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></p>";
document.write(item);}}
}document.write();}
</script>
<script src="URL BLOG ANDA/ feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
</span></div></div>
</div>
<!-- Rivai Silaban | BLOG DESIGN widget End -->

Kesimpulan

Lihat kode warna MERAH pada spoiler Code HTML silahkan ganti dengan URL blog anda.

Widget random post Jquery ini menganut sistem penulisan tag html yang EO Friendly dan Valid HTMl 5. Semua script dan penulisan kode HTML serta CSSnya sudah diuji kelayakannya begitu juga dengan lisesinya memakai DMCA Protected dan Commont 3.0

Buat para teman teman bloger yang mengalami masalah dalam memasang widget flaying navigasi animasi ini, silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.

Widget Random Post Jquery
Selasa, 27 Agustus 2013
By : Admin Blog Design | Rivai Silaban

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 : 5:55 PM