Fondos bloc para post
19/02/2009
Leer más »
Yo que pensaba que esta era una plantilla de lo más corriente, incluso tirando a cutre, y resulta que ya llevo unas cuantas peticiones centradas en cómo hacer el efecto bloc. En concreto, parece que el fondo de las entradas gusta bastante.
Pues nada, aunque ya lo he pasado varias veces por correo electrónico, ahora lo colocaré de manera pública y notoria, haciendo honor al "No rights reserved" de la sidebar.
La que se utiliza aquí está pensada para un fondo negro y es el jpg de la derecha (imagen original pinchando). Pero como la gran mayoría de blogs tienen fondo claro, he confeccionado 12 variaciones con otros tantos colores y formato gif para que los podais usar a discreción.
Pinchando en cada una, accedeis a la imagen original alojada en Photobucket.
Por si las flies, la manera de implantar este tipo de fondos es incorporando a la clase que controla el bloque de post (normalmente llamada de esta misma manera), el atributo BACKGROUND. Si ya lo teneis, sólo hay que cambiar la dirección de la imagen pre-existente, por la de la que se pretende poner nueva. Más o menos, tendreis algo parecido a esto...
...y la línea en negro es la que hay que añadir/modificar para que se quede como es debido. Importante colocar el REPEAT-Y y LEFT TOP. Seguramente, también tengais que modificar los pixels del PADDING para la izquierda y la derecha (cuarto y segundo número, respectivamente)
Pues nada, aunque ya lo he pasado varias veces por correo electrónico, ahora lo colocaré de manera pública y notoria, haciendo honor al "No rights reserved" de la sidebar.La que se utiliza aquí está pensada para un fondo negro y es el jpg de la derecha (imagen original pinchando). Pero como la gran mayoría de blogs tienen fondo claro, he confeccionado 12 variaciones con otros tantos colores y formato gif para que los podais usar a discreción.
Pinchando en cada una, accedeis a la imagen original alojada en Photobucket.
Por si las flies, la manera de implantar este tipo de fondos es incorporando a la clase que controla el bloque de post (normalmente llamada de esta misma manera), el atributo BACKGROUND. Si ya lo teneis, sólo hay que cambiar la dirección de la imagen pre-existente, por la de la que se pretende poner nueva. Más o menos, tendreis algo parecido a esto...
.post {
margin:5px;
font-family: Arial, Comic;
background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top;
}
margin:5px;
font-family: Arial, Comic;
background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top;
}
...y la línea en negro es la que hay que añadir/modificar para que se quede como es debido. Importante colocar el REPEAT-Y y LEFT TOP. Seguramente, también tengais que modificar los pixels del PADDING para la izquierda y la derecha (cuarto y segundo número, respectivamente)
Gadget de etiquetas. Problemas y mejoras
18/02/2009
Leer más »
Una vez que hemos dado una breve explicación sobre qué son y para qué sirven las etiquetas, veamos cómo funciona el código para poder solucionar algunos problemas comunes e incluso, introducir algunas variantes.
Este es el código del widget que crea Blogger para las Etiquetas y que tras su instalación en la barra lateral, aparece dentro de la SECCION de la referida sidebar. O sea, justo después de <b:section class='sidebar' id='sidebar' preferred='yes'>, si no lo hemos movido de sitio tras crearlo. Se incluyen unas breves notas sobre lo que hace cada parte.
Conociendo su funcionamiento, podemos arreglar algunos problemas y también incorporar algunos datos más:
* No deseo mostrar el título del artilugio: La primera opción sería editarlo desde Elementos de Página y dejarlo sin título, pero también se puede conservar para distinguir a simple vista unos gadgets de otros, borrando las tres líneas...
* Los nombres de las etiquetas no enlazan a la correspondiente categoría: Falta la etiqueta <a... y la expresión que forma el enlace o la expresión está mal redactada:
* No se muestra el número de post para cada categoría: Eso es porque en nuestro widget falta la etiqueta data que contiene la cantidad.
* Aunque esté viendo una categoría concreta, esa categoría permite enlazar: La estructura b:if -b:else -/b:if, para excluir la categoría visualizada no existe o está mal construida. En ese caso es suficiente con reconstruir el código con la muestra que hay al principio del post.
* Incorporar a los nombres de las etiquetas una marca de lista: En este caso, podemos incorporar una etiqueta STYLE a los elementos LI, bien con un símbolo o bien con una imagen diseñada por nosotros. En este último caso, conviene que sea una imagen pequeña, tipo favicon, más o menos formando un cuadrado de lado igual a los pixels de alto que tiene la letra que tengamos definida para la SIDEBAR.
Circle, square o disc son los tipos que más se usan. Para una imagen, hay que usar 'list-style-image:url(DIRECCCION_IMAGEN);'
* Incorporar a los nombres de las etiquetas un icono para permitir la suscripción del feed de ese tema concreto: Hay que poner al principio de cada elemento de la lista, una expresión de enlace al feed de la categoría y la imagen del icono que será la que sirva de enlace al usuario.
En el siguiente enlace, tienes una recopilación de iconos para feed. Una vez escogido el que te guste, tienes que cambiar su tamaño hasta dejarlo aproximadamente en 16x16 pixels. Luego lo alojas en tu servicio habitual, copias la dirección y la pones en su sitio.
Este es el código del widget que crea Blogger para las Etiquetas y que tras su instalación en la barra lateral, aparece dentro de la SECCION de la referida sidebar. O sea, justo después de <b:section class='sidebar' id='sidebar' preferred='yes'>, si no lo hemos movido de sitio tras crearlo. Se incluyen unas breves notas sobre lo que hace cada parte.
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <!-- Muestra el título del gadget si existe -->
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul> <!-- Comienza la lista -->
<b:loop values='data:labels' var='label'><!-- Principio bucle para mostrar todas las etiquetas -->
<li> <!-- Elemento de la lista -->
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta concreta, se muestra sin enlace -->
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <!-- Nombre etiqueta sin enlace -->
</span>
<b:else/> <!-- Resto de etiquetas con enlace ->
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <!-- Enlace a etiquetas -->
<data:label.name/> <!-- Nombre etiqueta con enlace -->
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span> <!-- En todos los casos se muestra el número de entradas de cada etiqueta -->
</li>
</b:loop> <!-- Termina el bucle -->
</ul> <!-- Termina la lista -->
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:includable id='main'>
<b:if cond='data:title'> <!-- Muestra el título del gadget si existe -->
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul> <!-- Comienza la lista -->
<b:loop values='data:labels' var='label'><!-- Principio bucle para mostrar todas las etiquetas -->
<li> <!-- Elemento de la lista -->
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta concreta, se muestra sin enlace -->
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <!-- Nombre etiqueta sin enlace -->
</span>
<b:else/> <!-- Resto de etiquetas con enlace ->
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <!-- Enlace a etiquetas -->
<data:label.name/> <!-- Nombre etiqueta con enlace -->
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span> <!-- En todos los casos se muestra el número de entradas de cada etiqueta -->
</li>
</b:loop> <!-- Termina el bucle -->
</ul> <!-- Termina la lista -->
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Conociendo su funcionamiento, podemos arreglar algunos problemas y también incorporar algunos datos más:
* No deseo mostrar el título del artilugio: La primera opción sería editarlo desde Elementos de Página y dejarlo sin título, pero también se puede conservar para distinguir a simple vista unos gadgets de otros, borrando las tres líneas...<b:if cond='data:title'> <!-- Muestra el título del gadget si existe -->
<h2><data:title/></h2>
</b:if>
<h2><data:title/></h2>
</b:if>
* Los nombres de las etiquetas no enlazan a la correspondiente categoría: Falta la etiqueta <a... y la expresión que forma el enlace o la expresión está mal redactada:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <!-- Enlace a etiquetas -->
<data:label.name/> <!-- Nombre etiqueta con enlace -->
</a>
<data:label.name/> <!-- Nombre etiqueta con enlace -->
</a>
* No se muestra el número de post para cada categoría: Eso es porque en nuestro widget falta la etiqueta data que contiene la cantidad.
</b:if>
<span dir='ltr'>(<data:label.count/>)</span> <!-- En todos los casos se muestra el número de entradas de cada etiqueta -->
</li>
<span dir='ltr'>(<data:label.count/>)</span> <!-- En todos los casos se muestra el número de entradas de cada etiqueta -->
</li>
* Aunque esté viendo una categoría concreta, esa categoría permite enlazar: La estructura b:if -b:else -/b:if, para excluir la categoría visualizada no existe o está mal construida. En ese caso es suficiente con reconstruir el código con la muestra que hay al principio del post.* Incorporar a los nombres de las etiquetas una marca de lista: En este caso, podemos incorporar una etiqueta STYLE a los elementos LI, bien con un símbolo o bien con una imagen diseñada por nosotros. En este último caso, conviene que sea una imagen pequeña, tipo favicon, más o menos formando un cuadrado de lado igual a los pixels de alto que tiene la letra que tengamos definida para la SIDEBAR.
<b:loop values='data:labels' var='label'><!-- Principio bucle para mostrar todas las etiquetas -->
<li style='list-style-type:circle;' > <!-- Elemento de la lista -->
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta
<li style='list-style-type:circle;' > <!-- Elemento de la lista -->
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta
Circle, square o disc son los tipos que más se usan. Para una imagen, hay que usar 'list-style-image:url(DIRECCCION_IMAGEN);'
* Incorporar a los nombres de las etiquetas un icono para permitir la suscripción del feed de ese tema concreto: Hay que poner al principio de cada elemento de la lista, una expresión de enlace al feed de la categoría y la imagen del icono que será la que sirva de enlace al usuario.
<li> <!-- Elemento de la lista -->
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='URL_imagen'/></a>
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta concreta, se muestra sin enlace -->
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='URL_imagen'/></a>
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta concreta, se muestra sin enlace -->
En el siguiente enlace, tienes una recopilación de iconos para feed. Una vez escogido el que te guste, tienes que cambiar su tamaño hasta dejarlo aproximadamente en 16x16 pixels. Luego lo alojas en tu servicio habitual, copias la dirección y la pones en su sitio.
Etiquetando blogs
16/02/2009
Leer más »
Etiquetas, labels, categorías, tags... Cualquiera de estas denominaciones, hace referencia a la misma herramienta de clasificación de las entradas de un blog.
Las etiquetas son esas palabras clave, que debeis incorporar a cada uno de vuestros post y que identifican -si se usan adecuadamente- el tema al que va referido.
¿Y por qué debeis usarlas?... Pues porque con ellas mejorais la navegabilidad de vuestro sitio. Con el uso de etiquetas, facilitareis a vuestros lectores el acceso al contenido que realmente les interesa, evitándoles dar vueltas por otras secciones que puede que provoquen su espantada en lugar de su interés por la web.
Supongamos que entro en un blog de modelismo y me interesa especialmente el tema de aviones. Si entro en ese blog y tras ver cuatro o cinco post, sólo encuentro artículos sobre soldaditos, es muy posible que me vaya a buscar a otro sitio la información que necesito. Y puede que el blog tenga interesantísimas entradas sobre aeromodelismo, pero no voy a leer todo el contenido para comprobar si es así. Mejor una lista de temas a modo de índice ¿no?
Una lista de categorías bien construida y bien visible al entrar al blog, debería servir como primer filtro para no "engañar" al lector. Con echar un vistazo, el visitante sabría si lo que busca puede estar en ese espacio o no. Si sois devotos de recibir visitas por el simple hecho de recibirlas, adelante, pero de nada sirve tener cien mil visitas que realmente no han leído ni uno solo de nuestros posts. Este tipo de visitas sólo consiguen distorsionar nuestras estadísticas y estas sirven para analizar si nuestro espacio va en el camino correcto o no.
Para la elección de etiquetas no hay fórmulas mágicas y sólo se tiene que usar un poco el sentido común. Se trata de encontrar una manera de archivar las cosas con cierto orden, de manera que cuando quiera algo, lo encuentre rápido. Pensad en cómo lo clasificaríais para vosotros mismos. Si publico entre otras cosas, chistes, usaré el tag HUMOR o CHISTES para catalogar ese tipo de entradas. Sin embargo, si mi blog es precisamente de humor, lo más adecuado será que utilice una forma de diferenciar unos de otros. Por ejemplo, usando las palabras GRAFICOS, VIDEOS, SONOROS, SIN PALABRAS... o incluso distinguiéndolos por su temática: ACTUALIDAD, PERSONAJES FAMOROS, CLASICOS... BOMBEROS, AMANTES, VERDES, ANIMALES,...
Tan malo es usar pocas etiquetas como usar un excesivo número de ellas. En el primero de los casos, no lograremos el objetivo de indicar todos los temas que toca el blog, volviendo al caso del lector que no tiene una referencia clara de lo que puede encontrar en nuestro espacio. En el segundo, tendremos una interminable lista en la cual será más fácil perderse que en el propio blog.
La mayoría de plataformas para blog, disponen de estas utilidades. En Blogger, las etiquetas se pueden añadir fácilmente desde el bloque Entradas en Elementos de página. También existe un gadget para crear una lista de Etiquetas.
Hay varios formatos con los que podeis mostrar vuestras categorías: lista sencilla, nube de tags, 3D, desplegable, imágenes... sólo se trata de decidir cual os gusta más.
Más info:
Las etiquetas son esas palabras clave, que debeis incorporar a cada uno de vuestros post y que identifican -si se usan adecuadamente- el tema al que va referido.¿Y por qué debeis usarlas?... Pues porque con ellas mejorais la navegabilidad de vuestro sitio. Con el uso de etiquetas, facilitareis a vuestros lectores el acceso al contenido que realmente les interesa, evitándoles dar vueltas por otras secciones que puede que provoquen su espantada en lugar de su interés por la web.
Supongamos que entro en un blog de modelismo y me interesa especialmente el tema de aviones. Si entro en ese blog y tras ver cuatro o cinco post, sólo encuentro artículos sobre soldaditos, es muy posible que me vaya a buscar a otro sitio la información que necesito. Y puede que el blog tenga interesantísimas entradas sobre aeromodelismo, pero no voy a leer todo el contenido para comprobar si es así. Mejor una lista de temas a modo de índice ¿no?
Una lista de categorías bien construida y bien visible al entrar al blog, debería servir como primer filtro para no "engañar" al lector. Con echar un vistazo, el visitante sabría si lo que busca puede estar en ese espacio o no. Si sois devotos de recibir visitas por el simple hecho de recibirlas, adelante, pero de nada sirve tener cien mil visitas que realmente no han leído ni uno solo de nuestros posts. Este tipo de visitas sólo consiguen distorsionar nuestras estadísticas y estas sirven para analizar si nuestro espacio va en el camino correcto o no.
Para la elección de etiquetas no hay fórmulas mágicas y sólo se tiene que usar un poco el sentido común. Se trata de encontrar una manera de archivar las cosas con cierto orden, de manera que cuando quiera algo, lo encuentre rápido. Pensad en cómo lo clasificaríais para vosotros mismos. Si publico entre otras cosas, chistes, usaré el tag HUMOR o CHISTES para catalogar ese tipo de entradas. Sin embargo, si mi blog es precisamente de humor, lo más adecuado será que utilice una forma de diferenciar unos de otros. Por ejemplo, usando las palabras GRAFICOS, VIDEOS, SONOROS, SIN PALABRAS... o incluso distinguiéndolos por su temática: ACTUALIDAD, PERSONAJES FAMOROS, CLASICOS... BOMBEROS, AMANTES, VERDES, ANIMALES,...Tan malo es usar pocas etiquetas como usar un excesivo número de ellas. En el primero de los casos, no lograremos el objetivo de indicar todos los temas que toca el blog, volviendo al caso del lector que no tiene una referencia clara de lo que puede encontrar en nuestro espacio. En el segundo, tendremos una interminable lista en la cual será más fácil perderse que en el propio blog.
La mayoría de plataformas para blog, disponen de estas utilidades. En Blogger, las etiquetas se pueden añadir fácilmente desde el bloque Entradas en Elementos de página. También existe un gadget para crear una lista de Etiquetas.
Hay varios formatos con los que podeis mostrar vuestras categorías: lista sencilla, nube de tags, 3D, desplegable, imágenes... sólo se trata de decidir cual os gusta más.
Más info:
- Maestro Web. Para qué sirven los tags.
- El Escaparate. Cómo etiquetar en Blogger.
- Blogs made in Spain. Instalar una lista de etiquetas Blogger.
- Taberna del turco. Etiquetas Technorati.
- Ayuda para el blog. Asignar etiquetas en entradas ya publicadas.
- Tensai Web. Nube de tags para Blogger.
Aspire. Añadir una descripción al título.
11/02/2009
Leer más »
Seguimos con problemillas solventables de la plantilla Aspire.
En esta ocasión, queremos añadir una descripción al título del blog. Esto viene a ser como un lema o un subtítulo que suele acompañar en Blogger al nombre del blog. Es el caso de "Blogger para torpes... y para no tanto"
Esta plantilla no lleva la cabecera estandard, editable desde Elementos de Página, y que es desde dónde se puede añadir de forma sencilla en una plantilla clásica. Por eso, por más que escribamos ahí, nunca se verá ni la descripción, ni tampoco una posible imagen.
De todas formas, lo primero que debeis hacer es grabar con ese sistema (desde Elementos de Página-->Cabecera) la descripción que quereis. De esta manera estará disponible para otro tipo de plantillas (por si los cambios...). Blogger grabará el dato en data:description.
Ahora tenemos que localizar la parte de código (artilugios expandidos) que realmente muestra el título en esta plantilla:
En el código anterior, ya hemos insertado (en negrita) la descripción. Pero no es suficiente para que se vea bien, puesto que el espacio destinado a ese apartado es escaso y las letras se cortarán. Por este motivo, hay que ampliar la altura todo lo que necesites en este ID.
Si quereis cambiar el color, tamaño, margen, etc de la descripción (por defecto no sale muy agradable), insertad la variable indicada con una etiqueta de estilo. Por ejemplo:
Si lo colocais de esta última manera -entre DIV's y con un margen superior negativo- no necesitareis siquiera cambiar el alto del #head y se podrá quedar en el 250px original.
Esto último, al gusto...
En esta ocasión, queremos añadir una descripción al título del blog. Esto viene a ser como un lema o un subtítulo que suele acompañar en Blogger al nombre del blog. Es el caso de "Blogger para torpes... y para no tanto"
Esta plantilla no lleva la cabecera estandard, editable desde Elementos de Página, y que es desde dónde se puede añadir de forma sencilla en una plantilla clásica. Por eso, por más que escribamos ahí, nunca se verá ni la descripción, ni tampoco una posible imagen.
De todas formas, lo primero que debeis hacer es grabar con ese sistema (desde Elementos de Página-->Cabecera) la descripción que quereis. De esta manera estará disponible para otro tipo de plantillas (por si los cambios...). Blogger grabará el dato en data:description.
Ahora tenemos que localizar la parte de código (artilugios expandidos) que realmente muestra el título en esta plantilla:
<b:includable id='main'>
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
<data:description/>
</b:includable>
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
<data:description/>
</b:includable>
En el código anterior, ya hemos insertado (en negrita) la descripción. Pero no es suficiente para que se vea bien, puesto que el espacio destinado a ese apartado es escaso y las letras se cortarán. Por este motivo, hay que ampliar la altura todo lo que necesites en este ID.
#head {position:relative; width:1020px; height:250px; margin:0 auto; text-align:left; background: url(http://www.webpagedesign.ws/aspire/top-right-bg-repeat.jpg) 90px 0px repeat-x;}
Si quereis cambiar el color, tamaño, margen, etc de la descripción (por defecto no sale muy agradable), insertad la variable indicada con una etiqueta de estilo. Por ejemplo:
<div style='font-family:Verdana;font-size:14px;font-style:italic;color:#797639;margin:-10px 0px 0px 25px;'><data:description/></div>
Si lo colocais de esta última manera -entre DIV's y con un margen superior negativo- no necesitareis siquiera cambiar el alto del #head y se podrá quedar en el 250px original.
Esto último, al gusto...
Faviconera adaptable con rollover
05/02/2009
Leer más »
Parece que hay un movimiento bloguero relacionado con los faviconos, que se está extendiendo cual mancha de aceite: la faviconera.
La idea consiste en reservar un espacio en tu blog, para poner en él los faviconos de una serie de webs, incluyendo en la imagen un enlace a las mismas. La finalidad es diversa: promoción ajena, mini blogroll, intercambio de enlaces, darse a conocer, ingresos mediante alquiler de los espacios...
El caso es que sea para lo que fuere, resulta una buena idea para incluir muchos enlaces en poco espacio y con una estética que me gusta.
Montar uno de estos espacios es sencillo, pero si no te ves capaz, sólo tienes que añadir un elemento HTML en tu barra lateral con el siguiente esquema y la faviconera se adaptará al ancho disponible:
Una línea como la marcada en verde por cada casillero con enlace y favicono.
Una línea como la marcada en gris, por cada casillero sin enlace.
URL_ENLACEx: Dirección de la web X a enlazar
URL_FAVICONx: Dirección de la imagen (favicono) de la web X
ETIQUETAx: Texto que describe el nombre de la web al pasar el puntero por encima del icono
URL_IMAGEN_HUECO: Imagen a mostrar cuando no hay todavía ninguna web.
Quizás prefieras hacer esto mismo pero en vertical. En ese caso, la parte de CSS habría que cambiarlo por el siguiente:
Variantes:
Se puede incluir la parte de CSS en la plantilla, antes del ]]></b:skin>, pero en ese caso habría que hacerlo eliminando <style type="text/css"> y <style>
También podemos con ambas versiones, crear un elemento fijo en cualquier parte del blog. Para ello añadimos en la clase .faviconera las líneas...
...con los valores de pixels que necesitemos. Esto tiene un problema y es que con distintas resoluciones, el lugar dónde aparece irá cambiando en relación con el resto del diseño. Pero eso ya es para otro post...
Otra forma de hacerlo con tablas.
La idea consiste en reservar un espacio en tu blog, para poner en él los faviconos de una serie de webs, incluyendo en la imagen un enlace a las mismas. La finalidad es diversa: promoción ajena, mini blogroll, intercambio de enlaces, darse a conocer, ingresos mediante alquiler de los espacios...
El caso es que sea para lo que fuere, resulta una buena idea para incluir muchos enlaces en poco espacio y con una estética que me gusta.
FAVICONERA
Montar uno de estos espacios es sencillo, pero si no te ves capaz, sólo tienes que añadir un elemento HTML en tu barra lateral con el siguiente esquema y la faviconera se adaptará al ancho disponible:
<style type="text/css">
#faviconera {
text-align:center;
margin:10px auto 10px auto;
}
#faviconera .contimg img {
padding:1px 1px 1px 1px;
border:1px solid #000000;
}
#faviconera .contimg a:hover img{
border:1px solid #ffffff;
}
</style>
<div id="faviconera">
<div class="contimg">
FAVICONERA
<br/>
<a href="URL_ENLACE1"><img src="URL_FAVICON1" title="ETIQUETA1"/></a>
<a href="URL_ENLACE2"><img src="URL_FAVICON2" title="ETIQUETA2"/></a>
<a href="URL_ENLACE3"><img src="URL_FAVICON3" title="ETIQUETA3"/></a>
<a href="javascript:void(0);"><img src="URL_IMAGEN_HUECO" title="Tu favicono aquí"/></a>
<br/>
</div>
</div>
#faviconera {
text-align:center;
margin:10px auto 10px auto;
}
#faviconera .contimg img {
padding:1px 1px 1px 1px;
border:1px solid #000000;
}
#faviconera .contimg a:hover img{
border:1px solid #ffffff;
}
</style>
<div id="faviconera">
<div class="contimg">
FAVICONERA
<br/>
<a href="URL_ENLACE1"><img src="URL_FAVICON1" title="ETIQUETA1"/></a>
<a href="URL_ENLACE2"><img src="URL_FAVICON2" title="ETIQUETA2"/></a>
<a href="URL_ENLACE3"><img src="URL_FAVICON3" title="ETIQUETA3"/></a>
<a href="javascript:void(0);"><img src="URL_IMAGEN_HUECO" title="Tu favicono aquí"/></a>
<br/>
</div>
</div>
Una línea como la marcada en verde por cada casillero con enlace y favicono.
Una línea como la marcada en gris, por cada casillero sin enlace.
URL_ENLACEx: Dirección de la web X a enlazar
URL_FAVICONx: Dirección de la imagen (favicono) de la web X
ETIQUETAx: Texto que describe el nombre de la web al pasar el puntero por encima del icono
URL_IMAGEN_HUECO: Imagen a mostrar cuando no hay todavía ninguna web.
<style type="text/css">
#faviconera {
width:20px;
text-align:center;
margin:10px auto 10px auto;
}
#faviconera .contimg img {
padding:1px 1px 1px 1px;
border:1px solid #000000;
display:block;
}
#faviconera .contimg a:hover img{
border-left:2px solid #000000;
border-right:2px solid #000000;
}
</style>
#faviconera {
width:20px;
text-align:center;
margin:10px auto 10px auto;
}
#faviconera .contimg img {
padding:1px 1px 1px 1px;
border:1px solid #000000;
display:block;
}
#faviconera .contimg a:hover img{
border-left:2px solid #000000;
border-right:2px solid #000000;
}
</style>
Variantes:
Se puede incluir la parte de CSS en la plantilla, antes del ]]></b:skin>, pero en ese caso habría que hacerlo eliminando <style type="text/css"> y <style>
También podemos con ambas versiones, crear un elemento fijo en cualquier parte del blog. Para ello añadimos en la clase .faviconera las líneas...
position:absolute;
top:300px;
left:30px;
top:300px;
left:30px;
...con los valores de pixels que necesitemos. Esto tiene un problema y es que con distintas resoluciones, el lugar dónde aparece irá cambiando en relación con el resto del diseño. Pero eso ya es para otro post...
Otra forma de hacerlo con tablas.
Número de comentarios perdido. Blogger
02/02/2009
Ultimamente con tantas plantillas disponibles y con tanto valiente dispuesto a modificar su idem, cada vez es más frecuente que "desaparezcan" cachivaches que normalmente deberían estar en nuestro blog.
Si anteriormente explicamos como recuperar o reinstalar los iconos de edición rápida, ahora le toca el turno al código que muestra el número de comentarios que lleva acumulado cada entrada.
En primer lugar tenemos que comprobar que se encuentra activada esta opción. Esto se hace en el Escritorio --> Configuración --> Comentarios. La casilla de verificación Mostrar Comentarios tiene que estar seleccionada. También hay que entrar en Elementos de Página, apartado Editar del bloque Entradas del Blog y ver que ahí está marcado lo de los Comentarios.
Si no tenemos esas dos cosas en marcha, ni salen unos ni salen otros. Puede que la pérdida se deba sólo a esto por lo que aquí acabaría el trabajo.
Pero si seguimos sin lograr que se vean y sin entrar en las particularidades de cada plantilla, podemos conseguirlo incluyendo el artilugio completo allí dónde queremos que se vea.
Habitualmente, esto habrá que colocarlo tras el contenido del post, o sea, justo detrás de esta parte del código:
Si estais familiarizados con vuestra plantilla, también de puede colocar bajo el título o en cualquier otro sitio que os interese.
Normalmente es suficiente con incorporar este código para que funcione lo de los comentarios,. Sin embargo, si necesitais buscar si teneis el código mal o en un sitio inadecuado, teneis que tener en cuenta que el artilugio puede incorporar algún código adicional, entre los dos últimos </b:if>. También puede ser que lo encontreis entre etiquetas SPAN en lugar de DIV. Lo que seguro que debe estar es la primera condición. Ese IF controla que estamos en un página distinta de la de la propia entrada (permalink). Es decir, estamos en inicio, en un resumen de posts por etiqueta, en una página secundaria... Por último, también puede resultar necesario quitar todo el código "malo". Hay mucha casuística y es difícil ser más concreto, pero lo anterior son unas buenas pistas para arreglar el problema.
Más información en Enlace a comentarios en Blogger y Texto distinto para un post sin comentarios.
Leer más »
Ultimamente con tantas plantillas disponibles y con tanto valiente dispuesto a modificar su idem, cada vez es más frecuente que "desaparezcan" cachivaches que normalmente deberían estar en nuestro blog.Si anteriormente explicamos como recuperar o reinstalar los iconos de edición rápida, ahora le toca el turno al código que muestra el número de comentarios que lleva acumulado cada entrada.
En primer lugar tenemos que comprobar que se encuentra activada esta opción. Esto se hace en el Escritorio --> Configuración --> Comentarios. La casilla de verificación Mostrar Comentarios tiene que estar seleccionada. También hay que entrar en Elementos de Página, apartado Editar del bloque Entradas del Blog y ver que ahí está marcado lo de los Comentarios.
Si no tenemos esas dos cosas en marcha, ni salen unos ni salen otros. Puede que la pérdida se deba sólo a esto por lo que aquí acabaría el trabajo.Pero si seguimos sin lograr que se vean y sin entrar en las particularidades de cada plantilla, podemos conseguirlo incluyendo el artilugio completo allí dónde queremos que se vea.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<div class='postmetadata'><div class='comm-num-left'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if> »</a>
</div><div class='clear'/></div>
</b:if>
</b:if>
<b:if cond='data:post.allowComments'>
<div class='postmetadata'><div class='comm-num-left'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if> »</a>
</div><div class='clear'/></div>
</b:if>
</b:if>
Habitualmente, esto habrá que colocarlo tras el contenido del post, o sea, justo detrás de esta parte del código:
<div class='entry'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Si estais familiarizados con vuestra plantilla, también de puede colocar bajo el título o en cualquier otro sitio que os interese.
Normalmente es suficiente con incorporar este código para que funcione lo de los comentarios,. Sin embargo, si necesitais buscar si teneis el código mal o en un sitio inadecuado, teneis que tener en cuenta que el artilugio puede incorporar algún código adicional, entre los dos últimos </b:if>. También puede ser que lo encontreis entre etiquetas SPAN en lugar de DIV. Lo que seguro que debe estar es la primera condición. Ese IF controla que estamos en un página distinta de la de la propia entrada (permalink). Es decir, estamos en inicio, en un resumen de posts por etiqueta, en una página secundaria... Por último, también puede resultar necesario quitar todo el código "malo". Hay mucha casuística y es difícil ser más concreto, pero lo anterior son unas buenas pistas para arreglar el problema.
Más información en Enlace a comentarios en Blogger y Texto distinto para un post sin comentarios.
Suscribirse a:
Entradas (Atom)
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace.
Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.
