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 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: 

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://lh3.googleusercontent.com/-UkdT0k9QEVE/UPHpz1iKFSI/AAAAAAAAES4/OOHg-Vgs-KI/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 
- - 2 Comentarios
Tag

Comentarios (2)

  1. ¡Hola! Acabo de descubrir tu blog. ¡Y me encanta! Tiene mogollón de cosas MUY útiles para poner en tu blog.
    PD: Si te ocurre en algún momento de tu vida borrarlo, te juro que voy a tu casa y te corto la cabeza!

    ResponderEliminar
  2. @:)Anabel;)Gracias por tu comentario,que gusto que te encante el blog. Con respecto a tu posdata, vamos a tratar de estar siempre conectados con nuevos tutoriales. La verdad que con esa advertencia tengo miedo de abandonar ajajaja :D

    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