Mostrar ultimas entradas en Blogger

Acaban de pasarme por email un script para mostrar en la sidebar los últimos post del blog.
Pensé que sería más o menos como otros códigos que había probado para esta función, pero me llevé una grata sorpresa al aplicarlo.

Antes de comenzar nos descargamos el script a nuestra PC, lo subimos a un alojamiento de archivos y copiamos la url que nos proporcionan para usarla en el código colocandola donde dice "URL_DEL_SCRIPT".

[1] Si aplicamos el script tal como está, mostrará en primer lugar el título de la entrada, debajo unas líneas con el comienzo del post y seguidamente unos puntos suspensivos con (leer más) para ver la entrada completa:



El código puede adaptarse a las necesidades de cada uno:

var numposts aquí escogemos cuantas entradas vamos a mostrar.
var numchars aquí escogemos la cantidad de caracteres o palabras a mostrar.
var showpostdate si ponemos false la fecha del post no se verá, para mostrarla pondremos true.
var showpostsummary con true mostramos el ...(leer mas) y con false no se verá.
var standardstyling según pongamos true o false, cambiará el estilo del texto. Os recomiendo dejarlo en true, queda mucho más bonito.

[2] Este es el script que pegaremos en un nuevo elemento HTML-Javascript y listo.

<script src="URL_DEL_SCRIPT">
</script>
<script language="javascript">
var numposts = 10;
var numchars = 120;
var showpostdate = false;
var showpostsummary = true;
var standardstyling = true;
</script>
<script src="http://NOMBRE_DEL_BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts"></script>

No hay que olvidarse de cambiar "NOMBRE_DEL_BLOG" por el del blog donde vamos a aplicar el script.
Compartir Enlace

Como añadir imagen de fondo en los comentarios de Blogger

Me solicita Jabba que explique la forma de hacer que los comentarios tengan un fondo de color, es decir, que se vean más o menos como los del Escaparate.

La forma de conseguir este efecto no es muy complicada, solo hemos de añadir unas líneas en el CSS de nuestra plantilla según el color que queramos conseguir.

Antes de empezar nos vendrá bien tener a mano una Tabla de Colores Hexadécimales.


Nos dirigimos a la parte de editar el HTML de nuestra plantilla.
Buscamos el siguiente codigo (he tomado como referencia mi plantilla, la Mínima Lefty):

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}


Una vez localizado el código, lo sustituimos por este otro (es el que usaba antes en El Escaparate, muy parecido al actual aunque con distintos colores):

/* Comments
----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background: #ffffff;
margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
background: #EFEFF7;
border: 1px dashed #DDDDDD;
margin:0;
padding:7px 7px 7px 7px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author{
background:#C0C0C0;
margin:0;
padding:7px 7px 7px 10px;
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#ffffff;
text-decoration:bold;
}
.comment-footer {
background:#993333 ; margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#ffffff;
}
.deleted-comment {
font-style:italic; color:gray;
}

Este código podemos cambiarlo como nos parezca para lograr el color de fondo que más nos guste.

Vamos por partes:
El .comment-author { es donde pone "Rosa dijo" podemos cambiar el color de fondo, yo tengo #ffffff lo que hace que se vea el fondo blanco.
Tambien he cambiado el código para que el texto se vea en negrita: font-weight:bold; pero puede ponerse normal.

El .comment-body { es la parte donde está el texto que escribimos en los comentarios, aquí también podemos cambiar el color igual que antes.
En mi caso, he añadido un borde punteado alrededor: border: 1px dashed #DDD;
podemos eliminarlo borrando esa línea, cambiar su color en #DDD e, incluso hacer que sea solido, cambiando "dashed" por "solid".

El .comment-footer { es donde vemos la fecha de publicación del comentario, cambiaremos el color por el que queramos.

En el código también está incluido la distinción del autor, es decir, el autor del blog (Rosa en este caso) aparece en un color distinto al de los demás comentaristas.

Esto servirá como orientación para conseguir los cambios que se precisen, lo mejor es hacerlo en una plantilla (si es de pruebas mejor) e ir comprobando como va quedando paso a paso.

En algunos casos el código de /* comments---/* no aparece en la plantilla ya que los comentarios se adaptan directamente al estilo del blog, es el caso de la plantilla de Jabba (de Blog and Web) y no se si servirá en todos los casos, pero en esa en concreto he probado sencillamente pegando el código tal cual en el CSS y funciona perfectamente.


Compartir Enlace

Como etiquetar las entradas de Blogger

Son muchos los visitantes del Escaparate que me comentan que algunas cosas que explico no les han servido.
En los casos concretos del " menú en forma de pestañas" y " títulos expandibles en los posts de las etiquetas" la queja se repite con frecuencia. El motivo generalmente, es que previamente no han etiquetado las entradas, requisito indispensable para que estos y algunos otros trucos funcionen como debe ser.

Poner etiquetas a nuestros posts es bastante sencillo:

Cada vez que escribimos una nueva entrada, vemos debajo del editor de texto un apartado de "Opciones de entrada" y destacado en negrita "Etiquetas de esta entrada", es justo ahí, donde pondremos nuestras etiquetas. Puede ser una sola o varias, siempre separadas por comas. Si ya has etiquetado algún posts anteriormente, tienes la opción de "Mostrar todo" para escoger una de las etiquetas existentes con solo hacer click sobre ella.


Para etiquetar los pots antiguos, hemos de usar el "Editar entradas" y una vez allí, en "Acciones de etiquetas" podremos ir seleccionando las entradas y añadiendo etiquetas, es un poco "labor de chinos" sobre todo si tenemos muchas entradas en el blog, pero todo es ponerse con ánimo...


Una vez etiquetadas las entradas, podemos mostrar las etiquetas en el pie de cada post, para ello vamos a: Plantilla - Entradas del blog - Editar y seleccionamos el cuadradito con la opción "etiquetas". Guardamos cambios y listo.

También podemos mostrar nuestras etiquetas en la sidebar, de forma que facilitemos la navegación en nuestro blog a las visitas, como si de un sencillo menú de contenidos se tratara. Para ello nos situamos en Plantilla - añadir nuevo elemento y seleccionamos la opción "etiquetas" que después arrastraremos a la parte de la sidebar que mejor nos parezca.



 Compartir Enlace

Como ocultar el "suscribirse a entradas Atom" en Blogger

| 0 comentarios

En el pie de nuestro blog vemos un link que posibilita a nuestros visitantes la suscripción a nuestras entradas.
Mediante el CSS podemos hacer que no se muestre. Para ello solo hemos de buscar .feed-links { en nuestra plantilla, y sustituir lo que está entre las dos llaves {} por esto:
.feed-links {
display: none;
visibility: hiden;
}

Si se diera el caso de que este código no aparece en nuestra plantilla, tendremos que añadirlo así que pegamos el código completo antes de ]]></b:skin>

Si preferimos hacer lo contrario, es decir, destacarlo de alguna manera, podemos añadirle un pequeño icono rss delante.
El código sería este:

.feed-links {
clear: both;
line-height: 2.5em;
padding-left:20px;
padding-top:5px;
background: url(http://img402.imageshack.us/img402/305/rect18st2bx0.png) center left no-repeat;
}

Deberemos tener en cuenta, que según sea el tamaño de nuestro icono, tendremos que modificar el padding, que es lo que marca la distancia del icono al texto.

¡Suerte!


Compartir Enlace

Como poner imágenes con o sin bordes en Blogger

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

Como añadir un sidebar en Blogger

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

Sistemas de votación con estrellas en Blogger

| 0 comentarios

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