Social tools by Sliding sidebar

[Limode]

Add social tools to your site by Sliding sidebar :

Screenshot Preview :

http://img22.imageshack.us/img22/8713/56223163.jpg


Full demo in Default Style see Screenshot



First download attachments and unzip.
*upload all files in images folder to your images folder.
*upload js folder to your root forums
Second install .
Third design new background,buttons and icons or contact me. I will design for you !

*Tested at IE6+,FF and Opera*

Templates edit :


In Header template find :
$ad_location[ad_header_end]
Add after :
<div id="sideBar">

<a href="#" id="sideBarTab"><img src="images/slide-button.png" alt="sideBar" title="sideBar" /></a>

<div id="sideBarContents" style="width:0px;">
<div id="sideBarContentsInner">
<h2>Sitename&nbsp;<span>in</span></h2>

<ul>
<li><a href="#"><img src="images/32/Blinklist.png" border="0" alt="Blinklist" /></a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>

</div>
</div>

</div>

In headinclude template find :
<!-- / CSS Stylesheet -->
Add after :
<script type="text/javascript" src="clientscript/mootools.js"></script>
<script type="text/javascript" src="clientscript/side-bar.js"></script>

In Additional CSS Definitions add :
h2{
color:#1b1bc4;
font-size:90%;
font-family:arial;
margin:10px 10px 10px 50px;
font-weight:bold;
}

h2 span{
font-size:105%;
font-weight:normal;
}

ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

li{
margin:0px 0px 3px 50px;
padding:2px;
list-style-type:none;
display:block;
background-color:#fff;
border: 1px solid #D1D1E1;
width:140px;
}

li a{
width:100%;
}

li a:link,
li a:visited{
color:#0a8dc3;
font-family:verdana;
font-size:70%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}

li a:hover{
color:#36687c;
text-decoration:underline;
}

#sideBar{
position: absolute;
width: auto;
height: 350px;
top: 150px;
right:10px;
background-image:url(images/background.png);
background-position:top left;
background-repeat:repeat-y;
}

#sideBarTab{
float:left;
height:5px;
width:36px;
}

#sideBarTab img{
border:0px solid #FFFFFF;
}

#sideBarContents{
overflow:hidden !important;
}

#sideBarContentsInner{
width:200px;
}

[MAD-DOG]

Freest Post

[kmohamed]

WOW IT LOOKS GREAT
ANY DEMO
TAGGED FOR LATER USED

THANX

[vijayninel]

Any demo anywhere ?

[Limode]

Any demo anywhere ?

Try Screenshots

[whitetigergrowl]

Whats this do/for?

[Brandon Sheley]

very cool
can we get a live demo please?

thanks

[cuco2000]

<script type="text/javascript" src="clientscript/mootools.js"></script>
<script type="text/javascript" src="clientscript/side-bar.js"></script>

you need change "clientscript" to "js"

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>

Or upload js content to clientscript :P

(sorry my bad english :P)

[SilabGarza]

where do i add step 3 at?