-->

SIDEBAR O BARRA LATERAL FLOTANTE Y DESPLEGABLE PARA TU BLOG

Cobi junio 17, 2020
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/AVvXsEj2r8Z5X1fSlIZtoj51TCFIDAzUDdhhVrFS8sQKFz_gNMbNn_vfpU5XvHgyox3lBpAsltjK8yU7wzhoMHmBKI4tgglTe9okHkritFKSJMBcx37zclZE4rqIJrM_HimpaADbFLNi4dtOs9HK/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/AVvXsEjdIstz79grWvLiQnTwSeABhpNBvVYVZiIVEDoi_F6RaNfWRBg-eqnRkWsijjxLdhcPvLLzX1x8ezlAIlgezwUNP9FOl4KYA_KMWJit19js_vbIcPAWoeS32piz8423UmThMfORbGyByAAa/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/AVvXsEgKiu9VaDB-qvnKmMkO-Hs4IAGKjFqa9uXXlO0QywgKGbJLRrWKV92enc1QdctLH1EJRt9ofQVT-qaTNQemjz_JlgXfCJDK3Evxotp1jqG3HyPp45CBkcY1Hm8_Cl_nvEsQRe974Rz15f02/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/AVvXsEjJhNkUcKnPlpp3Y2QQWj2GyOEimK9WuYSanhsGqaIo5n6tEnyUp_Bn2g6fCYZybq_c_aW2FYWMfr1n10YvqEvxq8MqFVBWo-iMf63DZiJJuRJ-9OUZa8hQT5fLXhaQlcse6_n_IbHITGvQ/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/AVvXsEiBzC6_s74X1y9pLXI6WOXot0FNsdELbKHdx4bfEOo6I2oRc06dtThfES2Uh5aJ3rkh4ISJqeyAqNcJiK_JmOjCtGjbQQIgA-jrQ0_qU9eLONvTgdIJeipJ5hXm8yTqKoFTllvxzH6c3XD_/s1600/bt_open.png) no-repeat left 0;}

.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifI4o1Wuh2FUOvC0qagCRd15vXW84eL51KQIILgIZZAxHCH78DSl_rxSlZit2BGN-gKJch1t3qWzUHFTLBtMgdvlgEoUafQiwb6_PZBAIffZT6VcHg9cWGu8adijqMSykUBRGWbBFq9Vxz/s1600/bt_close.png) no-repeat left 0;}

.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBzC6_s74X1y9pLXI6WOXot0FNsdELbKHdx4bfEOo6I2oRc06dtThfES2Uh5aJ3rkh4ISJqeyAqNcJiK_JmOjCtGjbQQIgA-jrQ0_qU9eLONvTgdIJeipJ5hXm8yTqKoFTllvxzH6c3XD_/s1600/bt_open.png) no-repeat left -19px;}

.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifI4o1Wuh2FUOvC0qagCRd15vXW84eL51KQIILgIZZAxHCH78DSl_rxSlZit2BGN-gKJch1t3qWzUHFTLBtMgdvlgEoUafQiwb6_PZBAIffZT6VcHg9cWGu8adijqMSykUBRGWbBFq9Vxz/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/AVvXsEhE4Jj8hmaKzm5Ab9-td9Tz8k0CDFt4Ana0-0YsRxJzxGX4Bysf8bmuCmOQrTdjcvpeprhNUvzo7paKN7olUJe2_cWkhY5i9tZYNyTJ_QDRmNC26iCOzti986pe3Xl6DUItTsYOkYa7ON3I/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/AVvXsEj6YFCX_PYcZYgetNWbOiZB1Sz5sOrcLw4UQFrAAgbsSSg_jwbvRH38JNg8ppCYxRMqlidYjDVbSpuj4i26U8OXFakVeInT48wc0s65L89YfyOzYzjexDsWdYYm7W587rFtKLU8R9Nkb9A7/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/AVvXsEhYJM6v23mp2j0q764FwCRgDOISNUKSatVnFD82etNrtK4jPIa94iemKnowvDHuBVr9sTSoxrBN5FzdaqNRLbXXyOz_H44Mrt6ZAPnFjiJ1Vx2wgokXTNioqpLmEpfX2xjbh0WfFOO4p5cj/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/AVvXsEg09_21yP5mFxZ0HW9Y6FMqb4oZtc5wpu9ML_6S2HslGTtXFp1zQ5EWgmoXO9t3QmkC1MklJKoeMGcj5gY25zw7kCFABgHdHX5tWMOzrtxltJmwO90JWAVGN1d408AMoAjnyDIb6EyQmFWN/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/AVvXsEh_zxCEgmSY8Cn4HxG2jJ0oLkto54qLzAPvU-Tw_AbUN-SFBKN3iP95IKUWkOFmya7ZGmUsMrBG4qNekq30PtTHttzOIzANfkgYgd0tf3mZxdxZCVBH8GZgcr2uSmw871Hp0uojb4mdr5qA/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

Añade tu comentario y en breve te contestaremos