#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Un indice con JQuery para tu blog
La base de cotización
texto caligrafia
 Cinco estilos de Entradas populares
Como enviar un mensaje de WhatsApp sin guardar el número
Descubrir contraseñas ocultas
Plantilla MovieKhor
Inspiro 2.0 Plantilla blogger
Plantilla Abigail
Gadget de entradas populares en dos columnas
Plantilla New Pro Blogger Template
Revista Pro template blogger

SIDEBAR O BARRA LATERAL FLOTANTE Y DESPLEGABLE PARA TU BLOG

Hoy vamos a mostrar como podemos poner un menú de pestañas deslizante que además de ser muy vistoso nos va a dar una diseño elegante a nuestro blog

Para agregar este menú en tu blog debes seguir los siguientes pasos:





Ve a diseño < plantilla < edición html 
y busca este código <head> y después de este código pega el siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> $(document).ready(function() { // Expand Panel $(&quot;#open&quot;).click(function(){ $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;); }); // Collapse Panel $(&quot;#close&quot;).click(function(){ $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;); }); // Switch buttons from &quot;Abrir menú&quot; to &quot;Cerrar menú&quot; on click $(&quot;#toggle a&quot;).click(function () { $(&quot;#toggle a&quot;).toggle(); }); });</script> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style> body#layout #toppanel {display:none !important;} </style> </b:if>

:Ahora agregarás los estilos CSS justo antes de ]]></b:skin>:
/* Top Sliding Menu----------------------------------------------- */ .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;} .clearfix {height: 1%;} .clearfix {display: block;} .tab { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsIknEAA5D60LLdl3lyM5x5Z08xXu8VknaXj1qZmK36Tnfw05cTrf2lildDOCeBxf9KHrY-u3rSl64nsZ0zo4A6u5zP6c6iRN5dsSIIPmZicIMbAaynq4zRZqN_Q1ofQ1YDGxogc8b7Nd3/s1600/tab_b.png) repeat-x 0 0; height: 42px; position: relative; top: 0; z-index: 999; } .tab ul.login { display: block; position: relative; float: right; clear: right; height: 42px; width: auto; font-weight: bold; line-height: 42px; margin: 0; right: 150px; color: white; font-size: 80%; text-align: center; } .tab ul.login li.left { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAa-6HiekzqhC9H-XUtLqDLmv6BFAdZieWaTO09BG17NQrObqpVlu2AlTsY1zBCVHirWXlrAbta6s13FaLdDvPh84_3T-2I34-W3-pbBp-wJAORN24O84x4jN4gfIKjY6UW3CuW_pg4iqq/s1600/tab_l.png) no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li.right { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ST4CV7SoWuHWq4fN1PfPIn25qV7ULWrM0GhAuBKLUJ3NdqxcoFszaT05C78uZwPi8FFoTJPokVIUeOThMkAAbNlqDG_t_B7OQv2_8QTdsQpSCXvNhIY7OWkNhqwrAeLjnFPMNWBNgKdu/s1600/tab_r.png) no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li { text-align: left; padding: 0 6px; display: block; float: left; height: 42px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOddfIaFKZLPI9yklH9QQ5umM4D7pR26YX5F628EL3qJy1wyrNCDoWYqjZFE1aFJI21OyucHM5q7pDOVzL2hyJzQr5TiBtVc_-gBF6Mntwjbe-REE4YGFyde3TQkShXX_6GwbWZxSiYb56/s1600/tab_m.png) repeat-x 0 0; } .tab ul.login li a {color: #15ADFF;} .tab ul.login li a:hover {color: #FFFFFF;} .tab .sep {color:#414141} .tab a.open, .tab a.close { height: 20px; line-height: 20px !important; padding-left: 30px !important; cursor: pointer; display: block; width: 100px; position: relative; top: 11px; } .tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDKscCca2nyVjrKFPjyNhj8MD1kdKlegU01NE_jRO2BfwwNAMiB48S7EuILLbhx57RAhD0bbefqfALKRBIdBkBem3jKawpLZCC7mMWXquImYz2Lk-eEX3aef3p7wkwORqcFP_MVUyTbIJS/s1600/bt_open.png) no-repeat left 0;} .tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcaJE9X3PzPm-vh9LksHH_dSfLDz5F4BLKTYN_JPPJEtqGpJMaFB1BU07P9iw_0x3mkQJFkhnlSe-ydJhQB6lsx_WlTghRnQBoI0RMmkPisJy97aXybqPY8CcJrZ9gAS9YNAAKgt8rB06/s1600/bt_close.png) no-repeat left 0;} .tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDKscCca2nyVjrKFPjyNhj8MD1kdKlegU01NE_jRO2BfwwNAMiB48S7EuILLbhx57RAhD0bbefqfALKRBIdBkBem3jKawpLZCC7mMWXquImYz2Lk-eEX3aef3p7wkwORqcFP_MVUyTbIJS/s1600/bt_open.png) no-repeat left -19px;} .tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcaJE9X3PzPm-vh9LksHH_dSfLDz5F4BLKTYN_JPPJEtqGpJMaFB1BU07P9iw_0x3mkQJFkhnlSe-ydJhQB6lsx_WlTghRnQBoI0RMmkPisJy97aXybqPY8CcJrZ9gAS9YNAAKgt8rB06/s1600/bt_close.png) no-repeat left -19px;} #toppanel { position: absolute; top: 0; width: 100%; z-index: 999; text-align: center; margin-left: auto; margin-right: auto; } #panel { width: 100%; height: 270px; /* Alto del slide */ color: #999999; background: #272727; overflow: hidden; position: relative; z-index: 3; display: none; } #panel h4 { font-size: 1.6em; padding: 5px 0 10px; margin: 0; color: #FFFFFF; text-align: center; } #panel p { margin: 5px 0; padding: 0; } #panel a { text-decoration: none; color: #15ADFF; } #panel a:hover { color: white; } #panel .content { width: 960px; margin: 0 auto; padding-top: 15px; text-align: left; font-size: 0.85em; } #panel .content .left { width: 280px; float: left; padding: 0 15px; border-left: 1px solid #333; } #panel .content .right { border-right: 1px solid #333; } #panel .content form { margin: 0 0 10px 0; } #panel .content label { float: left; padding-top: 8px; clear: both; width: 280px; display: block; } #panel .content input.field { border: 1px #1A1A1A solid; background: #414141; margin-right: 5px; margin-top: 4px; width: 200px; color: white; height: 16px; } #panel .content input:focus.field { background: #545454; } #panel .content input.bt_register { display: block; float: left; clear: left; height: 24px; text-align: center; cursor: pointer; border: none; font-weight: bold; margin: 10px 0; } #panel .content input.bt_register { width: 94px; color: white; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_bulkR4DKiX_y06SWuHx535zp3IXE4BrwDErYmvZVMOcm2nLbku2qtXIE379mU0oIRzwyytwXnFTKXFxjbvZpq_T7KylpIX2wnjQH-anwS_hP9vQqJEgiHQWTeqOhC4h1kODlMnmwTqw8/s1600/bt_register.png) no-repeat 0 0; } #slide-menu { width: 160px; float: left; } #slide-menu2 { width: 160px; float: right; } #slide-menu ul, #slide-menu2 ul{ font-family: Arial, Helvetica, sans-serif; list-style-type:none; margin:0; padding:0; } #slide-menu ul li a, #slide-menu2 ul li a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmLyi3QZJa4LPX3365RZ9BP6gSbbgvmPTlYSDLRuYQxd1J5TMEaljrelUMjpz-yklEA68MzJrYPh7tAhI1cqPP7yzDBMdW9z1N56hR0Q5XryjV_PCmt5GHUkzE1sVv366NV7kkt3o85bG3/s1600/bullet_blue.png) center left no-repeat; margin:0; padding:3px 3px 3px 18px; } #slide-menu li, #slide-menu2 li {display: inline;} #slide-menu a, #slide-menu2 a{ color: #FFFFFF; text-decoration: none; font-size: 13px; display: block; padding: 3px; width: 160px; } #slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited { color: #999; text-decoration: none; } #slide-menu a:hover, #slide-menu2 a:hover { color: #FFFFFF; }

Y por último vas a colocar la estructura, justo después de <body> agrega lo siguiente:


<!-- Inicio top sliding menu -->
<div id='toppanel'>

<div class='content clearfix'>
<div id='panel'>

<div class='left' style='width:240px !important'>
<!-- Primera sección -->

<p>Puedes seguirnos en las redes sociales o suscribirte al feed.</p>
<h4>Hola, Bienvenido a mi blog!</h4>
<div align='center'>

<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuN7JixgPexVIjYnVOLaMmE5BTSZgA__ZJlZI_cOXhWpsPglG4Gg048wF9oWqNMtm3hWt93m0Ofs9of0GWlywPptfLtnbAfXMYCiqK0Dpfxia-xW-VD2bik3B5dlrDxYzjjjpV77gu7Wmw/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivkY2ZgQnhvMqZ_lawIZZBJYKKBBXDG3RqGz08sIRItGTyrwGhg76K80uAZZYXikNAkc8e8PejeaTcidw-65Psnc00QP5NBNTWCQFB8MNhJ0eue8NFJBclBLy0eg-DdmKRxvRpJcydM5hI/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPYx5ljDqCbS-kUvQbluvFELJCDAuC1dA0Q9znH4z0UASqxhqUYbcOhBYm4usWLbgsRb1JIrTfMvuMDOtQ5Zfx62vTqMdLjTtTZwwbr5Ay4Gc1BKXRbkoQq_6yMR-rYAv28NIh_6e97mx/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a>
</div>

</div>
<!-- Segunda sección -->

<div class='left' style='width:320px !important'>
<h4>Categorías</h4> <div id='slide-menu'> <ul>
<li><a href='URL del enlace'>Menu item uno</a></li>
<li><a href='URL del enlace'>Menu item dos</a></li>
<li><a href='URL del enlace'>Menu item cuatro</a></li>
<li><a href='URL del enlace'>Menu item tres</a></li>
<li><a href='URL del enlace'>Menu item seis</a></li>
<li><a href='URL del enlace'>Menu item cinco</a></li>
<li><a href='URL del enlace'>Menu item nueve</a></li>
<li><a href='URL del enlace'>Menu item siete</a></li> <li><a href='URL del enlace'>Menu item ocho</a></li>

<li><a href='URL del enlace'>Menu item diez</a></li>
<li><a href='URL del enlace'>Menu item diez</a></li>
</ul> </div> <div id='slide-menu2'> <ul>
<li><a href='URL del enlace'>Menu item dos</a></li>
<li><a href='URL del enlace'>Menu item uno</a></li>
<li><a href='URL del enlace'>Menu item cuatro</a></li>
<li><a href='URL del enlace'>Menu item tres</a></li>
<li><a href='URL del enlace'>Menu item seis</a></li>
<li><a href='URL del enlace'>Menu item cinco</a></li>
<li><a href='URL del enlace'>Menu item nueve</a></li>
<li><a href='URL del enlace'>Menu item siete</a></li> <li><a href='URL del enlace'>Menu item ocho</a></li>
</ul> </div> </div> <!-- Tercera sección -->


<div class='left right'>
<a class='open' href='#' id='open'>Abrir menú</a>
<h4>&#161;Suscríbete a nuestro blog!</h4>

<p>Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Nombre-del-Feed' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input class='bt_register' type='submit' value='Suscribir'/></form>
<input name='uri' type='hidden' value='Nombre-del-Feed'/> <input name='loc' type='hidden' value='es_ES'/> </div>
<li class='sep'>|</li>
</div> </div> <div class='tab'> <ul class='login'> <li class='left'/> <li>Hola invitado!</li> <li id='toggle'>

<!-- Fin top menú deslizante-->
<a class='close' href='#' id='close' style='display: none;'>Cerrar menú</a>
</li> <li class='right'/> </ul>
</div>


</div>

tSi usas una plantilla hecha a través del diseñador de plantillas entonces el código deberás pegarlo después de: <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> Ahora reemplazan para el texto las partes que dicen "MENU ITEM" y para los link lo que dice "URL DEL ENLACE"


Publicar un comentario

0 Comentarios