Cara Termudah Membuat Tab Animasi Otomatis

Tutorial berikut merupakan perkembangan dari JQuery yang sekarang ini sudah banyak dibahas diberbagai blog tutorial. Oleh karena itu, saya ingin sekali share informasi ini sama Anda mungkin saja Anda lagi mencari info ini atau dengan berkunjungnya Anda pada Blog ini Akhirnya jadi tahu tentang informasi ini.

Artikel berikut diambil dari bloggertuts dan saya mencoba men-share kan trik ini dalam bahasa indonesia. Dan semoga sangat bermanfaat untuk Anda yang selalu haus akan tips dan trik baru dalam modifikasi blog. Anda juga bisa membaca cara membuat tab view yang lain di (Baca: Cara Membuat Tab View Versi 1 dan Cara Membuat Tab View Versi 2)

Langkah2nya sebagai berikut:

• Login ke Blogger.com
• Kemudian Tata Letak
• Pilih Edit HTML
• Centang Expand Widget
• Copas kode berikut diatas kode ]]></b:skin>

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF urlundefinedhttp://sites.google.com/site/rasiqzonetwork/image/tabvieworange.png) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF urlundefinedhttp://sites.google.com/site/amatullah83/bg/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;     
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 urlundefinedhttp://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

• Berikutnya, Anda harus menginstall JQuery JavaScript pada blog Anda, Jika Anda sudah menginstallnya Anda bisa melewati step ini. Untuk yang belum, copas kode berikut diatas kode </head> 

<!-- jQuery Call -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<!-- End of jQuery Call -->

• Kemudian copas kode berikut diatas kode </head> 

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"></script>

• Selanjutnya Save Template
• Untuk mengganti warna (Baca: Kode HTML Warna).

Note:

• Ganti kode warna merah sesuai keinginan Anda, Berikut penjelasan detailnya:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

var starttab=0; adalah pemulaan nomer widget yang akan dipilih untuk dimasukkan pada tab, ini dimulai dari 0. var endtab=2;  adalah nomer widget yang terakhir yang akan Anda masukkan pada Tab.  var sidebarname="sidebar"; adalah nama ID sidebar Anda, umumnya semua blog sama. Tapi mungkin template Anda ID sidebarnya beda jadi disesuaikan. 

Untuk mengetahui ID sidebar tamplate Anda, pada layout > Edit HTML > Anda cari kode berikut sidebar-wrapper  maka Anda akan mendapatkan kode diabawah ini:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

Kode berwarna merah adalah ID sidebar Anda.
Untuk melihat hasilnya Klik saja Demonya Disini 

Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.