Menu de categorías

 

Aunque la mayoría ya sabe hacer un menú de categorías basado en las etiquetas cada día son más los usuarios nuevos de Blogger que preguntan cómo hacerlo, así que vamos a ver cómo crear un menú (cualquiera que sea) basado en las etiquetas del blog.

 

Lo primero que necesitamos es tener etiquetadas las entradas, es decir, asignarles una catagoría a cada una según el tema del que hable o la información que contenga. Por ejemplo, una entrada que contengas videos podemos ponerle la etiqueta Videos.

Para hacerlo tenemos que editar las entradas yendo a Creación de entradas | Editar entradas | Editar
Ahí veremos en la parte de abajo un espacio en blanco, ahí escribimos la etiqueta que le corresponde, en nuestro ejemplo se llamará Videos.

Si quisieras que la entrada tenga más de una etiqueta sólo agrega una coma y después agrega la otra etiqueta, por ejemplo Videos, Música

Hacemos lo mismo para todas las entradas tanto las ya publicadas como las nuevas que publiquemos.

Ahora vamos a Diseño | Elementos de la página | Añadir un gadget y seleccionamos el gadget que se llama Etiquetas y guardamos los cambios.

El siguiente paso es buscar un menú que nos agrade, en la sección Menús de Ciudad Blogger puedes encontrar algunos, pero también encontrarás estupendos menús buscando un poco en Google.
Escoge el que quieras e instálalo en tu blog, cada menú requiere distintos pasos, pero al final y la parte que ahora nos interesa es cuando tenemos que poner los enlaces del menú, generalmente veremos algo muy parecido a esto:

<ul>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a href='URL del enlace'>Pestaña 3</a></li>
</ul>

Bien, para poder llenar esos enlaces hacemos lo siguiente, entramos a nuestro blog y buscamos el gadget de etiquetas que pusimos, nos posicionamos en el nombre de la etiqueta a la que queremos conseguir su URL y damos click con el botón derecho.

Según sea el navegador que usen será la opción que debamos elegir, pero lo que haremos será copiar la URL del enlace. Así es como se ve en los distintos navegadores:

Ya que hemos copiado la URL de la etiqueta la pegamos en la parte del menú que corresponde:

<li><a href='URL del enlace'>Pestaña 1</a></li>

Lo mismo haremos con todas las etiquetas que queremos agregar en el menú.
En general, las URL de las etiquetas son algo así:

http://nombre-de-mi-blog.blogspot.com/search/label/NombreDeLaEtiqueta

Podemos ponerlas así para evitar el paso anterior, pero en el caso de que tus etiquetas tengan acentos, espacios o caracteres especiales entonces será mejor seguir los pasos tal como lo he explicado

Y así de simple habremos creado un menú por categorías. Ahora verás que al dar click en una pestaña del menú, por ejemplo Videos, aparecerán todas las entradas que contengan esa etiqueta.

 

En el mismo menú se pueden agregar otros enlaces, ya sea de páginas estáticas o de otra dirección web, de modo que puedes personalizar tu menú como tú quieras.

 

Fuente

Cómo usar cualquier menú en las plantillas del Diseñador de Plantillas de Blogger

 

Desde que aparecieron las plantillas del Diseñador de plantillas de Blogger muchos de los comentarios acerca de los Menús son: que los menús no se ven igual que al del ejemplo de equis entrada, o que las subpestañas no se despliegan. Y la respuesta que siempre doy es Los menús de subpestañas no funcionan en esas plantillas.

 

La razón es que esas plantillas tienen estilos predefinidos en esa área que inhabilitan cualquier otro menú que se agregue debajo de la cabecera.

Pero les había prometido encontrar la forma de que los menús funcionen en esas plantillas, así que veamos cómo hacer funcionar cualquier menú en las plantillas hechas a través del Diseñador de plantillas de Blogger.

Lo primero es entrar en Diseño | Edición de HTML y SIN expandir los artilugios busca esta línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Elimina lo que está en color rojo.
Es posible que tengas muchas partes como la que está en rojo, elimina todas las que encuentres.

Luego busca esta parte en la plantilla:

/* Tabs
----------------------------------------------- */

Y elimina todo lo que haya dentro de ello. Por ejemplo, en la plantilla Awesome Inc. eliminarías todo lo que está en color verde

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */

Ya eliminado, en su lugar agrega lo siguiente:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

Una vez hecho lo anterior podremos agregar cualquier menú y estos se verán como deben verse y las subpestañas podrás desplegarse sin problema.

Fuente

Como crear un Sitemap para blogs en Blogger

 

Como crear un Sitemap para blogs en Blogger

Un Sitemap es un archivo de texto en formato XML que contiene un listado con todas las páginas de tu sitio y alguna que otra información adicional. La importancia del Sitemap es crucial desde un punto de vista SEO y de posicionamiento, pues ayuda a Google y al resto de motores de búsqueda a indexar mejor tu sitio y a la larga esto repercutirá en un mayor número de visitas a tu web o blog procedentes de buscadores.

