-
Cómo instalar una barra de navegación desplegable en Blogger
-
Si quieres que tu blog se destaque de la manada, que necesita para personalizarlo. Usted puede hacer esto tomando o la creación de una plantilla nadie está utilizando, o editando el código HTML para permitir widgets personalizados, tales como un menú desplegable de la barra de navegación. Con el fin de personalizar la barra de navegación, tendrá que ser experimentado con el código HTML - pero se puede añadir una barra de navegación a su blog copiando y pegando unas pocas piezas de código.
Instrucciones
1 Ir a Blogger.com e inicie sesión en su cuenta.
2 Haga clic en "Diseño". Esto le llevará a la interfaz de edición de blogs.
3 Haga clic en la pestaña "Diseño".
4 Seleccione "Edición de HTML".
5 Haga clic en "Descargar plantilla completa" para guardar una copia de la plantilla actual como copia de seguridad, en caso de que algo va mal.
6 Haga clic en la casilla junto a "Expandir plantillas de artilugios".
7 Busque el segmento "Cabecera" de la plantilla de su blog. Verá este texto:
<Header>
8 Copiar y pegar el siguiente código debajo del segmento de cabecera de la plantilla de su blog. Tenga en cuenta que si ya tiene un código de barras de navegación, tendrá que pegar sobre ella.
/
Menú de navegación
-------------------------------------------------- ---- /NavbarMenu {
width: 100%;
altura: 35px;
background: # cdaa7d URL(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x superior;
color: # cdaa7d
margin: 0 auto 0;
padding: 0;
fuente: 12px normal de Arial, Tahoma, Verdana;
border-top: 1px solid # 855e42;
border-bottom: 1px solid # 855e42;
}NavbarMenuleft {
Ancho: 1200px;
flotador izquierdo;
margin: 0;
padding: 0;
}{nav
margin: 0;
padding: 0;
}nav ul {
flotador izquierdo;
list-style: none;
margin: 0;
padding: 0;
}li {nav
list-style: none;
margin: 0;
padding: 0;
}nav li a, #nav li a: link, #nav li a: visited {
color: # ff0000;
bloqueo de pantalla;
text-transform: capitalizar;
margin: 0;
padding: 15px 9px 8 píxeles;
fuente: 12px negrita Arial, Tahoma, Verdana;
}nav li a: hover, #nav li a: active {
fondo: #ffffff;
color: # 8b5a00;
margin: 0;
padding: 15px 9px 8 píxeles;
text-decoration: none;
}nav li li a, li #nav li a: link, #nav li li a: visited {
background: # cdaa7d URL(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x superior;
Anchura: 140px;
Color: #fff;
text-transform: capitalizar;
float: none;
margin: 0;
padding: 10px 7px;
border-bottom: 1px solid # 855e42;
border-left: 1px solid # 855e42;
border-right: 1px solid # 855e42;
fuente: 12px normal de Arial, Tahoma, Verdana;
}nav li li a: hover, #nav li li a: active {
fondo: #ffffff;
color: # 8b5a00;
padding: 10px 7px;
}li {nav
flotador izquierdo;
padding: 0;
}nav li ul {
z-index: 9999;
position: absolute;
izquierda: -999em;
altura: auto;
Anchura: 170px;
margin: 0;
padding: 0;
}nav li ul a {
Anchura: 140px;
}nav li ul ul {
margen: -32px 0 0 171px;
}li nav: libración ul ul, #nav li: hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
izquierda: -999em;
}nav li: hover ul, #nav li li: hover ul, #nav li li li: hover ul, #nav li.sfhover ul, li #nav li.sfhover ul, #nav li li ul {li.sfhover
izquierda: auto;
}nav li: hover, li.sfhover #nav {
Posición: estática;
}9 Encuentra el código HTML siguiente:
"/ B: sección - / div"La forma más sencilla de hacer esto es presionar "CTRL" y "F" al mismo tiempo para abrir la función "Buscar" de su navegador, a continuación, copiar y pegar "/ b: sección - / div" y haga clic en "Buscar".
10 Copiar y pegar el siguiente código debajo de "/ b: sección - / div":
<Div id = "NavbarMenu>
<Div id = "NavbarMenuleft>
<Id = ul 'nav>
<Li> <a expr:href='data:blog.homepageUrl'> principal </a> </ li>
<Li> <a href='#'> SECCIÓN </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SECCIÓN </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SECCIÓN </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SECCIÓN </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SECCIÓN </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SECCIÓN </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SECCIÓN </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SECCIÓN & lt; / a> & lt; / li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div> <! - Barra de navegación final ->11 Haga clic en "Vista previa" para ver cómo se ve, a continuación, haga clic en "Guardar plantilla" si se ve bien.
Consejos y advertencias
- Si no te gusta el aspecto de la barra de navegación, puede cargar la copia de seguridad de su plantilla de Blogger para volver a lo que tenía antes.
