Vamos a ver como utilizar las fuentes personalizadas de Google en Blogger, para ello tendremos que entrar en:

 http://www.google.com/fonts 

donde tenemos muchas fuentes para elegir, despues de mirar y mirar seleccionamos la que mas nos guste...

Copiaremos el link de la selección le añadiremos / de esta manera

<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

Sera este el que utilizaremos:

<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'/>

y lo pegaremos antes de la etiqueta </head> de nuestra plantilla.

Para utilizar  el tipo de fuente,un poco mas abajo encontraremos la font family  que sera lo que añadiremos en el CSS según donde vayamos a utilizarlo:

 Por ejemplo en el body:

body { font-family: 'Indie Flower', cursive;
color: #991188; 

El resultado sera:

Seguir a @laredteayudara            

Directamente a tu e-mail     

                                                   

El anterior post, daba repuesta a una consulta, pero aunque se soluciono, quedo una duda que hoy, si doy por explicada.

Así que después de pensarla  os dejo la otra manera de hacerlo y que desde luego me parece mejor.

Código para  tres columnas o más

Copiaremos el código en HTML y donde pone  Pegar el Texto  pondremos el texto que deseamos.

Tres Columnas

<div style="width:33%;float:left;padding:4px;"> Pegar el Texto </div>
<div style="width:33%;float:left;padding:4px;">  Pegar el Texto </div>
<div style="width:30%;float:right;padding:4px;">  Pegar el Texto</div>
<div style="clear:both;"></div>

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Cuatro Columnas

<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto </div></div>
<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto</div></div>
<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto</div></div>
<div style="float: right; padding: 4px; width: 23%;"><div style="text-align: justify;"> Pegar el Texto</div></div>

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Y modificando los porcentajes, podremos poner las columnas que queramos.

Si te gusto comenta y compártelo

Seguir a la red

Me ha llegado una pregunta sobre una entrada que se publico, relacionada con columnas que se refería a este post. La pregunta era:

“Me gusto esa entrada de como escribir en dos columnas y te quería preguntar si se puede hacer en tres, yo ya lo he intentado pero sin éxito”

Una solución para escribir varias columnas seria lo siguiente:

<table width="100%" border="0" cellspacing="10" cellpadding="10">
  <tr>
    <td><div align="justify">Primer Texto</div></td>
    <td><div align="justify">Segundo Texto</div></td>
    <td><div align="justify">Tercer Texto</div></td>
  </tr>
</table>

Para escribir 4 columnas seria el siguiente:

<table width="100%" border="0" cellspacing="10" cellpadding="10"> 

  <tr>
    <td><div align="justify">Primer Texto</div></td>
    <td><div align="justify">Segundo Texto</div></td>
    <td><div align="justify">Tercer Texto</div></td>
    <td><div align="justify">Cuarto Texto</div></td>
  </tr>
</table>

Y así añadiríamos tantas columnas como quisiéramos, por cada columna añadiríamos:

  <td><div align="justify">Otro Texto</div></td>

Esta seria la estructura básica, se podrá cambiar todas las características que queramos ya podremos elegir la anchura el color, la separación y demás. Si las columnas tienen distintas medidas, podriamos jugar con los espacios para dejarlas iguales. Espero que os sirva y si os gusta lo compartáis...

En Diseño  Edición Html,Ctrol F y buscamos "Etiquetas"
Si queremos expandir y contraer etiquetas, tendremos que buscar el siguiente código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

y lo sustituiremos por:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[+/-]  Este será el signo que saldrá, pero si queremos poner una imagen como en este caso, el corazón, bastara con quitarlo y poner

<img src='URL DE LA IMAGEN'/>

Cambia URL DE LA IMAGEN por la correspondiente dirección de la imagen y ten en cuenta también el tamaño de la imagen.

Vista previa y si todo va bien, guardar.

Cómo borrar Suscribirse a: Entradas (Atom) en Blogger, hoy vamos a quitar esa leyenda  que a mi modo de ver no sirve para nada.

Iremos a Plantilla.

HTML

Ctrol F para sacar el buscador y pondremos:

Blog feed links

y encontraremos:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

Borraremos esta línea:

<b:include data='feedLinks' name='feedLinksBody'/>

Miraremos la vista previa y si todo esta bien Guardaremos cambios.

Si por algún motivo no estuviera bien con dar atrás, no nos guardaría los cambios y podíamos volver a empezar.

Un gadget para iconos sociales, no deja de ser útil para nuestro blog.
¿Como poner nuestros iconos sociales?
Para ello iremos a Diseño, añadiremos gadget, elegiremos HTML y pegaremos el siguiente código:

<div id="social">
<a href="HTTP                   FACEBOOK" target="_blank">
<img alt="Facebook" src="http://goo.gl/n2PoaI" title="Siguenos en Facebook" /></a>
<a href="HTTP               GOOGLE PLUS" target="_blank">
<img alt="Google+" src="http://goo.gl/w3W8MA" title="Siguenos en Google Plus" /></a>
<a href="HTTP                       TWITTER" target="_blank">
<img alt="Twitter" src="http://goo.gl/iU7MFl" title="Siguenos en Twitter" /></a>
<a href="HTTP            DE    TU    BLOG" target="_blank">
<img alt="Blog" src="http://goo.gl/mCxHG3" title="Siguenos en nuestro blog" /></a>
<a href="HTTP   DE TU  FEEDFURNER" target="_blank">
<img alt="RSS" src="http://goo.gl/JR0GJr" title="Suscribete a nuestro RSS" /></a>
<a href="HTTP       DE           YOU TUBE" target="_blank">
<img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgoNl8kUPKyZ3UeUAlkSHneEQpXOx2FU74PlNKyOc6BnSNJ_fKtwHlk3pVMASW5rJQIWpe0Uj8Rzm9rwiq2JcqhEMsg7YYFt4frx0txrndpG7_bXGQtXf5wVcRWforOibT6kdziX5Int0/h120/youtube.png" title="Siguenos en You Tube" /></a>
<a href="mailto:              TU     CORREO" target="_blank"><img src="http://goo.gl/VFfdCO" /></a><br /></div>

Hay que respetar las comillas, espero que te resulte sencillo. Luego solo nos quedara ponerlo en el lugar que nos guste mas.

Ya sabes, si quieres comentar...  y si te gusto compártelo...

Seria interesante que antes de hacer nada, respaldáramos la plantilla.
1. Entramos en Diseño | Edición de HTML Control F buscamos el siguiente código;:

3. Buscaremos ahora antes de </head> o después de <head> un código como este lo eliminaremos:

Si ahora lo quieres quitar el Leer más automático, seguiremos unos pasos para dejar la entrada como antes. Solo tendremos que retroceder los pasos que en su día dimos para ponerlo.

Seria interesante que antes de hacer nada, respaldáramos la plantilla.
1. Entramos en Diseño | Edición de HTML Control F buscamos el siguiente código;:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Busca lo marcado en verde para situarte, puede que no sea el mismo pero veras que se parece bastante.
2. Una vez localizado, eliminalo todo y pones en su lugar el siguiente código:

<data:post.body/>

Haremos vista previa y si todo va bien, veras las entradas completas.


Así que ahora lo que haremos sera quitar el script, así que aligeraremos nuestra plantilla al no obligarlo a cargar algo que no necesitamos.

3. Buscaremos ahora antes de </head> o después de <head> un código como este lo eliminaremos:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Con estos pasos ya no tendremos el  Leer más automático con imágenes en miniatura.
Espero que te sea util.
Si te gusto compártelo...

A medida que nuestro blog, va creciendo y lo vamos organizando nuestras etiquetas aumentan, tenemos varias maneras de exponerlas, pero una sencilla manera sera poner las etiquetas en dos columnas,  de una manera sencilla y fácil lo conseguimos.

En esta imagen como lo tenemos:

Vamos a Diseño - Edición de HTML.,buscamos el id del widget de etiquetas.En mi caso es Label1

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

Ahora lo que haremos sera ir a Plantilla, Personalizar, Avanzados y añadir CSS 
En ella pondremos el siguiente código:

#Label1 ul li{float: left;width: 40%;}

daremos dos intros y aplicar al blog, asi guardaremos los cambios que si nos fijamos nada mas dar los intros veremos los cambios en vista previa.
Así es como quedaran nuestras etiquetas.

Tendremos que estar pendiente del ID, si no corresponde con Label1 tendremos que poner el que tengamos nosotros en nuestra plantilla con esto habremos puesto nuestras etiquetas en dos columnas.

¿Te ha resultado practico?

Modificar nuestra plantilla y luego no encontrar lo que hemos puesto, por no señalizar el código que añadimos para cualquier modificación, resulta de lo más incómodo, y veo que a muchos nos pasa así que lo vamos a explicar para el que quiera ser ordenado, con las modificaciones, en sus plantillas

Pero vamos a ponerlo correctamente ya que si bien algunas veces blogger nos admite el fallo, luego es un lio buscarlo.

En una plantilla, marcaremos de una forma el CSS y de otra el HTML.

Señalizar lo que añadimos en el CSS

 CSS  es  el código de la misma que está incluido entre las etiquetas <b:skin><![CDATA[/* y ]]></b:skin>.

/* ------ */

/* Footer----------------------------------------------- */

Señalizar lo que añadimos en el HTML

HTML desde la etiqueta ]]></b:skin> hasta el final del código de la plantilla es  código HTML, aunque con la única precaución de no incluir nada entre las etiquetas </head> y <body>.

<!-- Script de indice -->

<!-- Inicio del script de indice -->Aqui pondríamos nuestro script<!-- Final del script de indice -->

Los navegadores no interpretarán lo que esté incluido dentro de esas etiquetas <!--   -->

De esta manera si quisiéramos cambiar algo de nuestra plantilla, solamente la solamente lo tendríamos que meter entre medio, ya que los navegadores no lo interpretaría, y poner el código donde quisiéramos.

<!-- Inicio de enlace
AQUI IRIA EL CODIGO
Final del enlace  -->

De tal forma que si un día lo quisiéramos  volver a usar bastaría con eliminar lo  añadido.

En ocasiones tenemos que poner un cuadro de texto en los post, ya que si no podía ser interminable, pues bien entre otros, este es un sistema muy rápido y fácil de ejecutar.

Consiste en tener a mano este código, tal  y como esta, eso sí tendremos que ponerlo en vista HTML, sino no funcionara.

Como puedes ver, lo que está en azul, lo podemos poner al centro, a la izquierda o derecha.   center   left  right

Las medidas para poder modificarlo a nuestro gusto o adaptarlo al espacio que tengamos.

<span id="fullpost"><div align="center"><pre style="overflow: auto; width: 500px; height: 200px;"><div align="left"><span style="font-size: 100%;">

En este espacio ponemos el texto que queramos; sea largo o corto.

</span></div></pre></div>

Así que ya veis este será el resultado:

Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dell



as.Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no


Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no

¿Te ha resultado útil?
Puedes comentar y compartir

En  ocasiones sería bueno poner nuestro blog en construcción cuando estamos realizando cambios, cosa que no suelo hacer, pero que si me he encontrado muchas veces y que me parece una buena opción.

1) Vamos a Plantilla y en Edición de HTML, buscamos con Ctrol F, nos sale el buscador y buscamos:

