Trik Membuat jQuery Slick Tab pada Blogger

Beranda »

Trik »

Trik Blogger »

Trik Membuat jQuery Slick Tab pada Blogger »

Komentar

Trik Membuat jQuery Slick Tab pada Blogger

Hai Sobat Blogger! Menu-menu blog pada tab yang begitu banyak tentulah akan menghabiskan tempat pada blog sobat blogger. Nah kali ini Aku akan share trik membuat jQuery Slick Tab pada blogger sehingga menghemat tempat di blog sobat. Langkah-langkahnya sangat sederhana kok!

Langkah-langkah membuat jQuery Slick Tab Pada Blogger:

1. Loggin pada blog sobat

2. Pilih Template -> Edit Html -> Centang Expand Template Widget

3. Letakkan kode berikut diatas kode ]]></b:skin> (Search pakai Ctrl+F)

#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}

4. Letakkan kode berikut diatas kode </head>

5. Simpan template sobat blogger
6. Untuk menampilkan pada widget pilih Tata letak -> Add gadget -> Html/Java script trus masukkan kode berikut

Simpan widget sobat, nah sobat sekarang memiliki menu widget yang menghemat tempat. Tampilannya dapat dilihat seperti pada blog saya ini tepat di bawah blog ini.

Referensi: http://pelajaran-blog.blogspot.com

Posting Komentar

Terima kasih telah berkunjung! Jangan lupa tinggalkan komentar yang baik dan sopan ya, tetapi maaf tidak menerima komentar anonim (NOT ALLOWED ANONYMOUS COMMENTS), silahkan pilih nama/url (PLEASE SELECT NAME/URL)!