0

Últimas entradas

Me lo preguntaban esta misma tarde y es una de esas cosas que da la sensación haberla posteado anteriormente, pero no lo he encontrado así que ahí va.
Es la forma de añadir las últimas entradas del blog. Nos dirigimos a la plantilla de diseño, añadimos un elemento de página y clicamos en feed.
Donde URL del feed añadimos lo siguiente:


http://url-del-blog.blogspot.com/feeds/posts/full



Luego escogemos el número de entradas, máximo 5.
Marcamos si deseamos que aparezca la fecha del elemento, también podemos optar por añadir el autor o fuente del elemento.

Guardamos los cambios y arrastramos la etiqueta hasta el lugar de nuestra sidebar donde situaremos las últimas entradas.


Suerte amigo de Málaga :)

0

Buscador de iconos IconLook

IconLook

IconLook es otro buscador de iconos que con solo introducir la palabra que mejor defina al icono que queramos encontrar, nos devolverá múltiples resultados en forma de agradables iconos.

Incluso tendremos la opción de definir nuestra búsqueda por el tamaño de los iconos que queremos localizar (12x12, 16x16, 22x22, 32x32, 48x48, 64x64, y 128x128).

Por descontado, mejor hacer nuestras búsquedas en inglés, aunque también encuentra algún icono al usar referencias en castellano, en general el resultado óptimo es usando el inglés.

Me ha sorprendido gratamente el resultado de las búsquedas que he puesto, ya que he visto bastantes iconos que no proporcionan otros buscadores online.

Enlace:IconLook / Via:Xyberneticos

0

Layout for All

Layout for All o lo que es lo mismo "Diseño para Todos" es una página donde su autor Abdul Munir pone a nuestra disposición maravillosos diseños de plantillas para Blogger.




La descarga es gratuita y los usuarios de plantillas clásicas están de suerte porque también dispone de dos elegantes plantillas para Blogger clásico (HTML).

0

Nuevos elementos en el header

Hace tiempo averiguábamos como añadir nuevos elementos de página a nuestra plantilla, más tarde J.Miur daba buena cuenta de las posibilidades del header de Blogger, y visitando a Rosa descubrimos como añadir nuevos elementos en una misma línea y de forma independiente esta vez en el footer.
Un ejemplo es el blog de Pizcos añadiendo en el footer widgets que normalmente añadimos en la sidebar, esta última por ejemplo es una muestra más de lo que se puede conseguir con imaginación y buen gusto.

Y siguiendo con nuestro afán de conseguir añadir nuevos elementos vamos a hacerlo esta vez en lo que llamamos encabezado del blog, después del logo o header.

Para conseguirlo nos debemos situar en nuestra plantilla Edicción de HTML y localizar :
<div id='header-wrapper'> a continuación encontraremos algo así:

<div id='header-wrapper'>   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>  <b:widget id='Header1' locked='true' title='Aquí pondrá el título (cabecera)' type='Header'/>  </b:section>  </div>

Justo después añadiremos lo siguiente:
<div id='header-bloque-conten'><div id='header2' style='width: 30%; float: left; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque1' preferred='yes' style='float:left;'></b:section></div><div id='header3' style='width: 40%; float: left; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque2' preferred='yes' style='float:left;'></b:section></div><div id='header4' style='width: 30%; float: right; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque3' preferred='yes' style='float:left;'></b:section></div><div style='clear:both;'/><div id='header-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'><b:section class='header' id='bloque-bottom' preferred='yes'/></div><div style='clear:both;'/></div>

Una vez añadimos el anterior código nos situamos antes de ]]></b:skin> y añadimos unas líneas de código para personalizar el espacio donde irán nuestros nuevos elementos de página.

#header-bloque-conten{
clear:both;
}

.header-bloque {
margin: 5 auto;
padding: 10px;
text-align: center;
background: #000000;
border:1px solid #288cf0;
}

Donde padding: 10px; es el espacio para separar las columnas que podemos modificar visualizando en vista previa.
margin: 5 auto; es el espacio que dejamos en la parte superior.
En text-align: center; situamos el texto centrado, si deseamos que aparezca a la izquierda sustituimos center por left, y por right si es a la derecha.
Para cambiar el color de fondo lo haremos en background: #000000;
El tipo de borde, grosor y color en border:1px solid #288cf0;

Por último sólo nos queda guardar los cambios, en la plantilla de diseño podremos ver tres elementos independientes en línea horizontal, y en vista previa comprobaremos el siguiente efecto:





Podemos incluir un nuevo elemento añadiendo:

<div id='header5' style='width: 30%; float: right; margin:5; text-align: center;'>
<b:section class='header-bloque' id='bloque4' preferred='yes' style='float:left;'>
</b:section>
</div>


Modificando los valores style='width: 30%; de cada uno de los elementos de forma que la suma de todos no sea superior a 100%

0

Ya estoy aquí









A lo largo de esta semana seguiré fuera de casa, eso quiere decir que no dispongo de mi ordenador pero tengo a mi disposición el que uso en estos momentos. Mientras el dueño no diga lo contrario aquí estaré.

0

Publicado por.. y otros datos a debajo del título

Normalmente el "Publicado por" la hora de publicación de la entrada los "comentarios" y las etiquetas, se muestran debajo de cada entrada.
He recibido un email de salytre donde me pide si puedo explicar como mover estos datos del "post-footer" (pie de entradas) para hacer que se muestren debajo del título de cada entrada...

[1] Nos situamos en nuestro panel de Blogger "edición html" y expandimos los artilugios para localizar esta línea de código ya que será justo debajo de esa línea a donde tendremos que trasladar los códigos para mostrar los elementos del post-footer debajo de los títulos de las entradas:

<div class='post-header-line-1'>


[2] Localizamos ahora el código que corresponde al "Publicado por":
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Lo copiamos, borramos el original y pegamos el que acabamos de copiar, debajo de la línea que localizamos antes:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Mover la hora de publicación a continuación del "Publicado por"

[1] Vamos a colocar ahora la hora de publicación de la entrada a continuación del autor que ya habíamos movido antes a debajo del título, para ello tenemos que localizar el código que corresponde a la hora:
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

Y colocarlo a continuación del código para el "Publicado por" que acabamos de mover:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

Mover "comentarios" a debajo del "Publicado por" y la hora del post

[1] Moveremos ahora el enlace de "comentarios" desde el pie de la entrada a debajo del título, a continuación de lo que hemos colocado antes.
Seguimos con los artilugios expandidos y localizamos el código que corresponde al enlace para dejar comentarios:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' 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>
</b:if>
</b:if>
</span>

Lo colocamos a continuación del "Publicado por" y la hora de la entrada, que habíamos cambiado de lugar previamente:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' 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>
</b:if>
</b:if>
</span>

Mover las etiquetas

[1] Los pasos a seguir son idénticos a los anteriores; localizamos el código que muestra las etiquetas debajo de cada entrada:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Lo copiamos, borramos el original y pegamos la copia debajo de los anteriores:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' 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>
</b:if>
</b:if>
</span>

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>


Nota: Si queremos que las etiquetas o los comentarios se muestren en una segunda línea, en lugar de a continuación de los otros elementos, incluiremos su código entre <br> y </br>.
Por ejemplo las etiquetas:

<br><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span></br>

Resultado:
Ejemplo de elementos debajo del titulo

0

Plantilla Twitter

Una plantilla preciosa de Gosu Blogger para los amantes de Twitter y los que no también.biggrin

Imita la interfaz de la web de Twitter a la perfección...

Twitter

Demo de la plantilla / Descarga

Entrada original: Gosu Blogger