Tab Unik Jquery Widget Untuk Blogger

Nulispost | Widget Tab selalu membantu untuk menghemat sidebar kita. Di situs tutorial ini saya
akan menjelaskan bagaimana menambahkan Tab Unik Jquery Widget Untuk Blogger
yang saya dapatkan di bloggertrik. Semoga dapat menggunakan widget ini untuk beberapa
halaman untuk tab widgets. Jquery tab sangat stylish dan sangat populer untuk blogging.
Widget ini adalah widget yang sederhana dengan jquery tab widget. Saya menggunakan
Css dan jQuery untuk membuat widget ini. Ini tab widget dengan setiap web modern
browsers. Namun yang tidak bekerja dengan IE. Anda dapat melihat
di dalam halaman demo untuk mendapatkan ide bagaimana cara kerjanya.

Demo

Cara menambahkan animasi Jquery Tab Widget ke Blogger :

1. Masuk ke Blogger anda lalu pilih Dashboard Template
2. Cari kode ]]></b:skin>
3. Berikut ini kodenya yang harus disimpan dibawah kode ]]>

CSS

<style>
.b, .c{ display:none;}
.buttons{
border-bottom:solid #0054BB 4px;
display:block;
padding:8px;
width:80px;-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
text-align:center;
margin:1px;
background:#4b7975;
text-decoration:none; color:#FFFFFF;
float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
#multitab {
background:#919b9d;
text-align:justify;
overflow:hidden;
color:#fff;
padding:20px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;    height:200px;
width:272px;
}
#nulispostdotcom{
text-align:left;
overflow:hidden;
width:350px;
height:380px;
}
</style>

<script type='text/javascript'>
// <![CDATA[
$(document).ready(function() {
$("#first-tab").addClass('buttonHover');
});
function navigate_tabs(container, tab)
{  
$(".b").css('display' , 'none');
$(".c").css('display' , 'none');
$(".a").css('display' , 'none');

$("#first-tab").removeClass('buttonHover');
$("#second-tab").removeClass('buttonHover');
$("#third-tab").removeClass('buttonHover');

$("#"+tab).addClass('buttonHover');
$("."+container).show('slow');
}
// ]]>
</script>
<script charset='utf-8' src='https://ardy-post.googlecode.com/svn/jquery1.2.6.js' type='text/javascript'/>
   

4. Sekarang masuk ke blogger Tata Letak
5. Klik Tambah Gadget dan pilih HTML / Javascript
6. Paste kode di bawah ini.
 
HTML

<div id="nulispostdotcom">
<a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">Tab 1</a>
<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">Tab 2</a>
<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">Tab 3</a>
<br clear="all" />
<div id="multitab" align="center">
<div class="a">
<em>B</em>logger adalah inspiasri semua tentang kita walaupun kamu beda ya kita harus cemungut ea !!  <br />  <br /> Thanks!

</div>
<div class="b"><em>L</em>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

</div>
<div class="c"><em>S</em>tarting in Juni 2013 Blogger began integrating user blogs with multiple country specific URL addresses i.e. exampleuserblogname.blogspot.com would be automatically redirected to exampleuserblogname.blogspot.ca in Canada, exampleuserblogname.blogspot.co.uk in the United Kingdom etc. </div>
</div> </div>
</div>
   

NB : Silahkan ganti sesuai selera..

7. Simpan HTML/Javascript. Itulah Tab Unik Jquery Widget Untuk Blogger semoga bisa bermanfaat. Dan silahkan ganti warna sesuai kreasi anda.