MENÚ EMERGENTE EN LA PARTE INFERIOR DEL BLOC
julio 28, 2019
Muchos habían pedido ese mismo menú pero a la inversa, es decir, que el menú se mostrara abajo del blog y que se abriera hacia arriba.
Así que he cambiado las imágenes y modificado los estilos para tener el menú como algunos deseaban: abajo y flotante.
El menú sigue teniendo tres secciones, un área para que el lector se suscriba por correo, dos menús verticales, y un área de íconos sociales a los cuales se les ha agregado el de Google+.
Puedes verlo en este blog de pruebas
Para poner este menú deslizante debajo de la página entra en la Edición HTML y después de <head> pega el siguiente script:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Busca el siguiente código
</head>
Ahora justo después de esa etiqueta, pegamos lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
//]]>
</script>
Ahora antes de ]]></b:skin> pega los estilos:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
3 Busca el siguiente código
]></b:skin>
4 Justo arriba del código que encontraste, inserta las siguientes lineas de código.
/* Bottom 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/AVvXsEiiGRtsQjBzts7xJ6SLNO5R_Hp8Hldbcki9YmRIx4Aw5a6RalVPgig-nZwXjvR9TTSPCqzdOC_Bp-HbF7jU_kDpkrQvo40dJXhytdIPCi6ZugaVY-ueHLhgR12tSUnJkROlUL04nVXTy5bE/s42/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
display:block;
}
.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/AVvXsEgOw0pegujb9AgpoJZ1NR7z15xMqScbvG5N4b7o6k5B47sxra8wWW9KhwyKPD8VvNLzpHv09CiXXwgl-I6-7H5wABIllD1ubWyzCm4X6rRGJ6g8AYeGebe5LbdNmL7mUXZ-mQc_S8Z-VXJU/s42/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/AVvXsEjG52Xqr-Rpz2dJjsqcVGko_nfBgwZD_ZEuiAMMLZz_vHB1jxaU65iDFZEM9GcT3Q_mmab6kYKap3OuDQ0AbkS3E0xPWMHw2I77qwoOwyYZ1Rh53Lmu9i_3zOgUp780bZTMlNS9j0LdgAtg/s42/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/AVvXsEi3YOZRH33G1Oio96RqVC-AqVSxktLj1LL-2OgSqPMMfUJTJD2theaNLxWq_opDCjMQ9PEpdF9-nIRFkxxuJiq2Cjv-sZxNzymzb3_m4Gm63DXeH10OX9U8RbqfQmz-6sJSvM_u4wPCGPW3/s42/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/AVvXsEg6ziPC9gQVc7oAsTG5kBMGEouRTQMEXqqU_Z9pjbHmInLDbIc2sve_G-M4EQrkArDifXO8YTShcVAKnqAF9Qx5SGnzTSUvpsRHrHo3-sUTqTKZ5YFeCmEGE2Ft_PY5JKq3JshUodYoPy5_/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFNb1Jb0QcUCloseo2y5B7kSjc07xjbc4GlB02UTvTREpY8VCvVE855cLjB7w-PPSuf11qsfd0cHhL47u3j0W2EbCKSb-WieggapbOOjTxbUZzIgnST6-9MqNXo0971eBYdoXWGG1qmX4/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ziPC9gQVc7oAsTG5kBMGEouRTQMEXqqU_Z9pjbHmInLDbIc2sve_G-M4EQrkArDifXO8YTShcVAKnqAF9Qx5SGnzTSUvpsRHrHo3-sUTqTKZ5YFeCmEGE2Ft_PY5JKq3JshUodYoPy5_/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFNb1Jb0QcUCloseo2y5B7kSjc07xjbc4GlB02UTvTREpY8VCvVE855cLjB7w-PPSuf11qsfd0cHhL47u3j0W2EbCKSb-WieggapbOOjTxbUZzIgnST6-9MqNXo0971eBYdoXWGG1qmX4/s1600/bt_close.png) no-repeat left -19px;}
#toppanel {
position: fixed;
bottom: 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/AVvXsEipe4o_J_WupohC3s8cLwgNoZ6TqrFTT3-ozo_f8UKoAW_Psn8rnZB98JMLxE30gy5fdhK7XFT5ulegSCanuLL7KXB8I3oVlZzKo0vh_q2ShpBWAu8HY5HsjhPDbZv6OlnlqY4xUIx2ahL-/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/AVvXsEhAYY2vctjP8pk5PwILwfMj_qhEvCDzdvNZulKRsAeKn5URetle4jtRDD6ZQFrFO5_DVXUxtnmF5gg88lONM5Fy44W2Zg9NKpjYAjp8TNX0ByEjrHJDy0T1RBdh-FByS0KwkbTdgIhSdM3P/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;
}
body#layout #toppanel {display:none !important;}
----------------------------------------------- */
.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/AVvXsEiiGRtsQjBzts7xJ6SLNO5R_Hp8Hldbcki9YmRIx4Aw5a6RalVPgig-nZwXjvR9TTSPCqzdOC_Bp-HbF7jU_kDpkrQvo40dJXhytdIPCi6ZugaVY-ueHLhgR12tSUnJkROlUL04nVXTy5bE/s42/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
display:block;
}
.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/AVvXsEgOw0pegujb9AgpoJZ1NR7z15xMqScbvG5N4b7o6k5B47sxra8wWW9KhwyKPD8VvNLzpHv09CiXXwgl-I6-7H5wABIllD1ubWyzCm4X6rRGJ6g8AYeGebe5LbdNmL7mUXZ-mQc_S8Z-VXJU/s42/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/AVvXsEjG52Xqr-Rpz2dJjsqcVGko_nfBgwZD_ZEuiAMMLZz_vHB1jxaU65iDFZEM9GcT3Q_mmab6kYKap3OuDQ0AbkS3E0xPWMHw2I77qwoOwyYZ1Rh53Lmu9i_3zOgUp780bZTMlNS9j0LdgAtg/s42/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/AVvXsEi3YOZRH33G1Oio96RqVC-AqVSxktLj1LL-2OgSqPMMfUJTJD2theaNLxWq_opDCjMQ9PEpdF9-nIRFkxxuJiq2Cjv-sZxNzymzb3_m4Gm63DXeH10OX9U8RbqfQmz-6sJSvM_u4wPCGPW3/s42/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/AVvXsEg6ziPC9gQVc7oAsTG5kBMGEouRTQMEXqqU_Z9pjbHmInLDbIc2sve_G-M4EQrkArDifXO8YTShcVAKnqAF9Qx5SGnzTSUvpsRHrHo3-sUTqTKZ5YFeCmEGE2Ft_PY5JKq3JshUodYoPy5_/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFNb1Jb0QcUCloseo2y5B7kSjc07xjbc4GlB02UTvTREpY8VCvVE855cLjB7w-PPSuf11qsfd0cHhL47u3j0W2EbCKSb-WieggapbOOjTxbUZzIgnST6-9MqNXo0971eBYdoXWGG1qmX4/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ziPC9gQVc7oAsTG5kBMGEouRTQMEXqqU_Z9pjbHmInLDbIc2sve_G-M4EQrkArDifXO8YTShcVAKnqAF9Qx5SGnzTSUvpsRHrHo3-sUTqTKZ5YFeCmEGE2Ft_PY5JKq3JshUodYoPy5_/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFNb1Jb0QcUCloseo2y5B7kSjc07xjbc4GlB02UTvTREpY8VCvVE855cLjB7w-PPSuf11qsfd0cHhL47u3j0W2EbCKSb-WieggapbOOjTxbUZzIgnST6-9MqNXo0971eBYdoXWGG1qmX4/s1600/bt_close.png) no-repeat left -19px;}
#toppanel {
position: fixed;
bottom: 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/AVvXsEipe4o_J_WupohC3s8cLwgNoZ6TqrFTT3-ozo_f8UKoAW_Psn8rnZB98JMLxE30gy5fdhK7XFT5ulegSCanuLL7KXB8I3oVlZzKo0vh_q2ShpBWAu8HY5HsjhPDbZv6OlnlqY4xUIx2ahL-/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/AVvXsEhAYY2vctjP8pk5PwILwfMj_qhEvCDzdvNZulKRsAeKn5URetle4jtRDD6ZQFrFO5_DVXUxtnmF5gg88lONM5Fy44W2Zg9NKpjYAjp8TNX0ByEjrHJDy0T1RBdh-FByS0KwkbTdgIhSdM3P/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;
}
body#layout #toppanel {display:none !important;}
Si quisieras cambiar el alto del menú cuando se expande podrás hacerlo donde dice en negrita
/* Alto del slide */
Por último pega antes de </body> la estructura del menú:
<!-- Inicio bottom sliding menu -->
<div id='toppanel'>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hola invitado!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='javascript:void(0);' id='open'>Abrir menú</a>
<a class='close' href='javascript:void(0);' id='close' style='display: none;'>Cerrar menú</a>
</li>
<li class='right'/>
</ul>
</div>
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTxvSp4UAwXKTJ4Ft1YaJRcSg0K2IQkvjHKp0PnW5v6gMXKU2WpoYIjD0gHz0IDFUY-SxX5s-K1RM4Id5cUbYhiw3_ZYzAbKdV7OPNC3tkYBIFh4QI6HkZQntO_V8VhjhzeVo7hDL-wxb/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/AVvXsEjowYJ5Q0gn1RwyzD0NWmfs5_7rUQQ4MOfB5EAH-NY6lE0zCU7iBjkR09YAjeVnDQc3ZtRJVJrYGPEDSd1bda7-xZEkhR5xC7isrEMM4acLYH0sNZBwWi-N7ov5iCLugb1PpspoQGkkf8Us/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/AVvXsEh0yMr50-IbyrgAzQWogfTVvRN4BSNXKaV9UfzYiKKNecBwfkqaSyxatw6yx5Pa6jDOv59Y4JZQ0ZAFnBbu-RtS-rTIn8Hxo7an4K_yDhqrG8XA0TXnjCGDNNmGp5G_M0YC3u2AFcMYiWfK/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a> <a href='https://plus.google.com/b/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhznzYPqafH3enIDnQQxYI0UWU580c_A6CQes9SAX9FR0NbWJkPsVhxtcT2ZH-1DWGDd8H4KqIRDSEu8JqxZnH175jJE_L12_2DYFlehN9uM76ss5k24kxtuRLhnEUadt03QyT3ay6YYX/s40/GooglePlus.png' style='padding:25px 5px;' width='40'/></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>¡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>
<!-- Fin bottom sliding menu -->
<div id='toppanel'>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hola invitado!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='javascript:void(0);' id='open'>Abrir menú</a>
<a class='close' href='javascript:void(0);' id='close' style='display: none;'>Cerrar menú</a>
</li>
<li class='right'/>
</ul>
</div>
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTxvSp4UAwXKTJ4Ft1YaJRcSg0K2IQkvjHKp0PnW5v6gMXKU2WpoYIjD0gHz0IDFUY-SxX5s-K1RM4Id5cUbYhiw3_ZYzAbKdV7OPNC3tkYBIFh4QI6HkZQntO_V8VhjhzeVo7hDL-wxb/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/AVvXsEjowYJ5Q0gn1RwyzD0NWmfs5_7rUQQ4MOfB5EAH-NY6lE0zCU7iBjkR09YAjeVnDQc3ZtRJVJrYGPEDSd1bda7-xZEkhR5xC7isrEMM4acLYH0sNZBwWi-N7ov5iCLugb1PpspoQGkkf8Us/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/AVvXsEh0yMr50-IbyrgAzQWogfTVvRN4BSNXKaV9UfzYiKKNecBwfkqaSyxatw6yx5Pa6jDOv59Y4JZQ0ZAFnBbu-RtS-rTIn8Hxo7an4K_yDhqrG8XA0TXnjCGDNNmGp5G_M0YC3u2AFcMYiWfK/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a> <a href='https://plus.google.com/b/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhznzYPqafH3enIDnQQxYI0UWU580c_A6CQes9SAX9FR0NbWJkPsVhxtcT2ZH-1DWGDd8H4KqIRDSEu8JqxZnH175jJE_L12_2DYFlehN9uM76ss5k24kxtuRLhnEUadt03QyT3ay6YYX/s40/GooglePlus.png' style='padding:25px 5px;' width='40'/></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>¡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>
<!-- Fin bottom sliding menu -->
Despues de haber insertado el código, un clic en “Guardar plantilla”
En color verde he mercado donde inicia cada sección para que sea más fácil de identificar:
En la primera sección está el mensaje de bienvenida y los íconos de las redes sociales, en color naranja deberás agregar los IDs de usuario de tus cuentas. El primero es el nombre de tu blog (para el feed), el segundo el de Facebook, luego el de Twitter, y por último el de Google+.
En la segunda sección se encuentra el menú de categorías, qué bien puede ser utilizado para enlazar las etiquetas del blog, o cualquier otro enlace que queramos.
En la tercera sección se ubica la caja de suscripción por correo, recuerda que deberás tener habilitada la suscripción por correo en Feedburner para que puedas utilizarla; si ya lo tienes entonces agrega en la parte de color azul el nombre de tu feed.
Lo que se asoma del menú son imágenes, por lo tanto, si quisieras cambiar el color tendrás que editar todas las imágenes y después cambiar el color de fondo en background: #272727;
El menú usa jQuery, así que recuerda tener sólo una versión de esta librería. Si estuvieras usando Scriptaculous o Mootools tendrás que aplicar un parche para que éste sea compatible.
Y eso es todo, a disfrutar de este elegante menú debajo del blog.
Fecha de la Publicación; 28-07-2019
Fuente; ciudadblogger:
Publicado por;
0 comentarios