Tutoriales Sobre Blogger: Crear un hermoso menu para Blogger con CSS

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: 

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