2)

 <body>

3) Seguido a esta etiqueta ponemos lo siguiente:

<span class="item-control blog-admin"><div style="text-align: center;"><img src="URL DE LA IMAGEN"/></div>

En URL DE LA IMAGEN, pondremos la imagen de nuestra elección, previamente alojada en  el servidor de nuestra elección.

4)  buscamos esta etiqueta:

</body>

7) Y  antes de ella pegaremos esto:

</span>

8) Y con esto ya tenemos la imagen de blog en construcción.

Con este cambio no severa el blog, solo se verá la imagen que hayamos puesto, eso sí, los administradores sí que podemos entrar y ver el blog.

Cuando queramos volver a poner nuestro blog en la red, bastara con realizar los pasos, e ir quitando el código que hemos puesto.

Sitemap o mapa del sitio, contiene toda la información de nuestro blog o pagina web, y nos conviene enviarla ya que es una forma de avanzar en la red,  es una información que les mandamos a los robots con todo el contenido del blog.  ¿Como enviar sitemap a Google? Entraremos a Herramientas Webmaster, para enviar un sitemap a Google. En el boton Añadir un sitio, rellenaremos nuestro datos, nos pedira que verifiquemos la propiedad de nuestro sitio, el método más sencillo será  añadir una metaetiqueta a la plantilla HTML, que la pegaremos después de <head>, una vez verificada veremos el panel control de nuestro sitio, en Herramientas  Webmaster. Ahora tendremos que buscar  el enlace Enviar Sitemap y daremos clic.

