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

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

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?

Que sólo lo pueda ver el administrador del blog y no los lectores.

Siempre estamos modificando los gadget y muchas veces nuestros lectores, están viendo los gadget mal puestos o inacabados, puede ser cualquier tipo de gadget.

Con este código veremos que podremos ocultarlo mientras lo manipulamos y dejamos a nuestro gusto, solamente agregaremos dos líneas a nuestro gadget para ocultarlo.

Entraremos en vista Diseño y  en Edición HTML de la plantilla con Ctrol f buscaremos el gadget.

Cualquiera nos va a servir para ver como ocultarlo,

Con  un  gadget HTML/Javascript  veremos un código, asi:

<b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/>
</b:includable></b:widget>

Lo único será añadirle lo escrito en azul.

<b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><span class='item-control  blog-admin'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></span></b:includable>
</b:widget>

Si cierras la sesión y entras a tu blog no veras  el gadget que ocultaste, pero si inicias sesión estará  visible para ti.

Para los gadget que no tienen el código igual, una referencia será buscar

<b:includable id='main'>              

 y colocas después

<span class='item-control  blog-admin'>

No todos los gadgets tienen la misma estructura como la del ejemplo, pero será fácil guiarte,
sólo debes colocar el primer código azul  justo después de

<b:includable id='main'> 

 y

 </span> 

 antes de

 </b:includable>

Ahora solo tu veras ese gadget…

¿Te ha servido esta información?

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

Una manera de poner  Botones Flotantes de medios sociales para Blogger, Seguir este enlace  

Botones Flotantes

Bastara con que rellenemos los requisitos y veamos la vista previa, si nos convence tendremos nuestros botones flotantes en unos momentos.

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

Agregar  este gadget tienes que entrar a Diseño, Añadir gadget, HTML pegar el siguiente código:

<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 8; // how big a list of top commentators
var minComments = 1; // how many comments must top commentator have at least
var numDays = 0; // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true; // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = ''; // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 28;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIAUftVxsLE_gwmLZlDzzubtquvvRn1prverMaoVoDyGeMJnvKnAIUBDfz_kS4UOp6aOoNDIevXwcPWnXHntiSe7T4acrXYzM1mWX1szW8KpWX-ctAypikhG9pXDDRc5yXrmMNb17M0D0/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
//Calculate difference btw the two dates, and convert to days
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;
var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}
// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
// list top topcommenters:
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>