.....

7 Sexy Sliding JavaScript Side Bar Menu Using Mootools



UPDATE:  I updated some of my posts, this post I update Sexy Sliding JavaScript Side Bar Menu Using Mootools........






STEP #1 Log in to Blogger, go to Layout


page-elements

Add a Gadget of HTML/JavaScript type. 



image

Then add this code in to it:



<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/prototype.js" type="text/javascript"></script>
<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/effects.js" type="text/javascript"></script>
<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGbVF1ZfoZP-rEPyVJm4kGVEIfrLjS7q29rNlqjhaLUIBBIymHwyuh2mnqF6mBc-1d8QzT4K2Eh_yIogFPqBDHsCjEHG1DtPHE4QiJHs6CIO7k8u0YRZgqJfkEdY-KBi6xE7qeeQSv06b-/s320/left.collapse.border.png);
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjceY5JrU1EnnztoMazTeb71AP6cplLR74mk2FHQH0pmPlzs2oL0VgTDNkLZzhOf42KQOj2C1lU9gtTVuObMWiRw5bOQqmcCqXFixKiZzDtSKUNmiNshv8iyabGkraODR71BoXvZG7ZZYys/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>



And now click Save

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

7 Responses So Far:

RHS said...

This is not working on my blog pls check my blog

tusar said...

Nice post and very nice images

ليلى said...

Hello dear ..
Thank you for the tool sideBar.
I've used this tool from another site has been omitted JavaScript files from the site. and now I use this tool from your site. but working in my trial blogger and Home does not work.


my Blogger Home
www.miss-lolo.net

my blogger trial
http://lo0o.blogspot.com/
....................
Sorry if my words is understandable, I am Arab, my English is very simple

Anonymous said...

My blog is in blogger but it has a rigesterd domain, does this work probably on it ?

thanks : )

padfoot said...

nice blog... i hope this script work on mine...

newsblok.com said...

if this doesn't work for you, replace the .js urls with the following :

https://sites.google.com/site/nbjavahost/javahost/prototype.js

https://sites.google.com/site/nbjavahost/javahost/effects.js

https://sites.google.com/site/nbjavahost/javahost/side-bar.js

NEWSBLOK

Anonymous said...

Hi,

I have registered domain but hosted on blogger and the sliding sidebar tab doesn't seem to work properly. The image for the tab shows up but when I press it it simply takes me to the top of the page.

http://www.tuscumbria.com

Can you offer a solution?

Your script works on another blog of mine that is NOT on a registered domain but is hosted by blogger.

email: tuscumbria@gmail.com

THANKS!

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger