Dividir el Footer(pie de pagina) del blog en 3 columnas

El truco Blogger de hoy consiste en aprender a dividir el Footer del blog en 3 columnas. Para el que no sabe, el footer es la parte más inferior de nuestro blog el cual casi no tiene funcionalidad, pero gracias a este truco aprenderemos a dividir el Footer del Blog en 3 columnas para poder añadir más elementos en él.

Para que se den una idea, les dejare una imagen para que se den cuenta como quedara el footer.

Bien, antes de dividir el Footer del blog en 3 columnas vamos a arrastrar todos los elementos que tienes en el footer a la sidebar (barra lateral) para conservar estos elementos y luego colocarlos en el Footer nuevamente. (Este paso es por seguridad simplemente).

Nota: Antes de editar la plantilla, te recomendamos que guardes una copia de ella.

Ahora si nos dirigimos a la Edición HTML de la plantilla y buscamos el siguiente código:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Una vez encontrado lo reemplazamos completamente por el siguiente código:

<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 32%;margin: 2px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-right' style='float:right; width: 32%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<div style='clear:both;'/>

Hacemos vista previa y si no encuentra ningún error guardamos los cambios. Ahora cuando vayamos a Diseño > Elementos de Página veremos las tres columnas como en la imagen anterior y podemos volver los elementos que habíamos arrastrado a la sidebar anteriormente, así como también añadir nuevos elementos.

Si la parte de las
3 columnas queda sin color de fondo podemos añadir la siguiente línea al CSS para darle color:

#footer-wrapper{background-color: #ffff66;border: 1px solid #0000FF}

Donde la parte final del código (solid #0000FF) indica el color linea y (
background-color: #ffff66) indica color de fondo.

Con esto ya tienes tu
Footer dividido en 3 columnas para poder darle mayor utilidad.

Fuente: vidablogger
--> Leer Más...

Botones de compartir oficiales de Blogger

Ya están disponibles en el panel de Blogger "normal" sin necesidad de ir a Blogger in Draft, aunque los pasos para instalarlos en plantillas modificadas previamente siguen siendo los de esta entrada.

Blogger está dando la opción de probar a través de Blogger in Draft un conjunto de cinco iconos sociales para compartir las entradas por correo electrónico, Blogger, Twitter, Facebook y Google Buzz.

En el caso de Twitter se usa la url acortada utilizando para ello el servicio del propio Google.
Los botones se verán tal como ves en la imagen, aunque incluyen efecto "hover" y al paso del ratón se mostrarán con todo su colorido.

Aunque aún están en periodo de pruebas, podemos comenzar a utilizarlos aún en las plantillas anteriores al Diseñador de plantillas e incluso en las plantillas modificadas, ya que hace tiempo que Blogger añadió el código necesario en ellas para los botones tal como (Vagabundia) adelantaba en esta entrada.

[1] Accedemos a nuestro escritorio de Blogger desde Blogger in Draft.

[2] Vamos a Diseño y en el gadget "Entradas del blog" pinchamos en editar. Marcamos ahí la opción "Mostrar botones para compartir".

De esta manera ya deberían ser visibles los iconos para compartir al pie de nuestras entradas.

En el caso de las plantillas modificadas, y aún a pesar de que el código de los botones esté incluido en ellas, no se mostrarán sin añadir unas líneas en la plantilla:

[1] Marcamos la opción de "Expandir las plantillas de artilugios" situados en Edición HTML.

[2] Localizamos esta línea de código:
<p class='post-footer-line post-footer-line-3'>
O en su defecto, esta otra:
<div class='post-footer-line post-footer-line-3'>
[3] Debajo de esa línea, añadimos esto y guardamos los cambios:
<div class='post-share-buttons'>

<b:include data='post' name='shareButtons'/>

</div>
Si solo queremos mostrar los botones en la página de entradas y no en la principal por ejemplo, incluimos el código anterior en una condicional de este modo:
<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>
Usando CSS podemos escoger que botones mostrar, ocultando aquellos que no nos interesen usando para ello la clase que tiene añadida cada botón.

Colocamos antes de la etiqueta ]]></b:skin> una línea como esta para cada botón que queramos ocultar:
.sb-email{display:none;}/* ocultar boton email */
.sb-blog{display:none;}/* ocultar boton Blogger */
.sb-twitter{display:none;}/* ocultar boton Twitter */
.sb-facebook{display:none;}/* ocultar boton Facebook */
.sb-buzz{display:none;}/* ocultar boton Buzz */

Fuente: El Escaparate de Rosa
--> Leer Más...

Problemas con el título de los gadget

Esta es una de esas cosas que suelen pasar en Blogger, un error temporal o un cambio de los tantos que se hacen y sobre los que nunca nos enteramos.

El tema es que por ahora, cuando agregamos o modificamos un gadget, el campo del título es obligatorio y si lo dejamos en blanco, aparece un mensaje de error que nos impide guardarlo.

La solución a este inconveniente la leía hace un par de dias en El escaparate de Rosa y, como me han hecho esa pregunta varias veces, lo mejor que podemos hacer es remitirnos a su entrada para resolver las cosas.

Buscando alguna información al respecto, y viendo que no había ninguna en el sitio oficial de Blogger, localicé en el Foro de Ayuda de Blogger una respuesta que servirá para corregir el error mientras en Blogger lo subsanan.

Se trata de introducir las etiquetas <h2></h2> tal como las ves aqui escritas, en el campo para el título del gadget que queremos mostrar sin título alguno.

