add

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.

Como agregar un menú para mi blog de Blogger simples pasos

Mire su demostración en el siguiente blog de demos

DEMO

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

Como agregar un menú para mi blog de Blogger simples pasos

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Como agregar un menú para mi blog de Blogger simples pasos

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.

Como agregar un menú para mi blog de Blogger simples pasos

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.

Como agregar un menú para mi blog de Blogger simples pasos

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(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/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(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/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(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/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(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/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

emailEnviar por correo

2 comentarios:

  1. 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).

    __
    Matias Colli
    Perito Judicial en Informática
    M.N. A-128 COPITEC

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios