Tutoriales Sobre Blogger: Menu con pestaña de nuevo para blogger con CSS

En este tutorial veremos como crear un menú con pestaña de nuevo para blogger con estilo CSS.
Este menú tiene la particularidad de ponerle en un enlace de nuevo en el menú.
Cuando agregamos un nuevo enlace en el menú tenemos la posibilidad de ponerle la pestaña nuevo.

Antes de comenzar veremos una demostración: 

Demostración

Comencemos: 

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el código CSS

*----***Menu top By Tutoriales-Blogger.info***----*
#menu-top li.selected-a:nth-child(1) ~ #lavalamp {
    left: 141px;
}
#menu-top {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwkcAAk3Yhldw5NBRBo-FaWx1i1kTsDI1es9uMNyGiO8cx9XSovcVjKLkqU2A-X1pywljGu1UvONifn57O0TmfQSm0aqGW2MuRiSeWlP65zvGqZt5-mJ27GAlYgCIne9P6hPbCB3IGn3U/s1600/bg_deg.png") repeat scroll 0 0 #2A2A2A;
border-bottom: 1px solid #191919;
border-top: 2px solid #191919;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
display: block;
height: 50px;
width: 100%;
}
#menu-top > ul {
display: block;
margin: 0 auto;
padding-top: 15px;
position: relative;
text-align: center;
width: 800px;
}
#menu-top li {
display: inline;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
width: auto;
}
#menu-top a:hover {
background: rgba(255, 255, 255, 0.1);
}
#menu-top a {
color: #FFFFFF;
font-size: 13px;
font-weight: normal;
padding: 16px 14px 16px 14px;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
z-index:100;
}
#menu-top span {
background: none repeat scroll 0 0 rgba(0, 126, 255, 0.25);
border: 1px solid rgba(0, 0, 0, 0.7);
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
font-size: 11px;
line-height: 1;
padding: 4px 8px;
position: absolute;
right: -10px;
top: 0px;
z-index: 50;
}
/**hover**/
#menu-top li:nth-child(1):hover ~ #lavalamp {
left: 141px;
}
#menu-top li:nth-child(2):hover ~ #lavalamp {
left: 212px;
}
#menu-top li:nth-child(3):hover ~ #lavalamp {
left: 290px;
}
#menu-top li:nth-child(4):hover ~ #lavalamp {
left: 369px;
}
#menu-top li:nth-child(5):hover ~ #lavalamp {
left: 452px;
}
#menu-top li:nth-child(6):hover ~ #lavalamp {
left: 526px;
}

• Paso 4: Todabia en la plantilla buscamos la siguiente linea (Ctrol + F)

</head>

• Paso 5: Justo por encima de </head> pegamos el código HTML 

<nav class='menu-top' id='menu-top'>
<ul>
<li class='selected-a'><a href='URL'>Inicio</a></li>
<li class='selected-b'><a href='URL'>Menu1</a></li>
<li class='selected-c'><a href='URL'>Menu2</a></li>
<li class='selected-d'><a href='URL'>Menu3<span class='new-iten'>new</span></a></li>
<li class='selected-e'><a href='URL'>Menu4</a></li>
<li class='selected-f'><a href='URL'>Menu5<span class='new-iten'>new</span></a></li>
</ul>
</nav>

• Paso 6: Guardamos los cambios realizados en la plantilla y listo a disfrutar de nuestro menú

  

Nota:- Solo tendrás que cambiar la URL OJO por la de tus enlaces