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>

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=2adalah 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.
    Blogger Comment
    Facebook Comment

17 comments:

  1. Keren. Mantab banget tutorialnya. Thank's Bro!

    ReplyDelete
  2. mksih jg apresiasinya sob :)

    ReplyDelete
  3. sob, mirip dengan yang di blog ini

    ReplyDelete
  4. kurang lebih sperti tu sob hasilnya...
    tinggal atur pewarnaannya aja..

    ReplyDelete
  5. :j: bagus juga ada upin ipinnya juga.betul 3x :i: :i: :i:

    ReplyDelete
  6. kembali lagi ka sini, mo nyoba bikin tab

    ReplyDelete
  7. asyik nich tutornya..
    bagus2 euy..
    bakal sering2 nich kesini..

    ReplyDelete
  8. @dunia blogger: silahkan sob..
    @soefyan: ditunggu sob..

    ReplyDelete
  9. kok gue gagal mulu sih malah ada tulisan The element type "head" must be terminated by the matching end-tag "".

    ReplyDelete
  10. gmn cara nambah tambah tabnya jadi 4 atau 5 sob...

    ReplyDelete
  11. mz,,mngkin saya orang awam yang mncoba buat blog tanpa modal apa pun....
    jd bsa d kcie tw lbih detail nya g???
    bsa lngsung d krim k email "farah.rahmah@yahoo.com"
    mkcie sblum nya :a:

    ReplyDelete
  12. keren nih. mantaaab! tapi ane punya yg lebih simpel sob! cuman add a new gadget copy paste code, langsung bisa. malah tabnya lebih banyak.

    ReplyDelete
  13. @kumpulan: mngkin ada kode yg kurang sob..check lgi..

    @ahmad: wach boleh dishare jg tu sob,mgkin brmnfaat buat blogger lainnya..oy yg dmksud otomatis dsni gimana qt tggal geser gadget aja ke tab itu tnpa buka kode segala sob..

    @islam+farah: yg prlu diketahui di tab ini..tab pertama dmulai dari gadget(0)liat gambar diatas..so,kalo pngen tabnya 4 berarti pada var endtabnya 3 kalo pengen tabnya 5 berarti var endtabnya 4..semoga bermanfaat..!!

    ReplyDelete
  14. aduuuhh....
    dari kmaren ampe sekarang, baru saat ini aku nemuin tab view yang ku cari...
    Thank's bangeeut ya...
    Nb: aku izin copy artikel nya ya... ^_^

    ReplyDelete
  15. tp ko ga bisa yaaa..... :((

    ReplyDelete
  16. mantap tutorialnya. trima kasih yang buesar.

    ReplyDelete