Aparecerá la URL de tu blog y al lado un recuadro, en ese recuadro pega lo siguiente:

Una buenísima manera de entender nuestra plantilla, muy bien explicada, la encontré hace un tiempo y no recuerdo donde lo encontré. Pero aqui la dejo para que todo el que la quiera la pueda cosultar.        

<b:widget id='FollowByEmail1' locked='false' title='Seguir por Email' type='FollowByEmail'>

En este ejemplo el id del gadget es FollowByEmail1 Ya teniendo el id del widget, pega antes de]]></b:skin>

lo siguiente:

#FollowByEmail1 {background: url(URL de la imagen) left top;color: #000;}

Y así sucesivamente para todos los gadgets a los que queráis ponerle la imagen de fondo, sólo debes cambiar la URL de la imagen y en color cambiar el color del texto del título.Si lo prefieres también puedes cambiar todo el título por una imagen, sólo que en su lugar pegamos antes de

esto:

#FollowByEmail1 {background: url(URL de la imagen) no-repeat top;height: 30px;}

De igual forma hay que cambiar la URL de la imagen, y en heigth poner el alto de la imagen.
Ahora en Diseño y en Editar
Busca el gadget al que le cambiaste el fondo y borra el título del gadget, en su lugar escribe esto:

&nbsp; 

