Advertisemen
Cara Membuat Tab View dengan Efek Animasi Gulung Jquery, back to tutorial blog, maaf neh sudah dua hari tidak mengUpdate blog, lagi sok sibuk di offline soalnya. Dan kebetulan juga ada sobat blogger yang request untuk membuatkan tabview ini, tp saya lupa siapa namanya. jadi pada kesempatan kali ini saya akan membahas lagi tentang cara membuat menu tab view, yang sebelumnya sudah saya share juga untuk Membuat Tab View/Widget Multi halaman Di blog, pada cara yang kedua ini pastinya akan lebih bagus, menarik dankeren tentunya, karena ditambah dengan sentuhan JQuery didalamnya. Sebagai contoh anda bisa melihatnya di sidebar sebelah kiri blog saya ini. Dan bila belum jelas juga anda bia melihatnya pada screenshot dibawah ini:
Demo/Sceenshot
Gimana masbro, keren kan tab view widgetnya?? selain itu tabview ini juga bisa membuat blog kita terkesan rapih. Yowes, ayo mulai saja cara membuatnya.
1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut:
#slick_area{background-color:#fff;padding:8px;margin:10px 0;line-height:18px}
#slick_area a{color:#000;text-decoration:none}
.slick_area a:hover{color:#fff}
ul.slick{margin:2px 5px 5px 5px;padding:0px}
ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}
ul.slick li:hover{border:1px dotted #f00}
ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}
.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}
.content-slick ul{margin:10px;padding:0}
.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}
.content-slick ul li a{text-decoration:none;color:black;display:block}
#slick_area a{color:#000;text-decoration:none}
.slick_area a:hover{color:#fff}
ul.slick{margin:2px 5px 5px 5px;padding:0px}
ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}
ul.slick li:hover{border:1px dotted #f00}
ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}
.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}
.content-slick ul{margin:10px;padding:0}
.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}
.content-slick ul li a{text-decoration:none;color:black;display:block}
6. Setelah itu,carilah kode
<script language='javascript' src='http://k-blogger.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>8. Simpan tempalate, dan masih lanjut neh sob... masuk ke Tata Letak/Rancangan, klik Add New Widget/Tambah Widget, lalu pilih HTML/Javascript. Kemudian letakan kode dibawah ini:
<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"> Taruhlah kode HTML/Javascript anda di Tab Satu </div> <div id="tabdua" class="content-slick"> Taruhlah kode HTML/Javascript anda di Tab Dua </div> <div id="tabtiga" class="content-slick"> Taruhlah kode HTML/Javascript anda di Tab Tiga </div>
9. Sampai disini anda sudah bisa membuat jquery tab view scroll show hide widget. dan jangan lupa simpan.
Keterangan:
Kode bercetak tebal gantilah/isilah dengan widget yang sobat inginkan.
dan untuk kode CSS, silahkan diedit dan sesuaikan dengan template sobat. dan bila tampilannya mau mirip sepeti blog saya, jgn lupa tinggalkan komentar, sebisa mungkin akan saya bantu.
Dan lagi, bila ditemplate anda sudah ada jquery-1.3.2.min.js?? berarti untuk file.js'nya tidak perlu ditambahkan lagi.
Begitulah kiranya Cara Membuat Tab View dengan Efek Animasi Gulung Jquery, selamat mencoba, semoga bermanfaat.
Article Information:
Description: Jquery Tab View Scroll Show Hide Widget
Reviewer: Viyan Pradita - Itemreviewed: Jquery Tab View Scroll Show Hide Widget - Rating: 4.5
Advertisemen