Menu Deslizable Para Barra Del Lado de Blogger

Mostar-esconder, menu deslizable y sexy. Menu bar con javascript y mootools. Este articulo explica como anadir  un Menu deslizable, Sexy con JavaScript en la barra del lado Este  Menu usa la aplicacion de Mootools en el  blog que luce bien en el blog de blogspot .Para ser efectivos con CSS un menu vertical que muestra/esconde usa  MooTools para mostrar / esconder el menu con despliegue vertical agradable efecto.

  MooTools: "MooTools es un compacto, modular, Object-Orientado del framework de JavaScript  disenado para mediano y avanzado desarroladores de JavaScript .TE permite escribir poderoso, flexible,codigo de navegacion cruzada con elegante API, bien  documentado y consistente. ".
MooTools Home: Home Mootools.

 Instalar un Menu deslizable bello con JavaScript en la barra de lado con MooTool,


Vamos a anadirlo

Paso 1. Entra a tu cuenta de Blogger .ve a la interface de Blogger y da.Click en(Diseno) del panel de la izquierda y de clicken el enlace de Anadir un  Gadget .

Paso 2. Despues de dar click en Anadir un Gadget  Un cuatro se abrira mostrando una lista de gadget, escoja HTML/JavaScript de la opcion de gadgets dando click a la cruz azul de anadir para ese gadget.

Paso 3. Selecciona 'HTML/Javascript' y anade el codigo de abajo

Step 4. Despues de anadir el codigo da Clicken guardar 'JavaScript' y listo..

<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>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<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/AVvXsEi0HIQYykeuzAfLwf1dFznwHV0nw2wWF4Mh5oEOIUKHlIkzb87ArNv6ysz_0JAlZEz7Y7t6z-rjI2c_tgH8G0zSwN8j8Wm5iKUswtL3u-JUw2YUOB-3d4Rn-F3Qlujr5mQA3CWTIeTCRAZ8/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 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3oIZiRThK6eu5krlWSiXH7zHq0f2VdpMpGfAZ3FisY26BBd2-TI4Ig0c-9Y1Vr-CqKn9wInMCJa_iiVBh9tThQiZF_3YLzsy-CBdb2k2mpphs6aBCw4bq3ZCB7AiTqYg4lK8BBDX4Inub/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>

y ahora da click Guardar



Nota:Tenga en mente antes de guardar las "#" de tus link(enlaces)( Link 1, Link 2 Link 3 Link 4), cambiarlos porla Url  a donde dirigiras  el enlace.Puedes anadir hasta 10 enlaces.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati