Cara Membuat jQuery Slick Tab di Blogger

Cara Membuat jQuery Slick Tab

Langkahnya sangat sederhana, pilih Dashboard lalu pilih Tata Letak / Rancangan, kemudian pilih tab Edit HTML, lalu seperti biasa contreng tulisan Exspand Widget Templates.

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

#slick_area {<br /> border:0px solid #585858;<br /> background-color:#ffffff;<br /> padding:8px;<br /> margin:10px 0;<br /> line-height:18px;<br /> }<br /> #slick_area a{<br /> color:#ffffff;<br /> text-decoration:none;<br /> }<br /> .slick_area a:hover{<br /> color:#FF0000;<br /> }<br /> ul.slick {<br /> margin:2px 5px 8px 0;<br /> padding:0px;<br /> }<br /> ul.slick li {<br /> list-style:none;<br /> display:inline;<br /> background-color:#ffffff;<br /> padding:5px 14px;<br /> text-decoration:none;<br /> font-size:10px;<br /> font-weight:bold;<br /> text-transform:uppercase;<br /> cursor:pointer;<br /> border:0px solid #585858;<br /> }<br /> ul.slick li:hover {<br /> color:#red;<br /> }<br /> ul.slick li.active {<br /> background-color:#ffffff;<br /> border:1px solid #585858;<br /> color:#222222;<br /> <br /> }<br /> .content-slick {<br /> background-color:#ffffff;<br /> border:0px solid #585858;<br /> color:#222222;<br /> min-height:40px;<br /> padding:7px 13px 5px;<br /> text-align:left;<br /> }<br /> .content-slick ul {<br /> margin:20px;<br /> padding:0;<br /> }<br /> .content-slick ul li {<br /> list-style:none;<br /> border-bottom:1px solid #222222;<br /> padding:1px;<br /> }<br /> .content-slick ul li:last-child {<br /> border-bottom:none;<br /> }<br /> .content-slick ul li:hover, .content-slick ul li a:hover {<br /> display:block;<br /> background-color:#ffffff;<br /> }<br /> .content-slick ul li a {<br /> text-decoration:none;<br /> color:black;<br /> display:block;<br /> }

Setelah itu, cari kode , 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(){ $('#tabdua, #tabtiga').hide(); $("ul.slick li").click(function () { $(".active").removeClass("active"); $(this).addClass("active"); $(".content-slick").slideUp(); var content_show = $(this).attr("title"); $("#"+content_show).slideDown(); }); }); </script>

Lalu Simpan Templates.

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)

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><br /> <div id="tabsatu" class="content-slick">Letakkan kode HTML/Javascript anda di Tab Satu<br /> </div><br /> <div id="tabdua" class="content-slick">Letakkan kode HTML/Javascript anda di Tab Dua<br /> </div><br /> <div id="tabtiga" class="content-slick">Letakkan kode HTML/Javascript anda di Tab Tiga<br /> </div>

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

sumber