Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
En este tutorial veremos como agregar un hermoso menú para blogger con CSS. La particularidad de este menú que sus enlaces son de distintos colores lo que lo hará un menú muy llamativo para tus lectores.


Antes de comenzar veremos una demostración: 

Comencemos: 

  • Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML.
  • Paso 2: Buscamos la siguiente linea (Ctrol + F).
]]></b:skin>

  • Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS. 
/*Menu creado por Tutoriales-Blogger.info*/
.main-nav{list-style:none}
main-nav-wrap{margin: 19px 0 0 0
}.ie8 .main-nav-wrap{margin:0}
.main-nav li{
float:left;
width:12.5%;
position:relative;
-moz-transition:background-color 0.4s ease;
-o-transition:background-color 0.4s ease;
-webkit-transition:background-color 0.4s ease;
-ms-transition:background-color 0.4s ease
}
.main-nav li:hover{
background:rgba(0,0,0,0.4);
-moz-transition:background-color 0.1s ease;
-o-transition:background-color 0.1s ease;
-webkit-transition:background-color 0.1s ease;
-ms-transition:background-color 0.1s ease
-moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 6px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;
}
.main-nav a{
border-top: 0 none;
color: white;
display: block;
font-family: 'Oswald',sans-serif;
font-size: 15px;
letter-spacing: 0.5px;
margin-left: -10px;
overflow: hidden;
padding: 10px;
position: relative;
text-align: center;
text-transform: uppercase;
z-index: 2;
}
.ie8
.main-nav a:before{display:none
}.ie8
.main-nav a{padding:10px !important
}
.main-nav span{
display:block;
text-align:center;
font-size:9px;
white-space:nowrap
}
.main-nav .forums a:before{background-position:center -40px
}
.main-nav .snippets a:before{
background-position:center -80px
}
.main-nav .almanac a:before{
background-position:center -160px
}
.main-nav .videos a:before{
background-position:center -120px
}
.main-nav .gallery a:before{
background-position:center -200px
}
.main-nav .downloads a:before
{background-position:center -240px
}
.main-nav .deals a:before
{background-position:center -280px
}
.home .main-nav .articles a,.single-post .main-nav .articles a,.Vanilla .main-nav .forums a,.page-template-page-snippet-cat-php .main-nav .snippets a,.page-template-page-snippet-php .main-nav .snippets a,.page-template-video-archive-php .main-nav .videos a,.page-template-video-single-php
.main-nav .videos a,.page-template-page-almanac-group-php .main-nav .almanac a,.page-template-page-almanac-single-php .main-nav .almanac a,.post-type-archive-screenshot .main-nav .gallery a,.single-screenshot .main-nav .gallery a,.page-template-page-downloads-php .main-nav .downloads a,.page-template-page-deals-php .main-nav .deals a{color:black}
.main-nav li:before{content:"";position:absolute;top:100%;left:0;right:0;height:8px}.ie8 .main-nav li:before{display:none}.page-template-video-archive-php .main-nav .videos,.page-template-video-single-php .main-nav .videos,.main-nav .videos:hover{background:#01b0ec}.page-template-video-archive-php .main-nav .videos:before,.page-template-video-single-php .main-nav .videos:before{background:#0484b0}.home .main-nav .articles,.single-post .main-nav .articles,.main-nav .articles:hover{background:#ef7901}.home .main-nav .articles:before,.single-post .main-nav .articles:before{background:#cf7000}.Vanilla .main-nav .forums,.main-nav .forums:hover{background:#d54421}.Vanilla .main-nav .forums:before{background:#bb2904}.page-template-page-snippet-cat-php .main-nav .snippets,.page-template-page-snippet-php .main-nav .snippets,.main-nav .snippets:hover{background:#98bf0d}.page-template-page-snippet-cat-php .main-nav .snippets:before,.page-template-page-snippet-php .main-nav .snippets:before{background:#87a812}.page-template-page-almanac-group-php .main-nav .almanac,.page-template-page-almanac-single-php .main-nav .almanac,.main-nav .almanac:hover{background:#7449f1}.page-template-page-almanac-group-php .main-nav .almanac:before,.page-template-page-almanac-single-php .main-nav .almanac:before{background:#5531bf}.post-type-archive-screenshot .main-nav .gallery,.single-screenshot .main-nav .gallery,.main-nav .gallery:hover{background:#b147a3}.post-type-archive-screenshot .main-nav .gallery:before,.single-screenshot .main-nav .gallery:before{background:#922a84}.page-template-page-downloads-php .main-nav .downloads,.main-nav .downloads:hover{background:#f6b402}.page-template-page-downloads-php .main-nav .downloads:before{background:#d49b00}.page-template-page-deals-php .main-nav .deals,.main-nav .deals:hover{background:#8d8d8d}.page-template-page-deals-php .main-nav .deals:before{background:#5e5e5e}@-webkit-keyframes nav-1{50%{background:#ef7901}}@-moz-keyframes nav-1{50%{background:#ef7901}}.home .main-nav .articles{-webkit-animation:nav-1 1.5s 1s ease 1;-moz-animation:nav-1 1.5s 1s ease 1}@-webkit-keyframes nav-2{50%{background:#d54421}}@-moz-keyframes nav-2{50%{background:#d54421}}.home .main-nav .forums{-webkit-animation:nav-2 1.5s 1.1s ease 1;-moz-animation:nav-2 1.5s 1.1s ease 1}@-webkit-keyframes nav-3{50%{background:#98bf0d}}@-moz-keyframes nav-3{50%{background:#98bf0d}}.home .main-nav .snippets{-webkit-animation:nav-3 1.5s 1.2s ease 1;-moz-animation:nav-3 1.5s 1.2s ease 1}@-webkit-keyframes nav-4{50%{background:#01b0ec}}@-moz-keyframes nav-4{50%{background:#01b0ec}}.home .main-nav .videos{-webkit-animation:nav-4 1.5s 1.3s ease 1;-moz-animation:nav-4 1.5s 1.3s ease 1}@-webkit-keyframes nav-5{50%{background:#7449f1}}@-moz-keyframes nav-5{50%{background:#7449f1}}.home .main-nav .almanac{-webkit-animation:nav-5 1.5s 1.4s ease 1;-moz-animation:nav-5 1.5s 1.4s ease 1}@-webkit-keyframes nav-6{50%{background:#b147a3}}@-moz-keyframes nav-6{50%{background:#b147a3}}.home .main-nav .gallery{-webkit-animation:nav-6 1.5s 1.5s ease 1;-moz-animation:nav-6 1.5s 1.5s ease 1}@-webkit-keyframes nav-7{50%{background:#f6b402}}@-moz-keyframes nav-7{50%{background:#f6b402}}.home .main-nav .downloads{-webkit-animation:nav-7 1.5s 1.6s ease 1;-moz-animation:nav-7 1.5s 1.5s ease 1}@-webkit-keyframes nav-8{50%{background:#8d8d8d}}@-moz-keyframes nav-8{50%{background:#8d8d8d}}.home .main-nav .deals{-webkit-animation:nav-8 1.5s 1.7s ease 1;-moz-animation:nav-8 1.5s 1.7s ease 1}

  • Paso 4: Todavia en la plantilla buscamos la siguiente linea  (Ctrol + F)
</head>
  • Paso 5: Justo por encima de </head> pegamos el siguiente código HTML
<nav class='main-nav-wrap' id='main-nav-wrap'><ul class='main-nav group'><li class='articles'><a href='/'>Inicio<span>Bienvenido</span></a></li><li class='forums'><a href='URL' rel='nofollow'>Menu 1<span>Enlace Menu 1</span></a></li><li class='snippets'><a href='URL' rel='nofollow' target='_blank'>Menu 2<span>Enlace Menu 2</span></a></li><li class='videos'><a href='URL' rel='nofollow' target='_blank'>Menu 3<span>Enlace Menu 3</span></a></li><li class='almanac'><a href='URL' rel='nofollow'>Menu 4<span>Enlace Menu 4</span></a></li><li class='gallery'><a href='URL' rel='nofollow'>Menu 5<span>Enlace Menu 5</span></a></li><li class='downloads'><a href='URL' rel='nofollow'>Menu 6 <span>Enlace Menu 6</span></a></li><li class='deals'><a href='http://www.tutoriales-blogger.info/' rel='nofollow'>Volver <span>Volver al Tutorial</span></a></li></ul></nav>
  • Paso 6: Guardamos los cambios realizados en nuestra plantilla

Listo ya tendriamos nuestro menu creado con CSS en nuestro Blogger

Nota:- Solo tendrías que cambiar URL ROJO por tus URL y los títulos de los menu 
- - 10 Comentarios
Tag

Comentarios (10)

  1. En el demo se ve estupendo, pero lo he hecho en mi blog, y no se ve tan genial como el demo, creo que la plantilla que uso, tiene algo mal.

    ResponderEliminar
  2. @Peter
    Peter

    Podrías darme la url de tu blog o decirme mas o menos que detalles tiene.


    Gracias por tu comentario un abrazo

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. @Peter
    Peter

    Solo te puedo 2 ayudas una agregar el código HTML en un gadget o eliminar este código CSS.

    .main-nav{list-style:none}
    main-nav-wrap{margin: 19px 0 0 0
    }.ie8 .main-nav-wrap{margin:0}

    ResponderEliminar
  5. Gracias amigo, logré solucionar ese problema, me podrías decir también como se borran los circulos que aparecen al la lado de la palabra? quiero que solamente quede la palabra.

    ResponderEliminar
  6. si esta padre muchas gracias pero creo que me perdi como hago para editarlo :>)
    me puenden ayudar :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :))

    ResponderEliminar
  7. hola buenas tardes coloque este menu en mi plantilla pero una pregunta como le cambio el color transparente del menu es decir darle estilo a los cuadros no en el estilo del hoover gracias

    ResponderEliminar
  8. @Jesus Alex Perdón por la demora en tu comentario, pero dime exactamente quieres que cada menú tengo su color o que todos tengan un color en particular.

    ResponderEliminar
  9. hola fernando no te preocupes alli esta el blog donde coloque el menu http://recetasfacilesonline.blogspot.com/ si tu ves queda balnco el fondo ya que el blog tiene fondo blanco lo que deseo es que esa parte del menu tenga otro color o en su defecto crearlo o borde para distinguirlño gracias y feliz dia

    ResponderEliminar
  10. La demostración está genial. No obstante al post le falta algo de información sobre su funcionamiento, para los más novatos con CSS.

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar