The Personal Blog

Mengenai Saya

Foto saya
Manado, sulawesi utara, Indonesia
Hoby ngeblog,Main Band,Adventure dan Billiard..

Jquery Slick Tab Menu

Di Bawah Ini ada Cara Mudah Untuk Membuat Slick Tab Jquery di Blogger





-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

ARTIKEL TERKAIT



30 komentar:

Edwin Oktavianto mengatakan...

Keren mas template blog anda.

anaknegerisendir mengatakan...

keren bos lain dari pada yg lain. saya orang baru neh butuh bnyak blajar..

ARaLL mengatakan...

kapan2 di coba2 neh,,,kayaknya menarik juga yah????

Widya School mengatakan...

Blog yang minimalis ...
Keren ...
Sampai-sampai murid saya terobsesi ....
http://yanuarsulistyowibowo.net/

Gmn ya ...
Agar blog saya terlihat minimalis ....

Saya tunggu informasinya ...

Thanks

Batara Emas mengatakan...

Terima kasih telah berbagi

Batara Emas mengatakan...

Terima Kasih telah berbagi

Let's Share Together mengatakan...

alo salam kenal :)
template dan pengetahuannya keren :)

BRI Jakarta Veteran mengatakan...

mampir balik sahabat & makasih atas tutorialnya. Salam

Botzzz mengatakan...

@All :Thx atas kunjungan dan komentarnya....

jgn lupa untuk mampir-mampir kemari lagi ya....

ehm kommunika mengatakan...

mantap....singkat tapi padat isi nya...salam persahabatan & txs telah berkunjung ....
http://ehm-kommunika.blogspot.com/

penghuni60 mengatakan...

wah, menarik jg nih... mau nyoba ah...

Beben mengatakan...

Jadi malu nih ama master satu kita ini...xixixixi
salam bloglang anu ganteng kalem tea ah....
salam kenal yah sob \b/

Botzzz mengatakan...

@komunika:makasih sobat.....
@penghuni60:silahkan mas hehhee...

Caffe Soft mengatakan...

thks infony..
templateny keren buat sendiri ya mas..

Belantara Indonesia mengatakan...

Hmm..kek gini yg lagi kusuka, jquery, sayang...sidebarku mepet...hehehehhe...

galoga mengatakan...

kunjungan balik sambil baca2.
nice info nih sob. blognya keren

Rizky2009 mengatakan...

eren2 mster tutorilny mmntb

Dan's Blog mengatakan...

wah. .
mantap nih. .

eko susilo mengatakan...

Bagus tutornyaa//

Media Semarang mengatakan...

Kira2 akan mempengaruhi loading Blog ga ya

ChugyGogog mengatakan...

Kapan2 boleh di coba ni menu slick dng jquerinya...sukses slalu.

topjer mengatakan...

weh weh,, mangstab tutornya sob, ntr tak coba lah.. blog ente keren euy!!

xDer mengatakan...

berkunjungan :) suka deh dgn tipsnya

TUKANG CoLoNG mengatakan...

bentuknya rapi. pas kayaknya buat sidebar..:)

ANDI WONG mengatakan...

sy sdh coba..widget keren & ber-animasi krn pake jquery..ati2 tpi kalo pake file javascript bisa bikin berat blog gan.. :)

Kian Coy mengatakan...

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/

Koko Bota mengatakan...

nice share sobat....
di save dulu ya...
templatenya keren....

Edit Css mengatakan...

Langsung coba ahhhh keren bro...

Blogger Manado mengatakan...

Nice artikel sobat.....
mantap...

Bang Koko mengatakan...

Mantap kawan....di save dulu sob...:)

Posting Komentar