Como agregar un menú para mi blog de Blogger simples pasos
Es divertido aprender nuevos trucos para Blogger y saberlos implementar correctamente en nuestro blog de Blogger. Este nuevo menú desplegable para Blogger utiliza solo estilos CSS3 y nada de jQuery, esto hará que sea frágil al momento de cargar en nuestro blog y no le causara ningún daño a su estructura. Además funciona correctamente en todos los navegadores web, a excepción de Internet Explorer, ya que el IE7 siempre carece de compatibilidad con CSS3, pero solo en sus bordes redondeados. Debemos insertar el código CSS3 en el Editor HTML de nuestra plantilla, pero también sirve para insertarlo en un widget.
Mire su demostración en el siguiente
blog de demos
Ahora vamos a insertar este menú desplegable
en el Editor HTML de nuestra plantilla y lo ubicaremos arriba del encabezado
principal de nuestro blog
1 Ir a Blogger
2 Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu
plantilla, se mostrara igual como la imagen que esta a continuación
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, a continuación
mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en
tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al
momento que yo diga busca este código.
3 Busca este código
header1
|
Una vez que hayas encontrado el código
te mostrara así como la siguiente imagen, claro que con el título respectivo de
tu blog, esto es solo un ejemplo de guía.
Debemos insertar el siguiente código donde
está especificado en la imagen y dice “AQUÍ VAMOS A UBICAR NUESTRO CODIGO”
<style>
#ayudadeblogger-Container {
font: normal 1em Arial,
Helvetica, sans-serif;
width:100%;
float:left;
}
a {
color: #333;
}
#ayudadeblogger {
margin: 0;
padding: 7px 6px 0;
background: #DF0101
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVbfH6rTRZe0FhDn36CJGL8b3qI__khost0a5Dqk5-K2uaA137sO0CB4vKO5GTiK-sal-jRtZ1dA9dKXReB5pEYHMC4WBcHtTmxjIB0D4Wf6Ro2ChL10_J9qHODUC25vPx9XXT1ZxHLxI/s1600/gradient.png)
repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px
3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px
rgba(0,0,0, .4);
}
#ayudadeblogger li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none; }
/* main level */
#ayudadeblogger a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius:
1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px
rgba(0,0,0, .3);
}
#ayudadeblogger a:hover {
background: #000;
color: #fff;
}
/* main level hover */
#ayudadeblogger .current a, #ayudadeblogger li:hover > a {
background: #666
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVbfH6rTRZe0FhDn36CJGL8b3qI__khost0a5Dqk5-K2uaA137sO0CB4vKO5GTiK-sal-jRtZ1dA9dKXReB5pEYHMC4WBcHtTmxjIB0D4Wf6Ro2ChL10_J9qHODUC25vPx9XXT1ZxHLxI/s1600/gradient.png)
repeat-x 0 -40px;
color: #444;
border-top: solid 1px
#f8f8f8;
-webkit-box-shadow: 0 1px
1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px
rgba(0,0,0, .2);
box-shadow: 0 1px 1px
rgba(0,0,0, .2);
text-shadow: 0 1px 0
rgba(255,255,255, 1);
}
/* sub levels hover */
#ayudadeblogger ul li:hover a,
#ayudadeblogger li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#ayudadeblogger ul a:hover {
background: #DF0101
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVbfH6rTRZe0FhDn36CJGL8b3qI__khost0a5Dqk5-K2uaA137sO0CB4vKO5GTiK-sal-jRtZ1dA9dKXReB5pEYHMC4WBcHtTmxjIB0D4Wf6Ro2ChL10_J9qHODUC25vPx9XXT1ZxHLxI/s1600/gradient.png)
repeat-x 0 -100px !important;
color: #fff !important;
text-align:left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px
rgba(0,0,0, .1);
}
/* dropdown */
#ayudadeblogger li:hover > ul {
display: block;
}
/* list 2 */
#ayudadeblogger ul {
display: none;
text-align:left;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVbfH6rTRZe0FhDn36CJGL8b3qI__khost0a5Dqk5-K2uaA137sO0CB4vKO5GTiK-sal-jRtZ1dA9dKXReB5pEYHMC4WBcHtTmxjIB0D4Wf6Ro2ChL10_J9qHODUC25vPx9XXT1ZxHLxI/s1600/gradient.png)
repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px
3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px
rgba(0,0,0, .3);
box-shadow: 0 1px 3px
rgba(0,0,0, .3);
}
#ayudadeblogger ul li {
float: none;
margin: 0;
padding: 0;
}
#ayudadeblogger ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* list */
#ayudadeblogger ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#ayudadeblogger ul li:first-child > a {
-webkit-border-top-left-radius:
9px;
-moz-border-radius-topleft:
9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright:
9px;
}
#ayudadeblogger ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#ayudadeblogger:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#ayudadeblogger {
display: inline-block;
}
</style>
<div
id="ayudadeblogger-Container">
<ul
id="ayudadeblogger">
<li class="current"><a
href="/">Inicio</a></li>
<li><a href="#">Noticias</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Espectaculos</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Deportes</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Entretenimiento</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Videos</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Musica</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Economía</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Contactos</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
</ul></div>
<br/>
|
Realiza
estos cambios:
Cambia las palabras que están marcadas
de color rojo por el nombre que quieras mostrar
Cambia las palabras que están marcadas
de color verde por el nombre que quieras mostrar
Y borra los símbolos numerales # por las
URLs de los post que quieras dar a conocer en el menú.
Eso es todo, es momento de dar un clic en
“Guardar plantilla” y mira los nuevos cambios en tu blog
Fácil verdad!
Recuerda suscribirte y recibirás mis
nuevas actualizaciones directamente en tu correo electrónico
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Sumamente útil, me ha servidor para desarrollar demarelectromedicina.blogspot.com. Los colores los pude cambiar utilizando el HTML Color Picker (http://www.w3schools.com/tags/ref_colorpicker.asp).
ResponderEliminar__
Matias Colli
Perito Judicial en Informática
M.N. A-128 COPITEC
Buena info
ResponderEliminar