Con esto eliminamos el texto del gadget, pon las imágenes que se adapten al estilo de tu plantilla.  ¿Has conseguido, añadir el truco?¿Te ha interesado?

Cómo poner imágenes de fondo en el título de ciertos gadgets.

La siguiente explicación nos servirá para cambiar cualquier titulo por imagen en cualquier gadget de nuestro blog.

Identificaremos el id del gadget. el cual queremos modificar, entraremos en Plantilla | Edición de HTML buscaremos el gadget que queremos modificar, lo puedes identificar por el título, por ejemplo Etiquetas, o Seguir por Email o cualquiera que sea el nombre del Gadget

<b:widget id='FollowByEmail1' locked='false' title='Seguir por Email' type='FollowByEmail'>

En este ejemplo el id del gadget es FollowByEmail1 Ya teniendo el id del widget, pega antes de]]></b:skin>

lo siguiente:

#FollowByEmail1 {background: url(URL de la imagen) left top;color: #000;}

Y así sucesivamente para todos los gadgets a los que queráis ponerle la imagen de fondo, sólo debes cambiar la URL de la imagen y en color cambiar el color del texto del título.Si lo prefieres también puedes cambiar todo el título por una imagen, sólo que en su lugar pegamos antes de

]]></b:skin>

esto:

#FollowByEmail1 {background: url(URL de la imagen) no-repeat top;height: 30px;}

De igual forma hay que cambiar la URL de la imagen, y en heigth poner el alto de la imagen.
Ahora en Diseño y en Editar
Busca el gadget al que le cambiaste el fondo y borra el título del gadget, en su lugar escribe esto:

&nbsp; 

Con esto eliminamos el texto del gadget, pon las imágenes que se adapten al estilo de tu plantilla.  ¿Has conseguido, añadir el truco?¿Te ha interesado?

Si quieres las columnas de gadgets encima de las entradas, entonces agrega arriba de lo anterior esto:

<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si también quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer código esto:

<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Para añadir un gadget arriba o abajo de las entradas bastara con arrastrar el gadget hasta donde queramos que aparezca,

Pero si queremos añadir dos columnas de gadget arriba o abajo de las entradas. tal y como vemos en la siguiente imagen

 Entraremos en Edición HTML de la plantilla,y con Ctrl F buscaremos este código:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section>

Si quieres las columnas de gadgets encima de las entradas, entonces agrega arriba de lo anterior esto:

<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si también quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer código esto:

<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

El % en color rojo es el ancho de cada uno de los contenedores, si los gadgets no estuvieran igualados, reduce esos valores hasta que los gadgets se vean igualados, conseguiremos tener dos columnas en esa zona del blog.


Puedes poner las columnas arriba, las columnas abajo o arriba y abajo, eso es ya decision de cada uno o bien la necesidad que tengamos en cada blog

Bajo el Título del Post podemos poner los  botones Me Gusta, Twittear, Google+. 

Lo primero que haremos es ir a plantilla, Edición de Html, continuar Con Ctrol F buscaremos:

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

debajo pondremos lo siguiente:

<table border='0' cellpadding='6' style='width: 50%;'><tbody><tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweetear</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone size='medium'/></td><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px'/></td></tr></tbody></table>

Si tenemos entradas resumidas y queremos que los botones solo sean visibles dentro de la entrada entonces pondremos en mismo código anterior pero encerrado dentro de una condicional, de la siguiente forma:

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <table border='0' cellpadding='6' style='width: 50%;'><tbody><tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweetear</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone size='medium'/></td><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px'/></td></tr></tbody></table> </b:if>

