-->

SIDEBAR O BARRA LATERAL FLOTANTE Y DESPLEGABLE PARA TU BLOG

1/04/2021
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"


Tags:

Publicar un comentario

0 Comentarios

En breve revisaremos tu comentario para poder publicarlo.
Muchas gracias