Cara Membuat Sliding Tab Menu Untuk Side Bar 2

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

Cara Membuat Tab Stuktur Menu 0

Sebelumnya saya telah memposting tentang Cara Membuat Menu Multi Kolom dengan Tab Slide mode yang merupakan salah satu cara untuk menggurangi penggunaan space halaman yang terlalu besar atau memanfaatkan lahan yang sempit untuk menu-menu yang semakin banyak yang dikarnakan semakin banyaknya postingan.Nah kali ini saya ingin berbagi tentang Cara Membuat Tab Struktur Menu (Lihat Demo) yang fungsinya sama dengan postingan Sebelunya (Cara Membuat Menu Multi Kolom dengan Tab Slide mode).

dan 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 type="text/javascript">

$(document).ready(function() {


//Get all the LI from the #tabMenu UL
$('#tabMenu > li').click(function(){

//perform the actions when it's not selected
if (!$(this).hasClass('selected')) {

//remove the selected class from all LI
$('#tabMenu > li').removeClass('selected');

//Reassign the LI
$(this).addClass('selected');

//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass('mouseover');
$(this).removeClass('mouseout');

}).mouseout(function() {

//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');

});

//Mouseover with animate Effect for Category menu list
$('.boxBody #category li').click(function(){

//Get the Anchor tag href under the LI
window.location = $(this).children().attr('href');
}).mouseover(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('#.boxBody li').click(function(){
window.location = $(this).children().attr('href');
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});

});

</script>

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

body{font-family:arial;font-size:10px;color:#ccc;background-color:#555}
a {color:#ccc;text-decoration:none;}
a:hover {color:#ccc;text-decoration:none}
#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:30px;cursor:pointer;cursor:hand}

li.comments {background:url(http://tab-menu.googlecode.com/files/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(http://tab-menu.googlecode.com/files/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(http://tab-menu.googlecode.com/files/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://tab-menu.googlecode.com/files/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://tab-menu.googlecode.com/files/tabRandom.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(http://tab-menu.googlecode.com/files/boxTop.png) no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://tab-menu.googlecode.com/files/boxBottom.png) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://tab-menu.googlecode.com/files/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}

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 class="box">
<ul id="tabMenu">
<li class="posts selected"></li>
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>
<div class="boxTop"></div>

<div class="boxBody">

<div id="posts" class="show">

<ul>
<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="comments">
<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="category">
<ul>
<li>Cara Mengganti Tanggal Postingan dg Icon Calendar</li>
<li class="last">Cara Menampilkan Postingan Terbaru Pada blogspot</li>
</ul>
</div>

<div id="famous">
<ul>
<li>Simple JQuery Modal Window Tutorial.</li>
<li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
<li>Navigation List menu + Jquery Animate Effect Tutorial.</li>

<li class="last">Exclusive RSS Icons from Queness.</li>
</ul>
</div>

<div id="random">
<ul>
<li>50 Monochromatic Website Designs.</li>
<li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
<li>Simple JQuery Modal Window Tutorial.</li>

<li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
<li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
<li>Exclusive RSS Icons from Queness.</li>
<li>New Smashing Freebies For Designers and Bloggers.</li>
<li class="last">Food Plates and Creative Dishware Designs.</li>
</ul>
</div>


</div>

<div class="boxBottom"></div>

</div>

<div style="font-size:15px;color:#ccc">Terimakasih anda telah berkunjung ke </div>
<a href="http://bambangpage.blogspot.com/">bambangpage.blogspot.com</a> | <a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-tab-stuktur-menu.html">Kembali ke Tutorial</a>

Edit tulisan dengan menu anda ....
Lihat Demo

Cara Membuat Menu Multi Kolom dengan Tab Slide mode 2

Jika Anda memilki blog dengan ruangan yang cukup Sempit atau semakin sempit dengan banyak aksesories blog atau jumlah postingan yang semakin banyak,Menu Multi Kolom dengan Tab Slide Mode ini bisa menjadi solusi anda dalam membuat banyaknya menu didalam satu atau beberapa kolom Lihat contoh gambar di bawah ini (Contoh demo klik disini )

klik gambar untuk memperbesar

Adapun Langkah-langkah untuk membuatnya adalah :

1. Login ke blogger anda
2. Layout-->Edit HTML
4. Masukan kode dibawah ini sebelum kode </head>

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

</script>

5. Kemudian masukan kode Css dibawah ini Diatas kode ]]></b:skin>

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 50%; width of menu*/
border-top: 1px solid navy; /*navy border*/
background: black url(http://tab-menu.googlecode.com/files/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(http://tab-menu.googlecode.com/files/indentbg2.gif) center center repeat-x;
}


.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}

6. Dan Masukan Kode di bawah ini di tempat dimana anda ingin menempatkan menu multi kolom

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="dog1">Wisata</a></li>
<li><a href="#" rel="dog2">Hotel</a></li>
<li><a href="#" rel="dog3">Gallery</a></li>
<li><a href="http://bambangpage.blogspot.com/">Bambangpage</a></li>
</ul>
<br style="clear: left"/>
</div>

<ilayer clip="0,0,430,150" width="430" name="scroll1" height="150">
<layer width="430" name="scroll2" height="150" bgcolor="white">
<div id="scroll3" style="width:430px;height:150px;background-color:white;overflow:scroll">



<div style="border:1px solid gray; width:400px; height: 500px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
1.<a href="http://cilimoes.blogspot.com/2009/01/gedung-perundingan-linggarjati.html">
Gedung Perundingan Linggarjati</a><br/>2.<a href="http://cilimoes.blogspot.com/2009/01/linggarjati-indah.html"> Linggarjati Indah<a/><br/>3.
<a href="http://cilimoes.blogspot.com/2009/01/sangkan-hurip_29.html">Sangkan Hurip</a><br/>4.<a href="http://cilimoes.blogspot.com/2009/01/desa-sitonjul.html?zx=82b3e5368c8530bb"> Desa Sitonjul</a><br/> 5.<a href http://cilimoes.blogspot.com/2009/01/desa-setia-negara.html> Desa Setia Negara</a> <br/>6.<a href="http://cilimoes.blogspot.com/2009/01/telaga-remis_29.html?zx=86268a3f4fbf6003"> Telag Remis</a><br/> 7.<a href="http://cilimoes.blogspot.com/2009/01/cibulan_29.html?zx=faba5971ad24039f"> Cibulan</a><br/>8.<a href="http://cilimoes.blogspot.com/2009/01/curug-sidomba.html?zx=7998bfb70fd115b3"> Curug Sidomba</a><br/>9.<a href="http://cilimoes.blogspot.com/2009/01/waduk-darma_29.html"> Waduk Darma</a><br/>10.<a href="http://cilimoes.blogspot.com/2009/01/taman-purbakala-cipari.html?zx=5ef72d6ecc65db2b"> Taman Purbakala Cipari</a><br/>11.<a href="http://cilimoes.blogspot.com/2009/01/balong-darmaloka_29.html?zx=f5ce2c693d078d0e"> Balong Darmaloka</a><br/>12.<a href=""></a><br/>13.<a href=""></a><br/>14.<a href=""></a><br/>15.<a href=""></a>
</a></a></div>

<div id="dog2" class="tabcontent">
1.<a href="">Cilimus</a><br/>2.<a href="">Cigandamekar</a><br/>3.<a href="">Jalaksana</a><br/>4.<a href="">Kuningan</a><br/>5.<a href="">Cirebon</a><br/>6.<a href=""></a><br/>
</div>

<div id="dog3" class="tabcontent">
<a href="">Cilimus</a><br/><a href="">Cigandamekar</a><br/><a href="">Kuningan</a><br/><a href="">Cirebon</a><br/>
</div>


</div>

</div>
</layer>
</ilayer>

<script>


var nsstyle='display:""'
if (document.layers)
var scrolldoc=document.scroll1.document.scroll2
function up(){
if (!document.layers) return
if (scrolldoc.top<0)
scrolldoc.top+=10
temp2=setTimeout("up()",50)
}
function down(){
if (!document.layers) return
if (scrolldoc.top-150>=scrolldoc.document.height*-1)
scrolldoc.top-=10
temp=setTimeout("down()",50)
}

function clearup(){
if (window.temp2)
clearInterval(temp2)
}

function cleardown(){
if (window.temp)
clearInterval(temp)
}

</script>
<br/><span style="&{nsstyle};"><a onmouseout="clearup()" href="#" onmousedown="up()" onclick="return false"
onmouseup="clearup()"></a> <a
onmouseout="cleardown()"
onmousedown="down()" href="#" onmouseup="cleardown()" onclick="return false"></a><a href="#" onclick="if (document.layers) scrolldoc.top=0;return false"></a><a href="#" onclick="if (document.layers) scrolldoc.top=scrolldoc.document.height*(-1)+150;return false"></a></span>







<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>

edit kode di atas dan ganti dengan menu anda selesai...
jika ada pertanyaan silahkan tulis di komentar dan semoga bermanfaat