miércoles, 6 de julio de 2016

Menu para blogger

Si nuestra plantilla no tiene un menú, o quieres tener uno distinto puedes seguir los siguientes pasos para tener un menú básico y partir de ahí para personalizarlo


Siguiendo los pasos tendremos nuestro menú realizado con HTML y CSS

1. Se recomienda hacer una copia de seguridad de tu blog, en caso de no saber que parte del código se modificó se podría restaurar.

Como hacer una copia de seguridad de nuestro blog

2. Para empezar copiamos el  siguiente código


<div id=’NavMenu’>
<div id=’NavMenuleft’>
<ul id=’nav’>
<li><a href=’#’>Menu</a></li>
<li>
<a href=’#’>Seccion desplegable N1</a>
<ul>
<li><a href=’#‘>submenu 1</a></li>
<li><a href=’#’>submenu 2</a></li>
<li><a href=’#’>submenu 3</a></li>
</ul>
</li>
<li>
<a href=’#’>Seccion desplegable N2</a>
<ul>
<li><a href=’#’>submenu 1</a></li>
<li><a href=’#’>submenu 2</a></li>
<li><a href=’#’>submenu 3</a></li>
<li><a href=’#’>submenu 4</a></li>
</ul>
</li></ul>
</div>
</div>

3. Vamos a la sección de diseño y agregamos un nuevo gadget



Seleccionamos HTML/JavaScript y pegamos el código dentro


4. Añadimos un titulo "Menu" al gadget y editamos el código adentro, se recomienda editar el código antes en un editor de texto como "note pad ++ o sublime", si no tienes conocimientos de estas herramientas no hay problema. Dentro del código cambiaremos principalmente los "#" por los enlaces a donde debe redireccionar estos. Ejemplo

<li><a href=’#’>submenu 4</a></li>   por <li><a href=’doingblogger.blogspot.com/submenu4’>submenu 4</a></li>

Hacemos lo mismo con todos y estructuramos el menú según nuestras preferencias


5. Añadiremos el código CSS el cual le da el estilo al menú
Nos ubicamos en Plantilla --> Personalizar --> avanzado --> Añadir CSS, aquí dentro pegamos el siguiente código



/* Menu desplegable inicio —————- */


.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #ffffff; text-align: left !important;}/*Posición del texto del menu*/

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #eeeeee; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #ffffff; /*Color del fondo de las pestañas al pasar el ratón por encima*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}

#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
border: 1px solid #333333; /*Borde del menú*/
background: #333333; /*Color de fondo del menú*/
}
#NavMenuleft {
width: 923px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {margin: 0 auto; padding: 0; background:#fff;}/*Color del fondo del menu*/

#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
font: normal 16px Arial; /*Tamaño y tipo de fuente de las pestañas */
color: #666666; /*Color del texto de las pestañas*/
display: block;
margin: 0;
padding: 10px 15px 10px;
}
#nav li a:hover, #nav li a:active {
color: #cccccc; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal 16px Arial; /*Tamaño y tipo de fuente de los submenus*/
background: #eeeeee; /*Color del fondo de las subpestañas*/
width: 150px; /*Ancho de los submenus*/
color: #333333; /*Color del texto de los submenus*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #ffffff; /*Color del fondo de los submenus al pasar el ratón por encima*/
color: #222222; /*Color del texto de los submenus al pasar el ratón por encima*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.
sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }


/* Menu desplegable fin —————- */



6. Como ven, el código CSS esta comentado para que sepan que linea modifica exactamente que parte de nuestro menú, después de esto no queda sino probarlo






Falta algo?.....Comentalo...!!!



lunes, 4 de julio de 2016

Editar menú en plantilla Blogger


Muchas plantillas al descargarlas vienen un con menú predefinido el cual no se encuentra en ningún bloque en nuestra sección de diseño, para esto debemos realizar el siguiente proceso.

1. Entramos a -->  plantilla, editar HTML y CRTL +F

Aquí vamos a buscar alguna palabra que tenga nuestro menú, veamos unos ejemplos


El menú tiene las opciones "Home, about, contact, facebook y twitter"

Al presionar CTRL+F escribimos alguna de estas opciones.

NOTA: Recomendamos buscar palabras como about u otra diferente a "home" ya que esta palabra se repite en varias partes del código.

Debemos encontrar el código del menú así:


2. Reemplazamos cada palabra con la que deseemos que salga en el menú, también vamos a reemplazar los "#" por la dirección URL a donde queremos que vaya este enlace.

3. En muchos casos aparecen mas opciones dentro del menú, esto es una sección hija del menú, es decir que esta dentro de una opción. Al tener la etiqueta <li> opcion1 </li> significa que es una opción primaria, es decir que aparecerá a primera vista en el menú, dentro de ella debe haber una una opción con etiqueta <ul> y dentro de ella de nuevo opciones con etiqueta <li>, estas opciones dentro son opciones secundarias que aparecen en el menú únicamente si se clickea la opción primaria.



4. Si queremos que una de las opciones sea la búsqueda de una etiqueta o que se clasifiquen las entradas por temas, debemos seleccionar una etiqueta y copiar la URL a la que nos redirige. La dirección URL debe ser similar a esta

http://doingblogger.blogspot.com.co/search/label/herramientas

Siendo la ultima palabra el nombre de la etiqueta. Copiamos esta dirección y la reemplazamos por el "#".


¿Donde puedo ver mis etiquetas?