SIDEBAR O BARRA LATERAL FLOTANTE Y DESPLEGABLE PARA TU BLOG ~ Blogueandomiblog

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/AVvXsEhNbOCxtcz4Hf_r01rq3bxFCP08s447fC_rmjy4sDQ71Qd-wCbsgs8GVLMErfedFqaMgHIGfcLIo1u_qoGgOKDJvCJCP6w2eOla1PNBbFDrt2PEzNfzihdVMnqaJtvgmxzfN7X8PPSkrB0e/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/AVvXsEgUkeOxLFfxXptT2f5Clik45-REb6UslGI4I7Jk5NQ0Nzrnp_0onG8TUolfKotx8sYthuNgzsDNbaibE9GiioJjHIWbmyo5q-DGINU6oTnq89tT5D0LuCnsXbCtqE1SvcoL-ZWWr5ztjzl7/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/AVvXsEh9YW5d_L9YsT1urFU0dN7848y7Swa5YUu2XlBVfttcsGCsRhYSwoo2b9yYXH8cfLjhAKIYEpA6t3_IQbM3Anaf719yvIbLUCBKdj7sk2W9FSriUTp3MX1U0xnoSu6DJorSKRuGQeBtA9K2/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/AVvXsEjD-YHEbK1LZxPnTglvnYk9HUk0cdBmecGrpS9tHmovIEXRCjJsZPdquvswo-HkUGFD2t6Hgrt26PWT3mCCiPqr8biuiXFNsf1n2Uv-KI2fLL7MNFjfnB0BkFU1TJk9L0DQUB6HmvJOtI16/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/AVvXsEgcqXVScYenyFkaHRAJ0jhSL_aMpdJxDxvWlbNXT2bW8xmi_FjNPALCJYKbI5BJtcqOEJwCOWkh3eFcJ9k_PNMqEZ5bMH7pI0UOYb2SWuTAtLC2rEV0_7XwHVU1AypMXe_0mhFxJI4dsC0n/s1600/bt_open.png) no-repeat left 0;}

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

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

.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTkvGdgOZE9v4ST-O3VGlX4quUO9mA5EYq-FoB9ta17taqbmXUgFaMHL9Qx6jb6yCa16ligINZN9-f22ZwfmX6c4TRBJ9L_I5FtgFP6MUKplH9GE3UhkijaHAMChuIuoUc7xB_1Bb2ljac/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/AVvXsEgINOQOtGRjcDOz5sZCnfzuTj1D1AV8lenXXigokUy5GYbreEQgjFtOm-bS38lenhQZy4vZTPeh9y2amCAmmkQ8y_HQPyP-51f6xZ3GDjwM9o5WOBK6ixe_JpR8uKwfIuYOOBIAwIRw8eWR/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/AVvXsEhwh821Pi4px2Jhx6QFT6X_r5B7VeaU03GQ384zJvITBYJJdmT_wXxmqheByjyAHjTYUC0TocQrplskrUZg8rsrN9uAHDx8QonMsiHpuXCtPKCBVNhKcZ7iz9mzFc8UyqIj2ceN6FZt7pIu/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/AVvXsEgzGk8RjmUw7wcEIFOgpQrkZiDr6Ot2To-LdOBgqFZFaFt4_q72RRFHl9dji717chq1myihT4MJlUESoWHxkBhZfS2eK8nMVIMNlUZZViliPFKJMX3lAQNfXyaLgFdMLvNoyqNdHq0OUJ_b/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/AVvXsEj6ucCgWVAW0IbZRehKDvGIC0k69SaYqYEvZydNHwGvvwDT1IfgkMOpMbv_4plZh0M_myztEgOuTxk4LFH9isFz3FoaFQ-XLril8odXsN8KpYg9tz9TGgAW4PEsMIUF3x5yRX-hJUQTU9iN/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/AVvXsEgmypOwLFtk3GrPu40u2DJ_dtTn6npqn6P5Ywp1W7bREWmJUSwZZgl4LjpU3TW2d4fsFJc0w1R4mTJYeAaasBMCcTy4C-LMdynVzzU70xLDUIyNbVzBaUpohdbT70AWEjXeWeg45OWjxdG5/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='"loading" + data:blog.mobileClass'> Ahora reemplazan para el texto las partes que dicen "MENU ITEM" y para los link lo que dice "URL DEL ENLACE"

Recent Posts

Labels

SIDEBAR O BARRA LATERAL FLOTANTE Y DESPLEGABLE PARA TU BLOG

No hay comentarios:

Publicar un comentario

Trending

Social Media