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.

Vamos a explicar como Personalizar los links de entradas recientes, página principal, entradas antiguas,  tendremos que tener tres imágenes con los temas que nos gusten.
Las alojaremos para tener las URL.

Si queremos resaltar un texto en un recuadro para destacarlo

<div style="margin:0px auto;width:250px;text-align:left;padding:10px; #bbf2ce;border:1px solid black;"> AQUI EL TEXTO QUE QUEREMOS QUE ESTE EN EL RECUADRO </div>

AQUI EL TEXTO QUE QUEREMOS QUE ESTE EN EL RECUADRO

Para tener los últimos comentarios con fecha y título del post, lo conseguiremos con este sencillo script.

Lo primero que debemos hacer es ir a Diseño

Añadir un gadget.
Hacemos click en "HTML/Javascript" y pegamos el siguiente script:

<script type="text/javascript">
function showrecentcomments(json) {
for(var i=0; i < a_rc; i++) {
var b_rc=json.feed.entry[i];var c_rc;
if(i==json.feed.entry.length)break;
for(var k=0; k < b_rc.link.length; k++) {
if(b_rc.link[k].rel=='alternate') {
c_rc=b_rc.link[k].href;break;
}
}
c_rc=c_rc.replace("#","#comment-");
var d_rc=c_rc.split("#");
d_rc=d_rc[0];
var e_rc=d_rc.split("/");
e_rc=e_rc[5];
e_rc=e_rc.split(".html");
e_rc=e_rc[0];
var f_rc=e_rc.replace(/-/g," ");
f_rc=f_rc.link(d_rc);
var g_rc=b_rc.published.$t;
var h_rc=g_rc.substring(0,4);
var i_rc=g_rc.substring(5,7);
var j_rc=g_rc.substring(8,10);
var k_rc=new Array();
k_rc[1]="Ene"; k_rc[2]="Feb"; k_rc[3]="Mar"; k_rc[4]="Abr";
k_rc[5]="May"; k_rc[6]="Jun"; k_rc[7]="Jul"; k_rc[8]="Ago";
k_rc[9]="Sep"; k_rc[10]="Oct"; k_rc[11]="Nov"; k_rc[12]="Dic";
if("content" in b_rc){
var l_rc=b_rc.content.$t;
} else if("summary" in b_rc) {
var l_rc=b_rc.summary.$t;
} else var l_rc="";
var re=/<\S[^>]*>/g;
l_rc=l_rc.replace(re,"");
if(m_rc==true)document.write(k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');
document.write('<li><b>' + b_rc.author[0].name.$t + '</b>');
if(n_rc==true)document.write(f_rc);
document.write(':<br/>');
document.write('<a href="' + c_rc + '">');
if(l_rc.length < o_rc) {
document.write(l_rc);
} else {
l_rc=l_rc.substring(0,o_rc);
var p_rc=l_rc.lastIndexOf(" ");
l_rc=l_rc.substring(0,p_rc);
document.write(l_rc+'…');
}
document.write('</a></li>');
}
}
</script>
<script type="text/javascript">
var a_rc=10;
var m_rc=true;
var n_rc=false;
var o_rc=70;
</script>
<script src="http://AQUÍ-TU-BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Explicación de los colores:

http://AQUÍ-TU-BLOG.blogspot.com deberemos de poner la dirección de nuestro blog

var a_rc=10; nos indica el número de coemntarios a mostrar.

var m_rc=true; para mostrar la fecha de los comentarios:
true para mostrar la fecha y
false para omitirla.

var n_rc=false mostrar el titulo del post del comentario
true para mostrar el título y
false para omitirlo.

var o_rc=70 número de letras que se mostrará por cada comentario.

Si quisiéramos poner Fotos de antes y después que cambian con el ratón que seria muy interesante para ver un cambio, por ejemplo la decoración de una habitación, o simplemente cambiar de una foto a otra, como en el ejemplo que a continuación he puesto en este post.
Bastaría con poner el siguiente código,

<img src="UNO" onmouseover="this.src='DOS';" onmouseout="this.src='UNO';"/>

remplazando donde dice UNO por la URL de la imagen  uno y donde dice DOS por la URL de la imagen Dos.
Así que tendremos que tener nuestras imágenes alojadas en un servidor y tener la url de la imagen.
Sustituir el UNO por la Url de la imagen que queramos sea la primera. y
sustituir el DOS por la Url de la imagen  que se vea al poner el ratón encima.
Esto si queremos ponerlo en una entrada lo pondremos en HTML,  guardaremos y daremos en vista previa para ver los resultados.
Si nos interesa ponerlo en un gadget,
Añadiremos en vista Diseño un gadget y lo elegiremos en HTML/Javascript: y pegaremos el codigo con los cambios antes mencionados, pudiendo ponerlo donde nos interese..

Para resaltar un texto dentro un post, insertaríamos un código en la entrada

 <table bgcolor="#bbf2ce"><tbody><tr><td><p align="justify"><strong>Con este texto, resaltariamos con un color verde </strong></p></td></tr></tbody></table> 

Y el resultado obtenido es este:

Con este texto, resaltariamos con un color verde

Con este texto, resaltariamos con un color verde

bgcolor.. donde podrás poner el color que más vaya con tu blog.

Podemos Elegir cuántas entradas mostrar en las páginas de Etiquetas. 

Para ello, iremos a Edición HTML de la plantilla, buscamos:

'data:label.url'

Con mucho cuidado cámbialo por esto:

'data:label.url + "?max-results=6"'

Si este código se repite, lo haremos en todos los que encontremos
 el número de entradas que quieras que aparezcan, esta resaltado en verde


Conseguiremos que el enlace de la etiqueta, o en el gadget de Etiquetas  cambie la URL para mostrar el número de entradas que hemos seleccionamos.


Si tuvieras un menú con las URLs de las etiquetas  añadiriamos un parámetro a esos enlaces, la URL de una etiqueta seria así:

http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta

Y se le añadiría lo de color verde:

http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta?max-results=6

Podemos decidir cuántas entradas se mostrarán. Resaltado en verde.
Así elegiremos cuántas entradas mostrar en las páginas de Etiquetas.

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

Colocaremos el titulo en movimiento en la barra del navegador, 

solamente tendremos que cambiar donde dice:   

AQUI EL TITULO O MENSAJE QUE QUIERAS  y agregarlo como elemento HTML en nuestra plantilla

<SCRIPT LANGUAGE="JavaScript">
var txt=" AQUI EL TITULO O MENSAJE QUE QUIERAS";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</SCRIPT>

Con este sencillo truco pondremos en movimiento la pestaña  y lanzaremos en mensaje que queramos.

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

Pondremos un recuadro enmarcando el titulo de nuestros post:

Entramos en Plantilla iremos a HTML y localizamos

/*Posts

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;

Quitaremos

color:$titlecolor;

Y pegamos el siguiente código:

background-color: #991188;

Si queremos centrar el título del post añadiremos:

text-align:center;

Podemos añadir también un borde pegando en el mismo sitio el siguiente código:

border: dotted #000000; 6px

Al final el código lo dejaríamos de la siguiente forma:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
background-color: #991188;
text-align:center;
border: dotted #000000; 4px
}

Modificaremos el color de fondo (#991188;)
y el grosor del marco (line-height:1.4em;),
el tipo de borde (dotted),
también podríamos poner una imagen de fondo.

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

La Plantilla de Entrada, otra muy buena utilidad que nos brinda blogger para facilitarnos las labores repetitivas de nuestras entradas, así que si mas vamos a verla. 

Para acceder a ella tendremos que ir a:

1. Vista diseño de nuestro blog y pasaremos a configuración, Entradas y comentarios y vemos que tenemos dentro de Entradas, Plantilla de las entradas, es en ese recuadro donde pondremos todo lo que queramos que salga en nuestras entradas, ahora bien todo lo tendremos que poner en HTML, pero si no sabemos nada de este código bastara con ir a una nueva entrada y en vista redactar poner lo que queramos que salga y luego pasamos a vista  html y copiamos y pegamos todo el código, en el recuadro que mencionábamos antes.
2. Esto ocurrirá a partir de incorporar el código, todas las demás entradas seguirán como estaban hasta ese momento. Pero todas las nuevas entradas que hagamos saldrán nuestro código y que si en ese momento no quisiéramos que se vieran, bastara con eliminarla en esta entrada, y la próxima , volvería a salir. 
3. Por lo que si ponemos algo que luego no queremos que salga, sera cuestión de volver a donde hemos señalado en primer termino y eliminarlo. En este blog, ahora tenemos esta firma y los iconos sociales que tenemos en las nuevas entradas.

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

Cómo eliminar subrayado de los enlaces  

Para ello hacemos lo siguiente:

Vamos a Diseño/ Edición de HTML  CTRL+F buscamos:

a:hover {

color:$titlecolor;

text-decoration:underline;

}

Borramos 

text-decoration:underline; 

y añadimos:

a:hover{text-decoration:none;}

a{text-decoration:none;}

Si en nuestra plantilla no esta el código anterior, buscariamos lo siguiente:

Diseño/ Edición de HTML   CTRL+F buscamos

 <body> 

y debajo de este pegamos lo siguiente:

<style type="text/css">

A:link, A:visited { text-decoration: none }

</style>

Con esto eliminamos el subrayado de los enlaces.

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

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...

Con este sencillo código, lograremos abrir los links en una nueva ventana, este truco nos sera útil para que nuestras visitas permanezcan un poco mas en nuestro blog,

Un link, se vera de la siguiente manera:

<a href="http://laredteayudara.blogspot.com/">

Para abrirlo en una nueva ventana, iremos a Edición HTML de la entrada y le añadimos

 target="_blank" 

al link a modificar como lo muestra la siguiente cita:

<a href="http://laredteayudara.blogspot.com/" target="_blank">

Deja un espacio entre /" y target.

Para que todos los links se abran en una nueva ventana vas a

 Diseño, Edición HTML y pegas después de:

<head> 

lo siguiente:

<base target='_blank'/>

Como puedes ver es muy sencillo,

Te ha resultado fácil la explicación de ¿como abrir los links en una nueva ventana?

Con este sencillo código, lograremos abrir los links en una nueva ventana, este truco nos sera útil para que nuestras visitas permanezcan un poco mas en nuestro blog,

Un link, se vera de la siguiente manera:

<a href="http://laredteayudara.blogspot.com/">

Para abrirlo en una nueva ventana, iremos a Edición HTML de la entrada y le añadimos

 target="_blank" 

al link a modificar como lo muestra la siguiente cita:

<a href="http://laredteayudara.blogspot.com/" target="_blank">

Deja un espacio entre /" y target.

Para que todos los links se abran en una nueva ventana vas a

 Diseño, Edición HTML y pegas después de:

<head> 

lo siguiente:

<base target='_blank'/>

Como puedes ver es muy sencillo,

Te ha resultado fácil la explicación de ¿como abrir los links en una nueva ventana?

Compartelo en las redes: