Home » » Tips Cara Paling Mudah Membuat Menu melayang Di Sebelah kiri Blog

Tips Cara Paling Mudah Membuat Menu melayang Di Sebelah kiri Blog

Ditulis Oleh Beny Setiawan pada Jumat, 27 April 2012

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(http://2.bp.blogspot.com/-nUGCKbZIyb4/Tvq4n0Ix8CI/AAAAAAAAACk/cPMmEKDYqto/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="http://1.bp.blogspot.com/-gPACiBoLjnI/TxPJ-2PsgfI/AAAAAAAAAIw/mQGIlkBHf_4/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 : Beny Setiawan ~ Pakbendot.com

Artikel Tips Cara Paling Mudah Membuat Menu melayang Di Sebelah kiri Blog ini diposting oleh Beny Setiawan 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::

Share this article :
Comments
0 Comments

0 komentar:

Poskan Komentar

Silahkan Komentar dengan Baik Dan benar