Sliding TabView jQuery

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Tab View jQuery dengan Icon. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

Sliding TabView jQueryKlik disini untuk melihat demo Sliding TabView jQuery

1. Masuk ke akun blogger anda
2. Klik rancangan, kemudian Edit HTML
3. Pada Edit HTML, centang Expand Template Widget
   Expand Template Widget
4. Copy kode CSS di bawah ini

/* Begin Sliding TabView jQuery */ 
.tabbed_content {
 background-color: #000000;
 width: 620px; 
}
.tabs {
 height: 62px;
 position: relative;
}
.tabs .moving_bg {
 padding: 15px;
 background-color:#7F822A;
 background-image:url('http://i766.photobucket.com/albums/xx310/Ikhfar/th_arrow_down_green.gif');
 position: absolute;
 width: 125px;
 z-index: 190;
 left: 0;
 padding-bottom: 29px;
 background-position: bottom left;
 background-repeat: no-repeat;
}
.tabs .tab_item {
 display: block;
 float: left;
 padding: 15px;
 width: 125px;
 color: #ffffff;
 text-align: center;
 z-index: 200;
 position: relative;
 cursor: pointer;
}
.tabbed_content .slide_content {
 overflow: hidden;
 background-color: #000000;
 padding: 20px 0 20px 20px;
 position: relative;
 width: 600px;
}
.tabslider {
 width: 5000px;
}
.tabslider ul {
 float: left;
 width: 560px;
 margin: 0px;
 padding: 0px;
 margin-right: 40px;
}
.tabslider ul a {
 color: #ffffff;
 text-decoration: none;
}
.tabslider ul a:hover {
 color: #aaaaaa;
}
.tabslider ul li {
 padding-bottom: 7px;
}
/* End Sliding TabView jQuery */ 

5. Kemudian letakkan di atas kode

</b:skin>

6. Tambahkan framework jQuery.
   INGAT, jika pada template anda sudah terdapat framework jQuery, maka kode di bawah ini TIDAK PERLU di tambahkan.
   Jika belum terdapat framework jQuery, maka copy kode di bawah ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

kemudian letakkan di atas

</head>

7. Selanjutnya tambahkan script di bawah ini

<script src='http://dl.dropbox.com/u/22738692/SlidingTabViewjQuery/script.js' type='text/javascript'/>

8. Kemudian letakkan di atas

</head>

9. Simpan template
10. Kemudian masuk Elemen Laman, dan pilih Tambah Gadget
11. Setelah itu pilih HTML/Javascript
12. Copy kode ini pada kotak kontent

<div class='tabbed_content'>
<div class='tabs'>
<div class='moving_bg'>&nbsp;</div>
<span class='tab_item'>Judul Tab 1</span>
<span class='tab_item'>Judul Tab 2</span>
<span class='tab_item'>Judul Tab 3</span>
<span class='tab_item'>Judul Tab 4</span>
</div>
<div class='slide_content'>
<div class='tabslider'>
<ul>
<li><a href=''>Isi Tab 1</a></li>
<li><a href=''>Isi Tab 1</a></li>
<li><a href=''>Isi Tab 1</a></li>
<li><a href=''>Isi Tab 1</a></li>
<li><a href=''>Isi Tab 1</a></li>
</ul>
<ul>
<li><a href=''>Isi Tab 2</a></li>
<li><a href=''>Isi Tab 2</a></li>
<li><a href=''>Isi Tab 2</a></li>
<li><a href=''>Isi Tab 2</a></li>
<li><a href=''>Isi Tab 2</a></li>
</ul>
<ul>
<li><a href=''>Isi Tab 3</a></li>
<li><a href=''>Isi Tab 3</a></li>
<li><a href=''>Isi Tab 3</a></li>
<li><a href=''>Isi Tab 3</a></li>
<li><a href=''>Isi Tab 3</a></li>
</ul>
<ul>
<li><a href=''>Isi Tab 4</a></li>
<li><a href=''>Isi Tab 4</a></li>
<li><a href=''>Isi Tab 4</a></li>
<li><a href=''>Isi Tab 4</a></li>
<li><a href=''>Isi Tab 4</a></li>
</ul>
</div>
<br style='clear: both' />
</div>
</div>

13. Kemudian simpan

Anda bisa mengganti kode pada langkah 12 seperti

Judul Tab 1
Judul Tab 2
Judul Tab 3
Judul Tab 4
Isi Tab 1
Isi Tab 2
Isi Tab 3
Isi Tab 4

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait