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ú a nuestro blogger. Este menú tiene la particularidad de dar una descripción sobre cada enlace en cual agregaremos con un efecto Rollover





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 TutorialesBlogger.blogspot.com */
#menu6 ul {
    list-style:none;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1.1em;
    float:left;
    clear:both;
    margin:20px;
    border:4px groove #ffe430;
}
#menu6 ul li{
    float:left;
}
#menu6 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#fff;
    background-color:#ffc730;
    width:170px;
}
#menu6 ul li a span{
    display:block;
}
#menu6 ul li a span.title{
    border-bottom:2px solid #ffc730;
}
#menu6 ul li a:hover{
    background-color:#fff;
}
#menu6 ul li a:hover span.title{
    color:#ffc730;
    border-bottom:2px solid #ffe430;
}
#menu6 ul li a span.text{
    padding:0px 5px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4em;
    background-color:#ffc730;
    visibility:hidden;
    color:#fff;
}
#menu6 ul li a:hover span.text{
    visibility:visible;
}
  • Paso 4: Guardamos los cambios efectuados en la plantilla

Ahora agregaremos el Codigo HTML en un gadget

  • Paso 5: Vamos a Blogger>>Diseño>>Añadir nuevo Gadget>>HTML/Javascript
  • Paso 6: Dentro del Gadget agregamos el siguiente codigo HTML
<div id="menu6">
            <ul>
                <li><a href="URL">
                        <span class="title">About</span>
                        <span class="text">Quienes Somos</span>
                    </a>
                </li>
                <li><a href="URL">
                        <span class="title">Tips</span>
                        <span class="text">Tutoriales Blogger</span>
                    </a>
                </li>
                <li><a href="URL">
                        <span class="title">Blogger</span>
                        <span class="text">Plantillas Blogger</span>
                    </a>
                </li>
                <li><a href="URL">
                        <span class="title">Map</span>
                        <span class="text">Mapa del Blog</span>
                    </a>
                </li>
             
                <li><a href="URL">
                        <span class="title">Contacto</span>
                        <span class="text">Contacta con Nosotros</span>
                    </a>
                </li>
             </ul>
        </div>

Nota:- Solo deberas cambiar URL por las URL para cada menu
- - 1 Comentarios
Tag

Comentarios (1)

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