Menambah Sexy Sliding Sidebar di Blogspot

Menambah Sexy Sliding Sidebar di Blogspot

Posted by rike on 0

Sexy sliding Sidebar ini adalah alternatif lain pengganti Navigation Menu biasa, nah bila blog anda belum mempunyai Navigation Menu ataupun tidak ingin memakai Navigation Menu karena satu dan lain hal, Sexy sliding sidebar ini bisa menjadi alternatifnya.









Live Demo





Sekarang Mari Lihat Bagaimana Cara Memasangnya ....

• Pertama login ke blogger


• Pergi ke ---> Tata Letak


• Klik Di Tambah Gadget


• Pilih Html / Javascript


• Dan Copy Paste Kode yang dibawah ini :

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/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:#FFFFFF;

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 10px 3px 10px;

padding:2px;

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:0px;

width:100%;

}

#sideBar li a:hover{

color:#FFFFFF;

text-decoration:underline;

}

#sideBar{

position: fixed;

width: auto;

height: auto;

top: 140px;

left:0px;

background-image:url(http://i49.tinypic.com/121abrq.jpg);

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>side<span>bar</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://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>

</div>

Sekarang Klik Simpan ...



Rubah Kode warna Merah Dengan Link Dan Teks Dari Pilihan Anda



Sekarang lihat hasilnya Blog Anda....