Tips Cara Paling Mudah Membuat Menu melayang Di Sebelah kiri Blog

Oke Sob, Langsung Aja Kali Ini Pak Bendot's Ingin Bagi-bagi tips tentang cara Membuat menu Melayang di sisi Kiri blog

Mau tahu cara membuat menu melayang ini? lihat demonya di sini. Ikuti langkah-langkah berikut ini:
1.Klik Rancangan/Tata Letak lalu Klik Tambah Gadget dan pilih HTML/JavaScript

2.Copy dan Paste Kode Berikut ini

<script src="http://sidebarmenu.googlecode.com/files/sidebarprototype.js" type="text/javascript"></script>
<script src="http://sidebarmenu.googlecode.com/files/sidebareffets.js" type="text/javascript"></script>
<script src="http://sidebarmenu.googlecode.com/files/sidebarmenu.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibnf-QCJLYZoM1c31eI3uDVZ9lhtE66NUcUhBs6qWGchshuSsZszBncVo3zrVkHPTCOlOl81FNTx53028m1S99z0ZYsNTDq1IjTEafpP8tcFS4YNfOIngoxG6Af5N2Y2MlSk_bL6V0PajX/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZQ3uowX2X_G6L-a1TfXEwOskY1HkWxWrvK_61GYT25HgK2y388jR-ll-5PtQ3-9iaOLFP808jde7siRRvIFXLvE46npcrHzSYS2Dw8CqlxP-8ImrAF_a8DSCN2z2Hh9HAkvX9txb9O3oK/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>






Silahkan ganti kode berikut sesuai dengan keinginan Anda:

Link One
Link Two
Link Three
Link Four

Keterangan:
# = Alamat Link
Link One/Two/Three/Four= Nama Link

Sumber :fandimin.blogspot.com/

DiPosting Oleh : pakbendot.com ~ Pakbendot.com

Artikel Tips Cara Paling Mudah Membuat Menu melayang Di Sebelah kiri Blog ini diposting oleh pakbendot.com pada hari Jumat, 27 April 2012. Terimakasih atas kunjungan Anda, serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.Wassalam..

:: HOME::