Float/ Static Menu untuk blogspot

admin — Tue, 08 Dec 2009 11:40:01 +0000

Kali ini kita akan membuat menu yang seperti itu lebih sederhanatapi tampilannya agak sederhana dan biasa saja cuma backgroundnya bisa kita ganti. Oks langsung ke sasaran…
1. Login, ke tata letak, klik edit html, centang expand template

2. Pasang kode CSS berikut di atas ]]>

body{

font-family:Georgia, “Times New Roman”, Times, serif;

margin-left:20px;

padding-left:10px;

border-left:1px solid #999999;

}

#slideMenu.closed{

left:-300px;

}

#slideMenu{

position:fixed;

left:0;

top:20px;

width:300px;

height:300px;

border:5px solid #416888;

border-left:0px;

background-color:#ffffff;

z-index:20;

}

#slideMenu a.toggleBtn{

position:absolute;

right:0;

top:0;

outline:none;

display:block;

height:115px;

width:30px;

border-width:1px 1px 1px 0px;

margin:0;

padding:0 5px 0;

color:#000;

text-decoration:none;

font:12px/25px Verdana, Arial, Helvetica, sans-serif;

background:url(http://i540.photobucket.com/albums/gg331/aanbae/vilatLogo.png) no-repeat;

z-index:20;

}

#slideMenu a.toggleBtnHighlight{

position:absolute;

right:0;

top:0;

outline:none;

display:block;

height:115px;

width:30px;

border-width:1px 1px 1px 0px;

margin:0;

padding:0 5px 0;

color:#000;

text-decoration:none;

font:12px/25px Verdana, Arial, Helvetica, sans-serif;

background:url() no-repeat 0px -88px;

z-index:20;

}

.content{

padding:5px;

z-index:20;
- Silahkan sobat ganti warna border dan backgroundnya, disini saya mencontohkan dengan warna border kebiruan (#416888;) dan warna background putih (#ffffff;), untuk kode warna lihat disini

3. Copy kode script dibawah ini dan letakkan di bawah ]]>

Internet online

Float/ Static Menu untuk blogspot