Si por el contrario, queremos que aparezca al final de la entrada buscaremos este código:

<div class='post-footer'>

y pondremos debajo:

 <table border='0' cellpadding='6' style='width: 50%;'><tbody><tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweetear</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone size='medium'/></td><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px'/></td></tr></tbody></table>

Veremos como centrar gadget en el blog, de una manera sencilla y eficaz. <div align="center">Código que se quiere centrar</div>

<div align="right">Código que se quiere a la derecha</div>

<div align="left">Código que se quiere a la izquierda</div>

Tan solo hay que añadir el código donde se indica para alinearlo a cualquier posición.

Pero si queremos centrar  gadget de blogger,  iremos a vista diseño de nuestro blog, y en 

Plantilla, HTML, Ir al Widget, y se nos abre un desplegable, con el nombre de los gadget, elegimos el que queremos centrar, en este caso elegimos el de etiquetas ya que no se puede modificar su Html.

Buscaremos con Ctrol F y pondremos  ]]></b:skin>  y justo encima le pegaremos el siguiente codigo.

#nombrewidget { text-align: center; }

Donde Nombre widget sera nuestro gadget, con estos sencillos pasos, lograremos alinear nuestro gadget

Vamos a ver como  mostrar los títulos de los post cuando ordenamos por etiquetas nuestro blog, Iremos a Diseño, Html, Buscaremos </head> y pondremos el siguiente script:

<script type='text/javascript'>//<![CDATA[function toggleIt(id) {post = document.getElementById(id);if (post.style.display != 'none') {post.style.display = 'none';} else {post.style.display = '';}}function showFullPost(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")spans[i].style.display = 'inline';if (spans[i].id == "readmore")spans[i].style.display = 'none';}}function showFull(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")spans[i].style.display = 'inline';if (spans[i].id == "showlink")spans[i].style.display = 'none';if (spans[i].id == "hidelink")spans[i].style.display = 'inline';}}function hideFull(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")spans[i].style.display = 'none';if (spans[i].id == "showlink")spans[i].style.display = 'inline';if (spans[i].id == "hidelink")spans[i].style.display = 'none';}post.scrollIntoView(true);}function checkFull(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');var found = 0;for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")found = 1;if ((spans[i].id == "showlink") && (found == 0))spans[i].style.display = 'none';}}function commentDisplay(json) {for (var i = 0; i < numcomments; i++) {var entry = json.feed.entry[i];var alturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {alturl = entry.link[k].href;break;}}alturl = alturl.replace("#", "#comment-");if (entry.content) {comment = entry.content.$t;} else if (entry.summary) {comment = entry.summary.$t;}var re = /<\S[^>]*>/g; comment = comment.replace(re, ""); document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');if (comment.length < numchars)document.write(comment + '<br/><br/>');elsedocument.write(comment.substring(0, numchars) + '...<br/><br/>');}}//]]></script>

Buscaremos en nuestra plantilla: 

<b:includable id='main' var='top'><!-- posts --><div id='blog-posts'><b:loop values='data:posts' var='post'><b:if cond='data:post.dateHeader'><h2 class='date-header'><data:post.dateHeader/></h2>                                                           </b:if>

Justo encima, pondremos lo siguiente

<b:if cond='data:blog.homepageUrl != data:blog.url'>                                                               <b:if cond='data:blog.pageType != &quot;item&quot;'><b:include data='post' name='PeekABooPost'/><b:else/><b:include data='post' name='post'/></b:if><b:else/>

Ahora buscaremos

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

y debajo pondremos: 

</b:if>   

o explicado de otra manera, seria buscar lo que esta escrito en negro y pegar encima lo azul.

<b:includable id='PeekABooPost' var='post'><div class='post uncustomized-post-template'><table><tr><td width='40px'><a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/contraer la entrada'>[+/-]</a></td><td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table><div class='post-body' expr:id='data:post.id' style='display:none'><p><data:post.body/></p><div style='clear: both;'/> <!-- clear for photos floats --></div></div></b:includable><b:includable id='main' var='top'><!-- posts --><div id='blog-posts'><b:loop values='data:posts' var='post'><b:if cond='data:post.dateHeader'><h2 class='date-header'><data:post.dateHeader/></h2></b:if><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:include data='post' name='PeekABooPost'/><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>

Y esta seria la manera de hacerlo. Guardar cambios