Menú deslizante en la parte superior del blog

Hoy en dia lo principal en un blog es ahorrar lo maximo de espacio en el y que mejor solucion que un excelente menu deslizante que te ahorrara mucho espacio.
El menu del que te hablo es el siguiente:

Puedes verlo en mi blog de pruebas.

Pasos

Para añadirlo debes seguir los siguientes pasos:

1. Bucamos la etiqueta <head> y debajo de ella pegamos lo 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
$("#open").click(function(){
$("div#panel").slideDown("slow");
});

// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

// Switch buttons from "Abrir menú" to "Cerrar menú" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});

});</script>

<b:if cond='data:blog.pageType != "item"'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>

2. Ahora añadimos el codigo CSS buscando la etiqueta ]]></b:skin> y pegando encima de ella lo siguiente:

/* 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/AVvXsEj_Rqj-RyUl6SdnnUtP7ZOLc0MoMkXjndHbdQcYBpGrLi0wx0-FTtd5hiP4eunPdkeCH4uYFHQ21fr2N7mdIoR2BjabqhyphenhyphenBJVM8uyXfut4auotP2RDv23p5hLmVSeiY82YPE2XQlt-CJvNx/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/AVvXsEg6RbbRU-1NYnXxHPbStmNzNoY_7GRc4w3sBXz0anpJgdSbf25BgeYvoK26FPDbjI4RjaMpdMDS1gGdsiIHQVLvrdAnPoLIQC8l5joWnB3Z3K2MIgBrvQWvrN5UADCHOd6rSSWgfo0nG7OF/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/AVvXsEgDhiE_o4ghlXgZG42YFw1JIhFSnjnNNSgqArv23BJ5WtqTDhLmUblbnR7dbQlrBpcuNNdSKnzlMQUPtzRHwUpnE7mEz92ZHQXkd2stRNgbStQBcjrYTQuxv74D_bpRmcPPL94hwOktTpVj/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/AVvXsEjNsrN78eJd4hxcjRtHTAtiwxh5DHUBJMBKA0_svaehZpEpfo3rBBXF0JRxPbsNShfxUqB6EPotgYchty0FKYHMF-O3o18eyApY6ncwKgHDyHGQ8BqEi8e-8oEzQr-sI-nxwVwRVRJ7ommX/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/AVvXsEgX0D4tE43piadYDeqCvLiIgP6BbaDFAMPtn4TW4LQq4G7yo1I8koBWsTcjtg0Nqij9S9VcXzwo4AUHRSjfUsc2siwccpHCs47JXZbLBlnn2t9UuWJ4Y8jP-R8Tnkph_s9XKWsQtwVDXKqX/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtYIIaJ-czm1O3H4zRtdaA34UiD31n4Qq82Z6XpKt5mhzYIvIJbawRjIBCIOBAE0cCqVMsJZFbqJ37wRjiBCCdN8Sj9r8EiYyXff12UjtYCnznZKd_4q6SUFx5dN-RIMH4PVaucoacDJEE/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX0D4tE43piadYDeqCvLiIgP6BbaDFAMPtn4TW4LQq4G7yo1I8koBWsTcjtg0Nqij9S9VcXzwo4AUHRSjfUsc2siwccpHCs47JXZbLBlnn2t9UuWJ4Y8jP-R8Tnkph_s9XKWsQtwVDXKqX/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtYIIaJ-czm1O3H4zRtdaA34UiD31n4Qq82Z6XpKt5mhzYIvIJbawRjIBCIOBAE0cCqVMsJZFbqJ37wRjiBCCdN8Sj9r8EiYyXff12UjtYCnznZKd_4q6SUFx5dN-RIMH4PVaucoacDJEE/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/AVvXsEieMhJqTp9pMOiv4bAoL3Eij7woZDcvQqRh1h8JoPhKmCvtwmD6sLkOuJqRs6PYNxxxopfCwuoSKcWzvzL8o7Q6R42J5n0_tFCq0QEQkKRQyarNCp2lXMx_tmHF2KSHJuXbtYKB0yEg5sZu/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/AVvXsEixqNrtaOPaEewq4VfYJtzk6m2E-L8wTCb8Up61gnQXWBnheIGUoQYmXErLKqcTMFltSsBhPsE8iig_cG0S7Ukk8XGoOZn3izQNZmphhV_-ANiSKlQJQ_ojmaGeFaawFhzIZTTg2w736G1r/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;
}

3. Por ultimo ponemos la estructura del menu buscando la etiqueta <body> y pegando debajo de ella lo siguiente:

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


<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPkzRAMImpQjwKxLvwenTeRwZFrH516iANqfdU3pXlyCsezgyGd5oWTQ0DAUARgIa2VJKBUEcz9TjcHufHmzNnq37izpvNwpL6rKM2oJHS19rFULd55zdU56KG_NHo8Iy3QXvbiVhthRC/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/AVvXsEgzrYWIcJ9OcLS2sGW0Bb3aMpyNoqsD4-8_VCfbMGFK4B9WgZgepbNw_0bJPm8zVweGttNw_MNXX37RAt4HHzCMwc0D_06gLgiMBEerjVNZI9kVBrBl_4GJapA-Iu8s_gV2d06TBPwDeHnx/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/AVvXsEjYFNpvgV1EgoRXzJ3ltoHDIZwlGyD0lBNQ-kELcyrpKp9omh2PdRfGpLyi9LQrvECPa6c4yBMym7IUkz6B7DzdPYEZnxDxC_3Ml159vUjdhv_EbYPv3ogXKb1ktGEVwjQKJF2hDC4sP_SF/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a>
</div>

</div>


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


<div class='left right'>

<h4>¡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>

Si usas una plantilla hecha con el diseñador de plantillas de Blogger debes pegar el codigo anterior debajo de lo siguiente:

<body expr:class='"loading" + data:blog.mobileClass'>

Esta última parte que hemos agregado es lo que contiene lo que se oculta y despliega. He puesto en color azul los nombres de cada sección para que les sea más fácil reconocerlas.

En la primera sección puedes cambiar el mensaje de bienvenida; seguido de él están los iconos de las redes sociales, sólo cambia lo que está en color marron por tu nombre de usuario ya sea de Facebook, Twitter y el nombre de tu blog.

En la segunda sección está el menú de categorías que hemos agregado, solo debes poner las URLs de los enlaces y los nombres de los enlaces que hemos añadido al menú.

Y en la tercera sección está la suscripción por correo electrónico, recuerda que debes tener habilitada esa opción en Feedburner. Y ya habilitada sólo hay que poner donde se indica en color morado el nombre del feed que tenemos.

Via
Ciudad Blogger

Mil Trucos Bloggers

Menú deslizante en la parte superior del blog

0 Komentar untuk "Menú deslizante en la parte superior del blog"

Labels