Guardamos los cambios y el gadget se guardará sin problema y sin mostrar ningún título.

Fuente: El Escaparate de Rosa - vagabundia
--> Leer Más...

Como Insertar Imágenes Aleatorias en Blogger

Hace unos días me preguntaba cómo poner imagenes aleatorias en blogger, por lo que aquí les explicaré a todos cómo hacerlo con un simple script de mano de Oloblogger.

Para poner este truco en nuestro blog seguimos estos pasos:

1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript. En él pegaremos el siguiente código:

Código a copiar/pegar

<script language="JavaScript">
function ver_imagen()
{
n=0;
this[n++]="URL imagen 1";
this[n++]="URL imagen 2";
this[n++]="URL imagen 3";
this[n++]="URL imagen 4";
this.N=n;
}
var imagen=new ver_imagen();
src= imagen[ Math.floor(Math.random() * imagen.N) ] ;
document.write("<img src="+src+">");
</script>

Sustituye URL imagen 1 por la URL de la imagen que desees.

Para añadir más imágenes fíjate en el código. Añade después de this[n++]="URL imagen 4"; este otro código y así sucesivamente:

this[n++]="URL imagen 5";

De esta forma, cada vez que se cargue el blog aparecerá una nueva imagen en el lugar que hayáis decidido poner este gadget. Así pues, esta forma de mostrar imágenes aleatorias se convierte en un truco blogger muy interesante para sorprender a tus lectores y visitantes.

Fuente: quierocrearunblog.com
--> Leer Más...

Cursores de Mundial futbol - Sudafrica 2010

Ya estamos en la Copa Mundial de Fútbol y podemos darle al blog un estilo deportivo con estos cursores gratis alusivos al fútbol que puedes colocar muy fácil y quitarlos cuando lo desees.

Para poner cualquiera de estos cursores en tu blog entra en Diseño | Edición de HTML y antes de </body> pega el código del cursor que más te guste.
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-5/spo406.cur), progress;}</style>
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-5/spo409.cur), progress;}</style>
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-4/spo378.cur), progress;}</style>
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-1/spo61.cur), progress;}</style>
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-1/spo61.cur), progress;}</style>
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-1/spo39.cur), progress;}</style>

<style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/adidasfootballboot.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/adidas-football-boot.gif"), auto;}</style>
--> Leer Más...

Iconos Redes Sociales 3D para descargar

Este pack de iconos para redes sociales es una creación de Aji Designs.

Se trata de un pack de iconos de redes sociales en forma de cubos 3D en formato PNG que sin duda son muy creativos y se verán muy bien en algunos blogs.

El tamaño original de los iconos es de 640 x 480px lo cual es demasiado grande, así que les cambié en tamaño para formar dos medidas, el primer set es de 19 iconos de 352 x 360px y el otro set es 19 iconos de 80 x 82px.

--> Leer Más...

Menu horizontal con borde superior

Este es un menú horizontal con un toque juvenil el cual tiene un borde superior y las pestañas cambian de color al pasar el mouse.

Para poner este menú en tu blog, entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

/* Menú horizontal
----------------------------------------------- */
#menulineup {
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Color de la línea superior*/
background: transparent;
}

#menulineup ul{
margin:0;
margin-left: 40px; /*Margen izquierdo entre la primera pestaña y el borde*/
padding: 0;
list-style: none;
}

#menulineup li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#menulineup a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margen entre cada pestaña*/
padding: 5px 10px 5px 10px;
background-color: lightblue; /*Color de las pestañas*/
border-bottom: 8px solid white;
}

#menulineup a:hover{
background-color: #D10000; /*Color de las pestañas al pasar el cursor*/
padding-top: 10px;
padding-bottom: 0;
border-bottom-color: #D10000; /*Color del borde inferior al pasar el cursor*/
color: white;
}

Ahora entra a Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y ahí pega esto:
<div id="menulineup">
<ul>
<li><a href="URL del enlace">Título 1</a></li>
<li><a href="URL del enlace">Título 2</a></li>
<li><a href="URL del enlace">Título 3</a></li>
<li><a href="URL del enlace">Título 4</a></li>
<li><a href="URL del enlace">Título 5</a></li>
</ul></div>
Ya sólo arrastra el elemento HTML/Javascript hasta abajo de la cabecera y cambia las URL de los enlaces y los títulos de las pestañas.

Puedes modificar los colores del menú a tu gusto; en el primer código he puesto las indicaciones para que sepas dónde hacer los cambios.

Fuente: ciudadblogger
--> Leer Más...

Ocultar el link - Suscribirse en las entradas (atom) en Blogger

En Blogger por defecto nos aparece un link al pie del blog invitando a suscribirnos a las entradas (atom), como el siguiente:

“Suscribirse a: Entradas (Atom)”

Me preguntan como eliminarlo y ahora te mostramos. El método es prácticamente el mismo que usamos en el artículo “Ocultar la fecha en los comentarios de Blogger“:

1.- Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.
2.- Buscamos el siguiente código:
]]></b:skin>
3.- Y justo antes colocamos lo siguiente:
.feed-links {
display: none;
visibility: hiden;
4.- Guardamos y ¡listo!

En lo particular conservo el link, dado que es una forma de que los usuarios tengan a la mano el enlace a nuestros artículos desde lectores feed. Por cierto, si quieres mantener a tu lector de feed, nuestra dirección es la siguiente:

http://feeds.feedburner.com/nombretublog

Fuente: Blogandweb
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika