widget slider random post

Widget slider yang satu ini memakai sistem random post, dengan menu tab sebagai navigasi per label. Widget slider random post ini menganut sistem valid html 5 dan CSS 3 serta penulisan tag html yang SEO Friendly. Tampilan dan kecepatan script widget ini menjadikan widget slider random post per label ini layak untuk anda pasang di halaman blog kesayangan anda. Menampilkan judul artikel postingan per kategorinya membuat para pengunjung halaman blog anda semakin betah atau tertarik untuk melirik berbagai artikel yang telah anda posting pada halaman blog anda, hal itu sudah menjadi suatu keuntungan buat blog anda.Oke langsung saja menuju TKP, silahkan anda simak tutorial dibawah ini, Untuk melihat tampilan widget yang satu ini silahkan klik link dibawah ini.

Demo

Referensi Artikel

• Jquery widget tab random post
• Widget Tabber random post per kategori
  
• Jquery random post
  
• Random Post SEO Frienly
  
• Widget Random Post with Profil Admin
  

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 : Jquery Slider Random Post
By : Rivai Silaban | Blog Design
Update : Senin, 16 September 2013
******************************************/
#bdrsslider h2 {
margin-top: -10px;
margin-bottom: 14px;
padding: 0;
border-bottom: solid #999 1px;
width:93%;/*lebar widget*/
font-family: Georgia, "Times New Roman", Times, serif;
color: #0099FF;
text-shadow: 1px 1px 1px #000;
}
#bdrsslider {
width: 580px;/*lebar widget*/
margin: 0 auto;
position: relative;
border:solid #666 1px;
}
#bdrsslider:hover {
box-shadow:0 0 5px #666;
}
.bdrsscroll {
height: 250px;
width: 580px;/*lebar widget*/
overflow: auto;
overflow-x: hidden;
position: relative;
clear: left;
background-color: #F3F3F3;
}
.bdrsroll div.panel {
padding: 20px;
height: 210px;
width: 580px;/*lebar widget*/
}
ul.bdnav {/*menu tabber*/
list-style: none;
margin: 0;
padding: 10px 0;
background-color: #333333;
border-bottom:solid #00CCFF 4px;
border-top:solid #00CCFF 4px;
}
ul.bdnav li {
display: inline;
margin-right: 10px;
}
ul.bdnav a {
padding: 11px;
color: #CCCCCC;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
}
ul.bdnav a:hover {
color: #CCCCCC;
text-shadow: 0 0 5px #FFFF00;
border-top:solid #FF0000 6px;
}
ul.bdnav a.selected {
background-color: #666666;
color: #FF0000;
text-shadow: 1px 0 2px #111;
border-top:solid #FF0000 6px;
}
ul.bdnav a:focus {
outline: none;
}
.BD_title {/*CSS Random Post*/
list-style-type: none;
width:93%;
padding: 3px;
margin-top:-10px;
}
.BD_title a {
color: #000000;
line-height:18px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 22px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/s1600/ico-rss.jpg) no-repeat 0 2px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight: bold;
font-size: 11px;
border-bottom: dotted #ccc 1px;
}
.BD_title a:hover {
color:#990000;
text-transform: none;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/s1600/ico-rss.jpg) no-repeat 0 2px;
background-color: #E4E4E4;
display: block;
padding-left:22px;
} /*** 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>
4. Kode Jquery ini mempunyai lisensi masing masing, anda tidak diperbolehkan untuk mengeditnya.

<!-- Rivai Silaban | BLOG DESIGN script Jquery Flying Menu start -->
<script type="text/javascript" src="http://yourjavascript.com/1650568139/jquery-1-2-6.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1360340911/jquery-scrollto-1-3-3.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/6329101371/jquery-serialscroll-1-2-1.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1016319351/coda-slider.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script Jquery Flying Menu End -->

Install Program Tag HTML

• Setelah anda sudah memasang Scriptnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Bila tidak berhasil juga silahkan cari kode <data:post.body/> kemudian letakkan kode didalam spoiler tepat dibawah kode <data:post.body/>.
• Save template anda dan lihat hasilnya, selamat berkreative.

<!-- Rivai Silaban | BLOG DESIGN code start -->
<div id="bdrsslider">
<ul class="bdnav">
<li><a href="#label1">Widget</a></li>
<li><a href="#label2">Menu</a></li>
<li><a href="#label3">Post</a></li>
<li><a href="#label4">Jquery</a></li>
<li><a href="#label5">CSS</a></li>
<li><a href="#label6">Tip's</a></li>
<li><a href="#label7">HTML</a></li>
</ul>
<div class="bdrsscroll">
<div class="bdrsroll">
<div class="panel" id="label1"><h2>Widget</h2><div class="BD_title"><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,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/-/widget?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label2"><h2>Menu</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/menu?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>

<div class="panel" id="label3"><h2>Post</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/post?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label4"><h2>jquery</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/jquery?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label5"><h2>seo</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/seo?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label6"><h2>Tip's</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/trik pendukung?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>

<div class="panel" id="label7"><h2>Html</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/trik pendukung?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
</div>
</div>
<!-- Rivai Silaban | BLOG DESIGN code start -->

Keterangan Code

• Tulisan kode warna MERAH silahkan anda ganti dengan LINK URL BLOG ANDA.
• Tulisan warna BIRU ganti dengan label halaman blog anda. penulisan nama label sangat sensitif beda huruf saja tidak akan berpungsi.
• Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan related post ini dengan tems template anda.

Kesimpulan

Buat para bloger mania widget yang satu ini dapat menjadi andalan buat menarik hati para pengunjung blog, widget jquery slider random post per label ini valid HTML 5 dan CSS 3 serta SEO Friendly dan memiliki script yang standart loading.

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

Widget slider tab random post per label
Senin, 16 September 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:40 PM