Poner menú deslizante lateral en blogger con botón de seguidores

Algunos fragmentos tomados gentilmente de Amor Sevillista

 Un artículo más en PRO de la categoría Blogger, veremos como poner en nuestro blog un buen menú deslizante las características básicamente son que estará al costado derecho en forma vertical y se deslizará cuando el lector en tu blog pase la flecha del mouse sobre la parte que indica hay un menú un demo aquí abajo.

Muy bien ¿Te gustó? Ahora veamos como se pone en nuestro blog en breves pasos:

1. En nuestro escritorio de blogger vamos a Diseño > Añadir un Gadget > Html Javascript, ahora copiamos lo siguiente:

<style>#menu-oculto{position:fixed;top:20px;right:-280px;background:#f8f8f8;float:right;width:280px;height:100%;font:normal 20px Oswald;display:block;padding:0;z-index:9999;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
#menu-oculto:hover {border-left:2px solid #6b6b6b;right:0px;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
.imagen:before{content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisHFMZhZawub9vKtZfECDvRFADH2t6tvuKy62Z1SXtLeb2kWWJ53MNBCSLjpr6EVMs3EeMaL97R1sAplhr-Qerd18d1vEK9GbYNr1IqpKpcJEIlVwAAqFHxv5B2pkDjBJk0yGBDs8f4IQ/w40-h120-no/MENU.gif);position:absolute;top:0;left:-40px;}
#menu-oculto a{color:#333;text-decoration:none;display:block;padding:5px;}
#menu-oculto a:hover{color:#fff;border-right:5px solid #000;background:#5f5f5f;}
#menu-oculto li{list-style:none;line-height:50px;border-bottom:2px dotted #000}
#menu-oculto.active {right:0;}
#botones{width:300px;}
.bface{float:left;margin-left:12px}.btwitter{float:left;}</style>
<link href='https://simple-cursor.googlecode.com/svn/trunk/awesome.css' rel='stylesheet'/>
<div id="menu-oculto">
<ul><li><a href="#" title="inicio"><i class="icon-home"></i>Inicio</a></li>
<li><a href="#" title="Contacto"><i class="icon-envelope"></i>Contacto</a></li>
<li><a href="#" title="Sobre mi"><i class="icon-user"></i>Sobre Mi</a></li>
<li><a href="#" title="Política Cookies"><i class="icon-th"></i>Política Cookies</a></li>
<li><a href="#" title="indice"><i class="icon-forward"></i>Indice</a></li>
<a class="imagen" href="#" title="abrir/cerrar"></a></ul>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-person" data-layout="landscape" data-href="https://plus.google.com/nombremiperfil/"></div>
<div id='botones'><div class='bface'>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fnombre-de-página-facebook&amp;width=100&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;" allowtransparency="true"></iframe>
</div><div class='btwitter'>
<a href="https://twitter.com/nombre-de-twitter" class="twitter-follow-button" data-show-count="false" data-lang="es">Seguir@nombre-de-twitter</a><br/><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></div></div>

2. Aún no guardes hay algunas pequeñas cosas que modificar veamos:

Lo que está en:

- Naranja son las palabras del menú que podrás modificar.

- Verde lima es donde pondrás a que link apunta al clickear en tu menú.

- Rojo es donde pondrán su id de perfil de Google Plus está en el link de perfil.

- Fucsia es el id de su página de Facebook también está en el link de página.

- Púrpura Es el usuario de Twitter con el que identificas tu cuenta @cuenta.

3. Hecho esto puedes guardar y disfrutar del menú :)

Muy fácil espero lo disfruten, hasta la próxima.