-->

Sexy Slide Widget

One more widgets to the blogger who looks beautiful, widgets are usually referred to sexy slides. The way this widget is very easy installation, follow the steps below:
* First log into blogger
* Go to ---> Layout
* Click on Add a Gadget
* Select the Html / Javascript
* Copy And Paste the code below:
<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>

Now Click Save ...

Change Color Code Red With Links And Text Of Your Choice

Now look at your blog .... outcome

Posting Komentar

Label

Subscribe Our Newsletter