-Jika anda Tertarik silahkan ikuti langkah-langkah di bawah ini;
-Pertama silahkan Login Ke Blogger
-Pada Dasbor Klik Tata Letak ->> Edit Html
-Kemudian Cari Code </head> Lalu Copy Code Di Bawah ini dan letakan di atasnya
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tab2, #tab3').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>
-Kemudian Copy Code Css Di bawah ini Dan Letakan Di atas Code ]]></b:skin> atau Buat Css Eksternal Blogger
#slick_area {
border:1px solid #585858;
background-color:#141414;
padding:8px;
margin:10px 0;
line-height:18px;
width:310px;
}
#slick_area a{
color:#FFF;
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:#000;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:1px solid #585858;
}
ul.slick li:hover {
color:#FFFF00;
}
ul.slick li.active {
background-color:#2F2F2F;
border:1px solid #585858;
}
.content-slick {
background-color:#2F2F2F;
border:1px solid #585858;
color:#dedede;
min-height:40px;
padding:7px 13px 5px;
text-align:justify;
}
.content-slick ul {
margin:2px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #585858;
padding:4px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#141414;
}
.content-slick ul li a {
text-decoration:none;
color:#FFF;
display:block;
}
#komentar, #terkait { display:none; }
-Selanjutnya Tambahkan Code Berikut ini Ke Bagian Body atau di bawah code <body>
<div id="slick_area">
<ul class="slick">
<li title="tab1" class="slick active">Terbaru</li>
<li title="tab2" class="slick">Komentar</li>
<li title="tab3" class="slick">Terkait</li>
</ul>
<div id="tab1" class="content-slick">
<ul>
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>
</div>
<div id="tab2" class="content-slick">
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>
</div>
<div id="tab3" class="content-slick">
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
<li><a href="#">Link 3.4</a></li>
</ul>
</div>
</div>
-Klik Simpan Template Jika Sudah Selesai
-Sumber Referensi:http://modification-blog.blogspot.com/2010/06/memahami-dan-membuat-jquery-slick-tab.html
30 komentar:
Keren mas template blog anda.
keren bos lain dari pada yg lain. saya orang baru neh butuh bnyak blajar..
kapan2 di coba2 neh,,,kayaknya menarik juga yah????
Blog yang minimalis ...
Keren ...
Sampai-sampai murid saya terobsesi ....
http://yanuarsulistyowibowo.net/
Gmn ya ...
Agar blog saya terlihat minimalis ....
Saya tunggu informasinya ...
Thanks
Terima kasih telah berbagi
Terima Kasih telah berbagi
alo salam kenal :)
template dan pengetahuannya keren :)
mampir balik sahabat & makasih atas tutorialnya. Salam
@All :Thx atas kunjungan dan komentarnya....
jgn lupa untuk mampir-mampir kemari lagi ya....
mantap....singkat tapi padat isi nya...salam persahabatan & txs telah berkunjung ....
http://ehm-kommunika.blogspot.com/
wah, menarik jg nih... mau nyoba ah...
Jadi malu nih ama master satu kita ini...xixixixi
salam bloglang anu ganteng kalem tea ah....
salam kenal yah sob \b/
@komunika:makasih sobat.....
@penghuni60:silahkan mas hehhee...
thks infony..
templateny keren buat sendiri ya mas..
Hmm..kek gini yg lagi kusuka, jquery, sayang...sidebarku mepet...hehehehhe...
kunjungan balik sambil baca2.
nice info nih sob. blognya keren
eren2 mster tutorilny mmntb
wah. .
mantap nih. .
Bagus tutornyaa//
Kira2 akan mempengaruhi loading Blog ga ya
Kapan2 boleh di coba ni menu slick dng jquerinya...sukses slalu.
weh weh,, mangstab tutornya sob, ntr tak coba lah.. blog ente keren euy!!
berkunjungan :) suka deh dgn tipsnya
bentuknya rapi. pas kayaknya buat sidebar..:)
sy sdh coba..widget keren & ber-animasi krn pake jquery..ati2 tpi kalo pake file javascript bisa bikin berat blog gan.. :)
Hemm..aq jg udah pake nih widget sob.. hrs diakui kl Jquery emang plg jago kl soal bkn tmpilan blog jd lbh elegan..!!!
Thank's da comment yak..!!!! visit me on http://kianhome.blogspot.com/
nice share sobat....
di save dulu ya...
templatenya keren....
Langsung coba ahhhh keren bro...
Nice artikel sobat.....
mantap...
Mantap kawan....di save dulu sob...:)
Posting Komentar