En el css de las plantillas de Blogger las imágenes que añadimos en nuestras entradas vienen con el atributo "border" añadido por defecto, así cada vez que subimos una imagen esta se muestra en el blog con borde, ya expliqué en un post anterior como "quitar el borde a las imágenes"
Suele suceder que eliminamos el borde, pero en alguna ocasión nos resulta más apropiado o simplemente nos apetece mostrar una imagen determinada en un post con borde.
La solución está añadiendo en el CSS un código con los atributos para las imágenes que queremos "bordear":
.post .img2 {
margin:0 0 5px 0;
padding:4px;
border:1px solid #C0C0C0;
}
Ahora cuando subimos una imagen al editor de entradas, hemos de añadirle el atributo class="img2" si queremos que tenga borde.
Así se muestra el código de una imagen en "edición de HTML" en nuestro editor de entradas una vez subida al blog:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s1600-h/bannergcara.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s200/bannergcara.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5081649056256956194" /></a>
Esta imagen se vería sin borde, pero al añadirle el atributo class="img2" (lo he puesto en negrita) se mostrará bordeada:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s1600-h/bannergcara.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s200/bannergcara.JPG" class="img2" border="0" alt=""id="BLOGGER_PHOTO_ID_5081649056256956194" /></a>
Por supuesto, también puede hacerse al revés, es decir, sino has modificado el CSS de las imágenes, puedes añadir el código igualmente para que las imágenes que quieras se vean sin borde, solo has de cambiar el "border" a cero pixeles:
.post .img2 {
margin:0 0 5px 0;
padding:4px;
border:0px solid #C0C0C0;
}
Podríamos pegar el class="img2" en Plantilla - Opciones - Formato - Plantilla de entrada, así aparecería automaticamente en nuestro editor de entradas cada vez que editamos un nuevo post, si queremos usarlo solo hay que copiarlo y colocarlo en el código de la imagen una vez subida y, si no vamos a usarlo, lo borramos y listo.
Compartir Enlace
Añadir una nueva sidebar al blog puede parecer en principio algo complicado, pero no lo es tanto como parece, ni mucho menos. Os recomiendo practicar antes en un blog de prueba, para evitar futuros disgustos...
No todas las plantillas son iguales, pero en general, funcionará este sistema, ya que se basa simplemente en copiar la sidebar existente y duplicarla.
He de aclarar, que esta prueba está hecha en una plantilla "Mínima" así que, en principio, servirá para todas las "Mínimas", aunque también he probado en la "Scribe" y, salvo unas pequeñas modificaciones que hube de hacer en padding y margin, el resultado fue óptimo.
[1] Vamos a Plantilla - html y buscamos esto en el CSS:
/* Outer-Wrapper --------------------------------- */
Justo debajo vemos #outer-wrapper {
Es aquí donde modificaremos el ancho, esto hará que el cuerpo del blog se ensanche a la medida deseada, en este ejemplo vamos a usar 900px, es decir, quedaría así:
#outer-wrapper {
width: 900px;
[2] Buscamos un poco más abajo la sidebar de nuestra plantilla:
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Lo copiamos y, justo debajo pegamos el código que acabamos de copiar. Acabamos de duplicar la sidebar, ahora hemos de cambiarle el nombre y le ponemos, por ejemplo, newsidebar, además necesitamos que "flote" al otro lado, para que las entradas queden en el medio de las dos sidebar, para lograrlo le cambiamos el float, quedaría así:
#newsidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
[3] Bajamos por la plantilla hasta encontrar esto:
<div id='main-wrapper'>
Justo sobre esa línea añadimos el código necesario para que nuestra sidebar se muestre en el blog:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
Guardamos cambios.
De momento nuestra nueva sidebar está vacía, así que para verla en el blog, hemos de ir a el panel de diseño, y allí veremos que ya es posible añadir nuevos elementos a la sidebar, añadimos uno, guardamos cambios y vemos la nueva sidebar pero se apreciará también, que la distancia de las sidebar a las entradas no es la correcta...
Solucionaremos esto volviendo a la plantilla - html, y añadiendo en #main-wrapper {
un nuevo valor para el margen:
margin-left: 20px;
Nota:
Las plantillas más recientes han cambiado alguno de sus parámetros, así que tendremos en cuenta que float:left; podrá aparecer como float: $startSide; y float:right; se verá como float: $endSide;.
Compartir Enlace
Hace unos días me preguntaba €r@sMö si conocía alguna forma de colocar en su blog un sistema de votación en cada post mediante estrellas.
A continuación voy a enumerar algunos de los que pueden usarse con cierta facilidad en nuestro blog, pero aclarando, eso si, que solamente he probado el de Blogalaxia, los demás los he visto colocados en algún que otro blog, pero no se mucho más al respecto...
El lugar de colocación del código en la plantilla, es para todos más o menos igual, ya que queremos que se vean debajo de cada post, así que hemos de colocarlo en la misma zona donde están la fecha, el autor, las etiquetas, etc, de cada post:
<p class='post-footer-line post-footer-line-1'>
<p class='post-footer-line post-footer-line-2'>
<p class='post-footer-line post-footer-line-3 /'>
Si lo colocamos antes o después de la última línea, por ejemplo, el ranking de estrellas se verá al final del pie del post, después de todo lo demás que tengamos debajo de las entradas.
Blogalaxia. En este post anterior ya había explicado el ranking de estrellas de Blogalaxia.
Spotback . En esta web se pueden escoger distintos widget para mostrar el rankingdevotosen tu blog, desde el clásico mediante estrellitas para cada post, hasta uno con las imágenes de los que votan.
Hay que registrarse para luego poder acceder a las estadísticas de tus votaciones.
Qualitativo. Podéis encontrar una muy buena información sobre este sistema en Vagabundia.
Blogarate. Solo puedo decir de este sistema que el registro en su web es muy sencillo.
Star it. Por lo que he podido observar, es uno de los más utilizados.
Y por último, a destacar una gran idea de Zona cerebral donde nos explican como crear nuestro propio sistema de votación, mediante el uso de CSS.
Si conocéis alguno más, o queréis comentar algo sobre los que he puesto para añadir datos al post, podéis dejar un comentario.
Compartir Enlace
