Untuk tutorial kali ini, sy akan berkongsi cara membuat sexy sliding bar menu. Sexy sgt ke sampai nama pun sexy? Jwpnnya sy pun tdk tahu. haha.. Sidebar ini diberi nama Sexy Sliding Bar Menu. Nak Tahu Seksi ke x seksi cuba lah tgk di sebelah kiri http://syoknyerblogginglist.blogspot.com/

1 Pergi ke Dashboard > Design > Page Elements > Add a Gadget.

2 Masukkan koding dibawah didlam Html/javascript gadget
<script src="https://sites.google.com/site/syoknyerblogging/try/prototype.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/syoknyerblogging/try/effects.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/syoknyerblogging/try/side-bar.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://4.bp.blogspot.com/_8X8A6_fKD8A/S9CFbXuUDgI/AAAAAAAAC-Y/yr2cyLZgCV0/s320/left.collapse.border.gif);
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://2.bp.blogspot.com/_8X8A6_fKD8A/S8mQ8Ig6q3I/AAAAAAAAC9o/rnKICWGwLls/s320/sidebarcollapse.gif" title="sideBar" /></a>
</div>

3 Editkan Link 1,2,3 mengikut selera anda sendiri. Dan Save

4 Selamat Mencuba (^^,)










Share Gadget
Stumble
Delicious
Technorati
Twitter
Facebook
Blog
Gadget


Jika anda sukakan article ini,linkkan kembali...



Dicatat oleh Thalhah Amir on Jumaat, 10 Disember 2010

2 ulasan

  1. maxpayne Says:
  2. memang sexy. dah lame aku cari benda ni. thanks.

    5 Senjata Rahsia Blogger

     
  3. Thalhah Amir Says:
  4. sama2. (^^,)

     

Catat Ulasan

Cari Blog Ini

Pengikut

Pengikut Facebook

Informasi

SyoknyerBlogging adalah sebuah blog tutorial untuk bloggers yang menggunakan platform blogspot. Semua tutorial disini adalah daripada pengalaman sy berblogging selama 3 tahun. Sy bukan untuk mengajar tetapi lebih kepada berkongsi. Harap anda gembira disini. (^^,)

Mengenai Saya

Foto saya
Sy sangat sukakan web. Seorang Programmer. Pemilik Syoknyerblogging
Copyright 2010 | SyoknyerBlogging | Belajar Blogging Dalam Bahasa Melayu
Zengard Template designed by the Jinsona Design and XML coded by CahayaBiru.com