widget tabber random post per label

Widget random post per label dengan Jquery dengan sistem tampilan sliding, akan menambah tampilan halaman blog anda semakin lebih propesional. Tampilan widget sliding random post Jquery ini memang terkesan unik dan sangat langka untuk tampilan random post pada umumnya. Script dari widget ini menampilkan artikel postingan secara random dan mempunyai menu untuk memilih bagian label yang akan kita lihat. Oke saya beranggapan bahwa anda sudah lebih paham arti random post dari pada saya, saatnya kita menuju TKP dan lihat demonya melalui link dibawah ini.
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 Sliding
By : Rivai Silaban | Blog Design
Update : 29 Agustus 2013
******************************************/
*{
margin:0px;
padding:0px;
}
#bdrscontent{
margin:5px auto;
text-align:center;
width:300px;// Lebar widget
position:relative;
height:100%;
color:#444444;
font-size:13px;
font-family:"Century Gothic", Helvetica, sans-serif;
background-color: #FFFFFF;
}
#bdwrapper{
box-shadow:0px 0px 3px #aaa;
border:2px solid #fff;
width:230px;
overflow:hidden;
}
#rivai{
width:200px;
overflow:hidden;
}
.slbn{
float:left;
width:200px;
}
#navigationbd{
background-color:#e9e9e9;
border-top:1px solid #fff;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigationbd ul{
list-style:none;
float: left;
position: absolute;
z-index: 100;
top: 0px;
right: 0px;
}
#navigationbd ul li{
margin-left:3px;
padding-left:3px;
;
}
#navigationbd ul li a{
display:block;
background-color:#666666;
color:#FFFFFF;
outline:none;
text-decoration:none;
padding:5px 5px;
border:1px solid #333;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
border-radius:0 0px 7px 0;
text-shadow: 1px 1px #111;
font-weight: bold;
}
#navigationbd ul li a:hover,
#navigationbd ul li.selected a{
color:#999999;
background-color:#333333;
}
#rivai form fieldset{
border:none;
padding-bottom:px;
}
#rivai form legend{
text-align:left;
background-color:#333333;
color:#CCCCCC;
font-size:14px;
text-shadow:1px 1px 1px #000;
font-weight:bold;
float:left;
width:224px;
padding:5px;
margin:10px 0px;
border-bottom:1px solid #fff;
border-top:1px solid #d9d9d9;
font-family: Georgia, "Times New Roman", Times, serif;
}
#BD_random_title a {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000099;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 8px;
text-align: left;
}
#BD_random_title a:hover {
color:#990000;
text-transform: none;
background-color: #CCCCCC;
}
.BD_random_list {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #0000FF;
line-height:10px;
letter-spacing:0.1em;
text-decoration: none;

}/*** 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. Bila template anda sudah memiliki script JQUERY versi diatas ( 1.4.2 ) kode yang berwarna biru tidak usah di copy, sebab bila ada 2 script Jquery pada satu template akan mengakibatkan error.

<!-- Rivai Silaban | BLOG DESIGN script random post start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var fieldsetCount = $('#formElem').children().length;
var current = 1;
var stepsWidth = 0;
var widths = new Array();
$('#rivai .slbn').each(function(i){
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#rivai').width(stepsWidth);
$('#navigationbd').show();
$('#navigationbd a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
current = $this.parent().index() + 1;
$('#rivai').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
},500,function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
});
e.preventDefault();
}); });
</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="bdrscontent">
<div id="bdwrapper">
<div id="rivai">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="slbn">
<legend>Tip's & Trik Blogspot</legend>
<span>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;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 id='BD_random_title' style='border-bottom: dashed #999 1px; '>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";
document.write(item);}}
}document.write();}
</script>
<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 1 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE </legend>
<span>
<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 2 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 3 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/LABEL ANDA 4 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 5 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG /feeds/posts/default/-/LABEL ANDA 6 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 7 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 8 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 9 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 10 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 11 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>
</form>
</div>
<div id="navigationbd" style="display:none; ">
<ul>
<li >
<a href="#" title="TOMBOL LABEL 1 " >TOMBOL LABEL 1 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 2 ">TOMBOL LABEL 2 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 3 ">TOMBOL LABEL 3 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 4 ">TOMBOL LABEL 4 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 5 ">TOMBOL LABEL 5 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 6 ">TOMBOL LABEL 6 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 7 ">TOMBOL LABEL 7 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 8 ">TOMBOL LABEL 8 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 9 ">TOMBOL LABEL 9 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 10 ">TOMBOL LABEL 10 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 11 ">TOMBOL LABEL 11 </a>
</li></ul></div></div></div>
<!-- Rivai Silaban | BLOG DESIGN widget End -->

Kesimpulan

Lihat kode warna MERAH pada spoiler Code HTML silahkan ganti dengan URL blog anda dan nama menu anda ikuti sesuai tutorial yang tertulis.

Kode warna BIRU Judul page widgetnya, ganti tulisan pada kode dengan judul page, sesuaikan judul pagenya dengan label nya.

Kode warna HIJAU adalah nama tombol menu widgetnya, silahkan ganti sesuai dengan Nama Label blog anda agr lebih sinergis, dan untuk bagian tulisan warna HIJAU pada title samakan dengan nama label dan menu anda.

Kode tulisan huruf 10 pada script adalah jumlah tampilan judul post per label yang akan ditampilkan oleh widget ini.

Widget Sliding Random Post per label 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 Sliding Random Post Per Label
Selasa, 29 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 : 4:27 PM