lunes, 7 de julio de 2014

Agrega menú deslizante arriba del blog

Hoy les traigo un interesante Menú muy elegante y ahorrador de espacio es deslizante e  incluye muchas ventajas pueden verlo en el demo:

http://bloggin-prueba.blogspot.com/

Aquí una imagen en breve resumen del menú:

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

Ve a diseño o plantilla y 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(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjUtg1alI/AAAAAAAAAr4/irK6KNxvCHg/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(http://1.bp.blogspot.com/_dsEG33PDaHw/TUYjU8z7FWI/AAAAAAAAAr8/di0CWuFKxfo/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(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjVrN4yNI/AAAAAAAAAsE/4YOHQURWUHM/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(http://4.bp.blogspot.com/_dsEG33PDaHw/TUYjVVpFpYI/AAAAAAAAAsA/EKlKa2rlic0/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(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjS1nMjqI/AAAAAAAAAro/5oD_cgvHwM4/s1600/bt_open.png) no-repeat left 0;}

.tab a.close {background: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/s1600/bt_close.png) no-repeat left 0;}

.tab a:hover.open {background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjS1nMjqI/AAAAAAAAAro/5oD_cgvHwM4/s1600/bt_open.png) no-repeat left -19px;}

.tab a:hover.close {background: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/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(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjTGOeO8I/AAAAAAAAArs/XQSFRPBtS3s/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(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjTjBCpAI/AAAAAAAAArw/rJgbMGEyjMU/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 id='panel'>

<div class='content clearfix'>

<!-- Primera sección -->

<div class='left' style='width:240px !important'>

<h4>Hola, Bienvenido a mi blog!</h4>

<p>Puedes seguirnos en las redes sociales o suscribirte al feed.</p>

<div align='center'>

<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img src='http://4.bp.blogspot.com/_dsEG33PDaHw/TUYmsIuunqI/AAAAAAAAAsc/KUuPv94Lwso/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='http://3.bp.blogspot.com/_dsEG33PDaHw/TUYmrpIzmHI/AAAAAAAAAsY/sG1ZCEfxvNY/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='http://2.bp.blogspot.com/_dsEG33PDaHw/TUYmseCsXMI/AAAAAAAAAsg/RN_5cSwxE8M/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 tres</a></li>

<li><a href='URL del enlace'>Menu item cuatro</a></li>

<li><a href='URL del enlace'>Menu item cinco</a></li>

<li><a href='URL del enlace'>Menu item seis</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 nueve</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 uno</a></li>

<li><a href='URL del enlace'>Menu item dos</a></li>

<li><a href='URL del enlace'>Menu item tres</a></li>

<li><a href='URL del enlace'>Menu item cuatro</a></li>

<li><a href='URL del enlace'>Menu item cinco</a></li>

<li><a href='URL del enlace'>Menu item seis</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 nueve</a></li>

<li><a href='URL del enlace'>Menu item diez</a></li>

</ul>

</div>

</div>

<!-- Tercera sección -->

<div class='left right'>

<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 name='uri' type='hidden' value='Nombre-del-Feed'/>

<input name='loc' type='hidden' value='es_ES'/>

<input class='bt_register' type='submit' value='Suscribir'/></form>

</div>

</div>

</div>

<div class='tab'>

<ul class='login'>

<li class='left'/>

<li>Hola invitado!</li>

<li class='sep'>|</li>

<li id='toggle'>

<a class='open' href='#' id='open'>Abrir menú</a>

<a class='close' href='#' id='close' style='display: none;'>Cerrar menú</a>

</li>

<li class='right'/>

</ul>

</div>

</div>

<!-- Fin top menú deslizante-->

Si 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"

0 comentarios:

Publicar un comentario

SÍGUENOS EN: