Iconos Twitter para Halloween

Ya quedan pocos días para Halloween, así que en DesingBlog han pensado que sería una buena idea para aquellos que gusten de decorar su blog con este motivo, el disponer de un icono "terrorífico" para el enlace de Twitter.

En DesingBlog nos la presentan como una "espeluznante" calabaza, aunque a decir verdad, a mi me parece de los más simpática.

Están disponibles en un archivo PNG con tres tamaños diferentes.

Descargar Iconos Twitter para Halloween

Navbar transparente Blogger

A través de un comentario me entero por Fran administrador de Bailadicción que hay dos nuevas opciones para mostrar la barra de Blogger (Navbar) que yo aún no había visto: "Claro transparente" y "Oscuro transparente".

Dependiendo del color de fondo del blog no en todos los casos el resultado es demasiado aceptable por lo que he comprobado...

Podéis ver como queda el "Claro transparente" sobre fondo blanco en los blogs de Fran.

Imagen y fondo de color en los títulos de la sidebar

Colocar una imagen a la derecha del título

[1] En nuestro panel vamos a Edición HTML y localizamos este código:

.sidebar h2{

[2] Colocamos este código justo debajo de esa línea:


background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding: 5px;



En el caso de que .sidebar h2{ no estuviera en el código de nuestra plantilla (como es el caso de algunas plantillas de Blogger) lo incluimos directamente antes de ]]></b:skin> de esta manera:

.sidebar h2{
background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding:5px;
}

Cambios:

Para eliminar o cambiar el color de fondo, en la línea del background borramos el código del color (#CEF7FF) o lo cambiamos por el del color que queramos.
Para cambiar el color, grosor o aspecto del borde, lo haremos en la línea del border y si no queremos mostrar ningún borde, eliminamos esa línea por completo.

Colocar una imagen a la izquierda del título

El código a usar entonces, sería algo como esto:


.sidebar h2{
background: #CEF7FF url(url_de_la_imagen) no-repeat left;
border: 1px solid #808080;
padding: 5px 5px 5px 35px;
}



Cambios:

Los cambios que podemos hacer son casi los mismos que antes, si os fijáis en el código la única diferencia está en la línea del padding.

En esa línea tendríamos que poner, en lugar del 35px, el mismo valor o incluso algo más que el ancho de la imagen que vamos a usar para separarla del título.

Colocar una imagen distinta en cada título a derecha o izquierda


[1] Localizamos el código de cada gadget con los artilugios expandidos, que empezará por algo como esto (ejemplo de gadget HTML):


<b:widget id='HTML2' locked='false' title='Menú del blog' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>

La línea que está destacada en negrita, es la que corresponde al título del gadget y como podéis ver he marcado en naranja la clase que tiene añadida (class='title').


[2] Cambiamos la clase del título (class='title') por otra, por ejemplo class='TitleIcon' y colocamos estas líneas de CSS antes de ]]></b:skin> en la plantilla si queremos mostrar la imagen a la derecha del título:

.TitleIcon {
background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding:5px;
}

Si vamos a mostrar la imagen a la izquierda del título, entonces tendría que ser algo como esto:

.TitleIcon {
background: #CEF7FF url(url_de_la_imagen) no-repeat left;
border: 1px solid #808080;
padding: 5px 5px 5px 35px;
}

Algunos gadget como el de Archivos por ejemplo, podrían no tener una clase añadida en el código del título:

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Se la añadimos:

<b:if cond='data:title'>
<h2 class='Archivo'><data:title/></h2>
</b:if>

Y seguimos el mismo método que para los demás gadget:

.Archivo {
background: #FF99CC url(url_de_la_imagen) no-repeat right;
border: 1px solid #999900;
padding:5px;
}

Enlaces del sitio en Google

Una de las preguntas que me hacen varias veces incluso a diario, es que hacer para que en las búsquedas de Google se muestren debajo del título del blog los enlaces mas relevantes del sitio.

Los SiteLinks o "enlaces de sitio", ayudan a los usuarios a navegar por nuestro sitio. Los sistemas de Google analizan la estructura de enlaces de los sitios para buscar los atajos que ahorrarán tiempo a los usuarios y les permitirán encontrar con rapidez la información que están buscando.

Únicamente se muestran los enlaces de sitios en los resultados de Google cuando consideran que serán útiles para el usuario. Si la estructura del sitio no permite que sus algoritmos encuentren enlaces de sitios de calidad o si no consideran que el sitio contenga enlaces relevantes para la consulta del usuario, Google no los mostrará.

Actualmente, los enlaces de sitios aparecen de forma totalmente automática.

Si nos parece que los enlaces que se muestran para nuestro sitio son inadecuados o incorrectos, podemos bloquearlos para que dejen de aparecer desde Herramientas para webmasters de Google.

En realidad es Google quien decide si mostrar o no esos enlaces (SiteLinks) en los resultados de sus búsquedas y no hay ninguna "formula mágica" que nosotros podamos emplear para lograr esto, lo mejor es no darle demasiada importancia a este tema y seguir trabajando en nuestro sitio con ilusión, con el tiempo recibiremos esta y otras recompensas a nuestro esfuerzo.

Por supuesto que hay cosas que podemos intentar para acelerar el proceso de indexación en Google,como añadir un sitemap y metatags en la plantilla.


Información original: Herramientas para webmasters