Cara Membuat Tab View dengan Efek Animasi Gulung Jquery

Beberapa hari lalu di facebook page Pelajaran Blog sudah memberikan bocoran 'membuat show hide tab view widget for blogger'.
Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Lihat screenshot pic nya gan ato sobat bisa juga lihat widgetnya di sidebar pada blog ini:

Yup,tab view yang diciptakan dapat menyembunyikan widget pada sidebar,ini sangat bermanfaat sekali untuk menambah tampilan blogger agar lebih menarik dan akan terkesan rapi nantinya.

Langkah membuatnya sangat mudah sob,tinggal ikuti aja langkah-langkah dibawah ini ya

Langkah Cara Membuat jQuery Slick Tab pada Blogger

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

(1)



(2)



(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.


#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;

}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}

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


<script language='javascript' src='http://pelajarandashblogdotblogspotdotcom.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>

Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:


<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">
Letakkan kode HTML/Javascript anda di Tab Satu
</div>

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

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

Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat ,moga berhasil and selamat ngulik kodenya ya :D

ket:kode bercetak tebal gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.