El Sitemap de cualquier blog debería contener todas las direcciones URL del sitio, pero desgraciadamente eso dista mucho de ser cierto si tu blog está alojado en Blogger ya que el Sitemap que se crea por defecto tan solo contiene un número muy reducido de entradas que además son las más recientes.

Cómo podrás imaginar, esto es sumamente contraproducente para tu blog porque las páginas más antiguas del mismo no aparecerán en el sitemap y podría ocurrir incluso que nunca lleguen a ser indexadas por los motores de búsqueda, que tarden mucho más en indexarse o bien que con el tiempo salgan del indice y nunca más vuelvan a aparecer en los resultados de búsqueda, con la consiguiente perdida de visitas.

No obstante existe una solución para éste problema y vamos a verla a continuación.

Crear un sitemap completo para blogger

• Paso 1: Si aún no tienes cuenta en las herramientas para webmasters de Google, ahora es el momento de crearla e incluir tu blog en ella. Es muy sencillo y en unos minutos lo tendrás funcionando.
• Paso 2: Una vez hayas incluido tu blog en las herramientas para webmasters de Google, abre el siguiente generador de Sitemaps y teclea la URL completa de tu blog en blogspot. (Ej: http://ladirecciondemiblog.blogspot.com/)
• Paso 3: El resultado es un listado de archivos que siguen el estándar XML Sitemap y que en conjunto contienen todas y cada una de las páginas de tu blog. Ahora solamente hemos de avisar a Google, Yahoo y Bing para que lean dichos archivos y exploren las URL que contienen.

Para hacerlo has de añadir de forma manual y dentro de las herramientas para webmasters de Google cada uno de los enlaces a los archivos de sitemap generados. Para Bing y Yahoo basta con hacer clic uno por uno en los enlaces de color azul que se han generado y automáticamente empezarán a tener en cuenta dichos motores de búsqueda tus archivos sitemap.

Una vez hayas subido los Sitemaps, dentro del panel de herramientas para webmasters deberías ver algo similar a esto.

Si ves una cruz roja o un símbolo de exclamación naranja en lugar de la marca verde en alguna linea, significa que algo fue mal durante el proceso de lectura del sitemap. Verifica que el archivo existe tecleando la URL del sitemap en la barra de direcciones de tu navegador.

Como último consejo añadir además que incluso si has migrado de Blogger a WordPress sigue siendo aconsejable que generes y envíes el sitemap del antiguo blog en Blogger a los motores de búsqueda ya que curiosamente esto ayuda a los buscadores a descubrir más rápidamente tus nuevas páginas en WordPress.

Fuente

Menú en forma de pestañas en Blogger

Menú en forma de pestañas en Blogger

He recibido varios emails donde me solicitaban ayuda para conseguir poner el menu en el blog tal como lo tengo yo, en forma de pestañas en la parte superior de la página.
He de deciros que yo lo conseguí siguiendo los pasos de Trucos Blogger que a su vez tomó la idea de Hoctro's Place, aclarado este punto,sigamos con lo nuestro...
Antes de empezar has de tener etiquetados todos tus post sino es imposible que puedas colocar las pestañas.
1- Vamos a la Plantilla en Edicion de Html y Expandimos las plantillas de artilugios.
2- Buscamos este trozo de código: <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> y lo cambiamos por este otro:
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">
3-Justo antes de: ]]></b:skin> colocamos este codigo completo:

/*- Menu Tabs F */ #tabsF { float:left; width:100%; font-size:80%; line-height:normal; border-bottom:1px solid #000; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url("http://3.bp.blogspot.com/_8PJ-pgoBhWQ/Sf9qIJ35QkI/AAAAAAAAGxQ/t48-cC0Ogkk/s400/tableftF.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url("http://1.bp.blogspot.com/_8PJ-pgoBhWQ/Sf9qMJVnJmI/AAAAAAAAGxY/K6ntns2CUvI/s400/tabrightF.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; }

4- Guardamos cambios.
En este momento añadimos las etiquetas al blog.
Nos dirigimos a la Plantilla--Elementos de la pagina--Añadir nuevo elemento de pagina, y añadimos las Etiquetas.
5- Por ultimo buscamos el siguiente codigo:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title><h2> <b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

lo cambiamos por:

<b:widget id='Label1' locked='false' title='' type='Label'> <b:includable id='main'> <div id='tabsF'> <ul> <li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li> <b:loop values='data:labels' var='label'> <li><a expr:href='data:label.url'><span><data:label.name/></span></a></li> </b:loop> </ul> <!-- <b:include name='quickedit'/> --> </div> </b:includable> </b:widget>

6- ¡Ya está listo! Si todo ha ido bien, las pestañas deberían estar situadas en el sidebar de nuestro blog, solo queda moverlas a la parte superior arrastrándolas hacia allí.

Nos leemos en el siguiente tutorial