Jumat, 25 Desember 2009

Cara Membuat Sliding Tab Menu Untuk Side Bar

Seperti Dua postingan terdahulu yaitu Cara Membuat Tab Struktur Menu dan Cara Membuat Menu Multi Kolom dengan Tab Slide mode.Kali ini saya akan berbagi tentang Cara Membuat Sliding Tab Menu Untuk Side Bar (Lihat Demo ) yang fungsinya tentu saja sama dengan kedua artikel tadi.


Adapun langkah-langkahnya sebagai berikut :

1.Seperti biasa anda harus log in dulu ke blogger
2.Pilih layout
3.Kemudian pilih edit HTML
4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
5.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>


<script src='http://tab-menu.googlecode.com/files/jquery-1.3.1.min.js ' type='text/javascript'/>
<script src='http://tab-menu.googlecode.com/files/jquery.scrollTo.js' type='text/javascript'/>

<script>



$(document).ready(function() {

//Get the height of the first item
$('#mask').css({'height':$('#panel-1').height()});

//Calculate the total width - sum of all sub-panels width
//Width is generated according to the width of #mask * total of sub-panels
$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));

//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
$('#panel div').width($('#mask').width());

//Get all the links with rel as panel
$('a[rel=panel]').click(function () {

//Get the height of the sub-panel
var panelheight = $($(this).attr('href')).height();

//Set class for the selected item
$('a[rel=panel]').removeClass('selected');
$(this).addClass('selected');

//Resize the height
$('#mask').animate({'height':panelheight},{queue:false, duration:500});

//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
$('#mask').scrollTo($(this).attr('href'), 800);

//Discard the link default behavior
return false;
});

});
</script>



6.Untuk css code anda bisa menggunakan code css di bawah ini copy dan pastekan diatas
]]></b:skin>



#scroller-header a {
text-decoration:none;
color:#867863;
padding:0 2px;
}

#scroller-header a:hover {
text-decoration:none;
color:#4b412f
}

a.selected {
text-decoration:underline !important;
color:#4b412f !important;
}

#scroller-header {
background:url(http://tab-menu.googlecode.com/files/header.gif) no-repeat;
width:277px;
height:24px;
padding:35px 0 0 15px;
font-weight:700;
}

#scroller-body {
background:url(http://tab-menu.googlecode.com/files/body.gif) no-repeat bottom center;
width:277px;
padding-bottom:30px;
}

#mask {
width:250px;
overflow:hidden;
margin:0 auto;
}

#panel {

}

#panel div {
float:left;

}

/* Extra styling for each panel*/

#panel ul {
list-style:none;
margin:0 5px;
padding:0;
}
#panel ul li {
padding:5px;
color:#557482;
border-bottom:1px dotted #ccc;
}

#panel ul li.last {
border-bottom:none !important;
}
#panel a {
text-decoration:none;
color:#557482;

}

#panel a:hover {
text-decoration:none;
color:#282828;

}


anda bisa mengedit kode css diatas sesuai dengan yang anda inginkan jika diperlukan.


7. Dan untuk kode html,letakan kode html dibawah ini dimana anda ingin menampilkan Tab Stuktur Menu tersebut


<div id="scroller-header">
<a href="#panel-1" rel="panel" class="selected">Populars</a>
<a href="#panel-2" rel="panel">Comments</a>
<a href="#panel-3" rel="panel">Recents</a>
<a href="#panel-4" rel="panel">Categories</a>
</div>
<div id="scroller-body">
<div id="mask">
<div id="panel">

<div id="panel-1">
<ul>
<li><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-tab-stuktur-menu.html">Cara Membuat Tab Struktur Menu</a></li>
<li><a href="http://bambangpage.blogspot.com/2009/11/cara-membuat-menu-multi-kolom-dengan.html">Cara Membuat Menu Multi Kolom dengan Tab Slide mode</a></li>
<li><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-jquery-slideshow-dengan.html">Cara Membuat Jquery Slideshow Dengan Cycle Plug In</a></li>
<li>Cara Membuat Simple JQuery Image Slide Show dengan Semi Transparent Caption</li>
<li>Cara Menghindari Spasi Di atas Table Di Postingan Blogger</li>
<li>Cara Membuat Menu Multi Kolom dengan Tab Slide mode</li>

<li>Cara Membuat News Update dengan gAjax RSS Ticker Pada Blog Atau Website anda</li>
<li>Cara Menambahkan Icon Atau image Disamping Title Sidebar</li>
<li>Cara Membuat Facebox Image Viewer</li>
<li>Cara Membuat Tulisan Berjalan Pada Address Bar</li>
<li class="last">Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
</ul>

</div>
<div id="panel-2">
<ul>
<li>Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
<li>Cara Membuat Kotak Komentar Blogger Dibawah Postingan</li>
<li>10 jQuery and non-jQuery javascript Rich Text Editors</li>
<li class="last">Mengganti Tulisan "Older Post / Newer Post" atau "Posting Lama / Posting Baru"</li>

</ul>
</div>
<div id="panel-3">
<ul>
<li>Cara Mengganti Tanggal Postingan dg Icon Calendar</li>
<li class="last">Cara Menampilkan Postingan Terbaru Pada blogspot</li>
</ul>
</div>
<div id="panel-4">

<ul>
<li>ajax</li>
<li>browser</li>
<li>cms</li>
<li>css-html</li>
<li>design</li>

<li>font</li>
<li>freebies</li>
<li>graphic</li>
<li>icon</li>
<li>inspiration</li>
<li>javascript</li>

<li>logo</li>
<li>photography</li>
<li>photoshop</li>
<li>php</li>
<li>seo</li>
<li>template</li>

<li>tips</li>
<li>tools</li>
<li>trend</li>
<li>tutorial</li>
<li>usability</li>
<li>wallpaper</li>

<li class="last">wordpress</li>
</ul>
</div>
</div>
</div>
</div>

<div style="font-size:15px;color:#888">Terimakasih Atas Kunjungannya</div>
<a href="bambangpage.blogspot.com">bambangpage.blogspot.com</a> | <a href="">Kembali Ke TUtorial</a>

Edit Tulisan dengan menu anda ...
Lihat Demo
Posted by: Bambang PageBambang PageUpdated at : 01.55


Jika Anda Menyukai Artkel Seperti Di atas,Link back ke artikel ini dengan mengcopy salah satu kode di bawah ini

URL untuk Postingan:


HTML Link Code:

BB (forum) link code:



2 komentar:

  1. mas cara merubah widthnya gimana ya...??

    BalasHapus
  2. @untuk Islamic Line : kalau mau merubah width,langsung aja pada bagian code css sliding tab menu yaitu bagian head,body,dan mask sesuaikan lebar,margin , padding serta image/background

    BalasHapus

 

Copyright 2011 Bambang's Page is proudly powered by blogger.com | Design by Bambang's Page | Find us on Google+

Postingan Baru

Komentar Baru

Postingan Acak