Tab View Scroll Show Hide dengan Jquery

Langsung saja, untuk membuat Tab View Scroll Show Hide dengan Jquery, ikuti langkah2 berikut ini:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>

#slick_area{background-color:#fff;padding:8px;margin:10px 0;line-height:18px}
#slick_area a{color:#000;text-decoration:none}
.slick_area a:hover{color:#fff}
ul.slick{margin:2px 5px 5px 5px;padding:0px}
ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}
ul.slick li:hover{border:1px dotted #f00}
ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}
.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}
.content-slick ul{margin:10px;padding:0}
.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}
.content-slick ul li a{text-decoration:none;color:black;display:block}

6. Setelah itu,carilah kode </head> setelah ketemu letakkan kode javascript dan jQuery berikut tepat diatasnya:

<script language='javascript' src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>

8. Simpan tempalate, dan masih ada lanjutanya, masuk ke Tata Letak/Rancangan, klik Add New Widget/Tambah Widget, lalu pilih HTML/Javascript. Kemudian letakan kode dibawah ini:

<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>

<div id="tabsatu" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Tiga
</div>

9. Sampai disini anda sudah bisa membuat jquery tab view scroll show hide widget. dan jangan lupa simpan.


Keterangan:
Kode bercetak tebal gantilah/isilah dengan widget yang sobat inginkan.
dan untuk kode CSS, silahkan diedit dan sesuaikan dengan template sobat.
Apabila ditemplate anda sudah ada jquery-1.3.2.min.js?? berarti untuk file.js'nya tidak perlu ditambahkan lagi.

Artikel Terkait: