tabbed widget random post per label

Install Program CSS


     Login to your dashboard
     Go to the "Template" and click "Edit HTML"
     Search code]]> </ b: skin>
     Copy Code CSS script below, paste the above code]]> </ b: skin> last or when you use the blog template </ style> please paste the code CSSnya just above </ style> your template

/*****************************************
Name : Random Post Sliding
By : ARIEADIE | 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 After you finish showing the contents of your time putting script code on the tag html / xml your template. In the Edit HTML template you please find the code </ head> Having met this script copy and paste the above code </ head> If you already have a script template JQUERY above version (1.4.2) a code blue should not be copied, because if there are two scripts Jquery on one template will result in an error.

 

<!-- ARIEADIE | 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>
<!-- ARIEADIE | 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 .

<!-- ARIEADIE | 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>widget tabber random post per label 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>widget tabber random post per label 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>widget tabber random post per label 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>widget tabber random post per label 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>widget tabber random post per label 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>widget tabber random post per label 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>widget tabber random post per label 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>widget tabber random post per label 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>widget tabber random post per label 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>widget tabber random post per label 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>widget tabber random post per label 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>
<!-- ARIEADIE | BLOG DESIGN widget End -->