como colocar una imagen de fondo en blogger

Bueno, soy yo de nuevo, en este caso les enseñare como colocar una imagen de fondo en nuestro blog de la manera mas simple y directa....

Muchos usuarios de blogger dejan pasar por alto colocar una imagen de fondo en el blog, sin darse cuenta que es un recurso que nos ayuda bastante a la hora de querer tener el mejor diseño para nuestros visitantes, en esta entrada les mostrare como hacerlo de una manera simple, como ya les mencione; 

ahora vamos comenzando...

PRIMER PASO:

 BUSCA UNA FOTO QUE TE GUSTE Y QUE MIDA MAS DE 1024 X 728, QUE TENGA BUENA RESOLUCIÓN Y QUE TENGA MAS DE 500 KB, ESTO ES SI LO USAS COMO FONDO DE PANTALLA DE TU PC PUEDE SERVIR PARA TU BLOGGER.

SEGUNDO:

 LA TIENES QUE SUBIR A UN HOSTING, EN ESTE CASO UTILIZAREMOS  IMAGESHACK  

,

-AHORA SUBES TU IMAGEN  CON LA OPCIÓN DE MONITOR DE 19 PULGADAS QUE ES LA MAS COMÚN.

-CUANDO TERMINE COPIAS EL LINK QUE ESTA DONDE DICE ENLACE DIRECTO 

 (En ocasiones es necesario registrarse)

-AHORA VAS AL BLOG Y ENTRAS EN LA PESTAÑA DISEÑO LUEGO AÑADE UN GADGET HTML/JAVASCRIP:

LUEGO INSERTAS ESTE CÓDIGO HTML:

<style type="text/css">body {background-image: url("TU LINK DE IMAGESHACK VA AQUI"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }</style><div id="tag" style="position:absolute; left:0px; top:30px; "></div>

PONES TU DIRECCIÓN DE IMAGESHACK ENTRE LAS COMILLAS, LO GUARDAS Y LISTO YA TENEMOS NUESTRA IMAGEN DE FONDO EN NUESTRO BLOG.

Nota:  En este tutorial utilize el hosting  IMAGESHACK por mi preferencia, puedes usar el hosting que desees a tu gusto.

como poner una reseña acerca del autor

Hace unos meses publique una entrada donde enseñaba como agregar el truco de acerca del autor pero en blogs de un solo autor, pues recibi varias solicitudes de como agregar el truco en blogs con varios autores.

Para agregar este truco primero entra en la Edicion HTML de tu blog y con los artilugios expandidos busca y elimina lo siguiente:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span>

Ahora debajo de <data:post.body/> pega lo siguiente:

    <b:if cond='data:post.author == &quot;Autor 1&quot;'>
    <div class='acercadelautor'>
    <img border='0' src='URL del avatar 1' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
    </div>
    </b:if>


    <b:if cond='data:post.author == &quot;Autor 2&quot;'>
    <div class='acercadelautor'>
    <img border='0' src='URL del avatar 2' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>

    </div>
    </b:if>

En donde dice Autor 1 y Autor 2 debes poner el nick de los autores tal como aparece en el blog respetando las mayúsculas, minúsculas y espacios, eso es muy importante.


Si quieres agregar otro autor solo debes agregar otro bloque como el siguiente:

 <b:if cond='data:post.author == &quot;Autor 3&quot;'>
<div class='acercadelautor'>
<img alt='' border='0' src='URL del avatar 3' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div>
</b:if>

Ahora para darle un poco de estilo haremos uso del CSS que deberas pegar antes de  ]]></b:skin>

.acercadelautor {
background:#EFFBFB; /* Color de fondo */
border:1px solid #ccc; /* Borde */
letter-spacing:normal;
color:#424242; /* Color del texto */
text-transform:none;
font-size:12px; /* Tamaño del texto */
padding:5px;
margin:10px 0 10px 0;
}
.acercadelautor strong {
color:#1C1C1C; /* Color del nombre del autor */
font-weight:bold;
font-size:13px; /* Tamaño de letra del nombre del autor */
padding-left:5px;
}

Como vez es muy facil solo es cuestion de pegar unos cuantos codigos y arreglarlo a vuestro gusto.

Para finalizar aclaro que los resultados solo se veran en las entradas.

Gadget de Top Comentaristas para Blogger

Los comentaristas son una parte fundamental de cualquier blog, ya que ellos son los que le dan vida al blog, abriendo y causando debates lo que genera mas actividad en las entradas.

Por eso es muy importante saber cuales son los usuarios mas activos del blog, los usuarios que mas comentan, y es por esto que hoy les presento un espectacular método para la lista de top comentaristas del blog.

El gadget se vera de la siguiente manera:

Esta nueva forma del gadget de Top Comentaristas, viene con el avatar del usuario y esta hecho en JavaScript, este código pertenece a MS-Potilas, yo solo he modificado algunos atributos dando como resultado un código mas optimizado.

Para agregar este gadget tienes que entrar a Diseño, Añadir gadget, HTML/JavaScript y 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/AVvXsEiJARkTwpg2RxRyZpuJA2KxSvnyhxTwTg90WpTkjc-Ci4IRSBj-qKsOjOvquVrKqUF2YdQPrNxLvlLWrGkXvsRiPvNVxI94f7XEggMfZJ-sCjcP9jPnZuyJKi2H0LiY5Am9YgnbxwOCc94/"+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>

Ahora solo queda guardar los cambios y listo.

Para modificar el numero de usuarios que se muestran en el gadget, busca en el código var maxTopCommenters = 8;  y cambia el 8 por el numero que quieras.

Para modificar el tamaño del avatar de los comentaristas busca en el código var sizeAvatar = 28; y cambia el numero 28 por el numero de pixeles que desees.

Entradas Relacionadas con Miniaturas y efecto Hover

Ya he publicado un par de tutoriales de entradas relacionadas con imagen en miniatura,pero el truco que traigo como lo dice el titulo trae incorporado el efecto Hover,si no sabes que es el efecto hover entonces te lo explico:


El efecto Hover consiste en la alteración del aspecto de un elemento de la interfaz gráfica cuando se sitúa el puntero sobre el mismo, pero no se ha seleccionado aún.

El efecto queda de la siguiente manera:

El script pertenece a Spice Your Blog y le hice algunos cambios para adaptarlo a nuestran necesidades.

Para agregar este truco pega antes de ]]></b:skin> lo siguiente:

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

Ahora debajo de  <div class='post-footer'> (buscas esta linea con los artilugios expandidos) agrega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Entradas Relacionadas</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;http://www.webaholic.co.in/other/no-image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if>

Por ultimo guardas los cambios.

Como vez es muy facil de agregar,espero que les sea de utilidad y si tienen alguna duda no olviden comentar.

Huevo Bookmarking con efecto deslizante al abrirse

Todos los bloggeros buscan formas unicas de poner marcadores sociales ya que es atraves de ellos que los lectores comparten nuestros articulos y es por ello que  cumplen un papel vital en el blog.

Dentro de este contexto hoy les presento el "Huevo Bookmarking", este gadget consta de un pelicular huevo que al pasar el cursor sobre el se abre con un espectacular efecto deslizante y mostrando asi los marcadores sociales que lleva dentro.

Para agregar este truco pega antes de </head> lo siguiente:

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Ahora encima de </body> pega lo siguiente:

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script>

Por ultimo solo guarda los cambios.

Iconos Sociales que giran 360 grados

En esta oportunidad les quiero compartir un pack de iconos sociales en forma de huevos que giran 360 grados al pasar el cursos sobre ellos.

En el pack vienen incluidos los iconos de Facebook, Google +, Twitter, RSS FEED y Yahoo!.

Pueden ver el truco funcionando aqui :

Para agregar este truco en tu blog pega en un elemento HTML/JavaScript lo siguiente:

<center><div id="socialicons"><a href="URL FACEBOOK" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9sMDKW2Sz1TX7n-_py-jvWKqtVf8TC-ZsT7iyG79amFjMSPKc5qJGH7AmLMbu-bjfvecMp3GCi1k5DXrunNT2SzYf2xwMzDo0smOwtAx_v0Y01d_tCHShkagCMJcjo8JhmxrI2BS-T8k/s64/facebook.png" /></a><a href="URL GOOGLE PLUS" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKTcZ3d1BsLsTPPwtFauaFvUqsPvz3Ai4VH_REGgXHDHwFffcOJR3qEEOKrxH8lhRTCZmZCRZC1w2XOqP_piXCF59ikpKTr4ZuSlnPgQrGzhhQn9nr_Ps5vzunMAlMb5LeVdAkjbF4G5I/s64/google%252B.png"  /></a><a href="URL TWITTER" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqi4o_1u38-3rio9j5QjZPqQj06LVmMQvEXsZngUtnRq9RQ7bnGsWLrS0_nQ35komEXKivKV4FH3gccUZ6VIrTYcAlyEs0kAByYL-JiPG14SHaXkzH-p5ndsgc-bcY6Cmu33XgzPwcggY/s64/twitter.png"  /></a><a href="URL FEED" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2SMj37zNnOvS9BIA2HIv7hPkYy4aUkYtClwR3pHHOuOUG7P0G6lru0pzbORWlU_GjvXKMGg4dY8DODpPUMDI8na_aU4K5nu25mOFllHNxaHrTLTBpjz7dVPgTllxeSPdeLD0k0qoHW3Q/s64/rss.png" /></a><a href="URL YAHOO" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdeRIum3Tt8esAPLyUBMIx9KrPnCUEH9YbYpjnoOdXBlgohLLVdMBHbXxhHHNBGev93rd721F3ALZ-gw0vodtMSw1XqlC0DKJLpFzbe2zY-IwaUQFlvm10R_ldvIVtcB07soxQT0TCRQ/s64/yahoo.png"  />

</div></center>
<style>
#socialicons img{
 -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;}
#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}
</style>

Ahora solo cambia lo que esta en color azul por lo que se indica en cada caso.

Espero que les sea de agrado este pequeño truco y sigan visitando mi blog.

FanBox de Facebook flotante que baja con la página

Ya he publicado otras entradas donde muestro varias opciones para agregar el fanbox de facebook pero el de hoy tiene varias opciones que pueden resultar interesante y es que es flotante y que baja con la pagina con efecto deslizante ademas de tener un boton de cerrar.

Puedes ver el truco en accion en el siguiente blog de pruebas.

Para agregar este truco ve a Edición de HTML y pega antes de </head> lo siguiente:

 <style type='text/css'>
#anuncio {
position:absolute;
padding: 2px;
padding-top: 15px;
width: 280px; /* ancho del anuncio */
visibility: hidden;
z-index: 200;
top: 30px;
left: 30px;
}
#rss-mail {
/* color e imagen de fondo */
background: #F1F8E0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMViMHnT-Hiq27jOOzOCm8hz194vmJRhm4Rohgfjj-XfWapNCdRK_oxQVWvjy6M289oYS9XInvfQeMLNEVQBGzzdGsOBIP0QaCUbFM8UTRKo05R0iP7pAcWoUozlje5rpQlEUvapO9F6mK/s0/z-bg.png);
border:2px solid #FF8000; /* borde */
height:275px; /* alto de la caja */
}
#rss-mail span {
color:#FFFFFF; /* color del texto */
font-size:12px;
font-weight:bold;
line-height:30px;
}
#rss-submit {
background:#FF8000; /* color del botón */
border:0px;
}
.rss-box {
height:13px;
margin-top:10px;
color:#6E6E6E;
font-size:12px;
width:135px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 15 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

Ahora antes de  </body> pega lo siguiente:

 <div id='anuncio'>
<div id='rss-mail'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJlxGJeDTcvO9TbCfXUENoK-i4L1ImlW8ZnaxIWobRmJ6p3SQ5LmzxZH5xkq4kTd76KznwkQPMbX17hT36Ly3THpowN7MBBak_pzkF6sm-iBa341VZD2r6pzi8A705mcugXb9t1xLkrgg/s320/cerrar.png'/></a>

<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA' type='text/javascript'/><script type='text/javascript'>FB.init(&quot;1b8f0f706c312c05f42224b5b3399f80&quot;);</script><fb:fan connections='8' profile_id='XXXXXXXXX' stream='' width='275'/>
</div></div>

Donde estas las XXXXXXXXX pones la ID de tu pagina en Facebook.


¿Como averiguo la id de mi página en Facebook?

[1] Accedemos a nuestra página de Facebook.



[2] Nos fijamos entonces en url que se muestra en el navegador, y que será algo como esto:

http://www.facebook.com/home.php?#!/pages/edit/?id=174666062584624

Esos números que se muestran al final de la url, son la id de nuestra página, y son los números que hemos de colocar en el código del gadget "Like Box" sustituyendo a las XXXXXXXXXXXX.

Por ultimo guardas los cambios.

Agrega un Sistema de Calificaciones a tu Blog

Muchos sitios webs que circulan en la red tienen variados metodos de calificacion y aunque es bien sabido que Blogger tiene un sistema de calificacion bastante bueno,su uso no se generalizado entre los Bloggers que buscan otras alternativas a este sistema de calificacion.

Y aqui es donde aparece set rating.com que ofrece 2 modalidades: el clasico sistemas de estrellas y el de los pulgares de votacion tipo YouTube.

A continuacion unas imagenes de la vista parcial del gadget.

Y lo mejor de este sistema de calificaciones es que hace una estadistica distinta de cada entrada del blog,asi cuando un usuario valora tu entrada es llevado a una pagina donde se le mostrara todos los votos de la entrada que el acaba de valorar.

Para agregar el sistema de estrellas pega debajo de <div class='post-footer'> lo siguiente:

<script type="text/javascript" src="http://SetRating.com/SetRating.js"></script><script type="text/javascript">SetRatingWidget("star")</script>

Ahora para agregar el sistema de calificaciones por medio de pulgares agrega lo siguiente (tambien debajo de <div class='post-footer'> ) :

<script type="text/javascript" src="http://SetRating.com/SetRating.js"></script><script type="text/javascript">SetRatingWidget("hand")</script>

Espero que os haya gustado este gran truco y sigan visitandomi blog.

Gadget Multibanner con efecto de bordes redondeados

Luego de tanto pensar que nuevo truco publicar se me ocurrio darle un nuevo uso al codigo publicado por un amigo llamado el potro, de bordes redondeados en las imagenes y decidi aplicarlo al gadget multibanner donde ponemos publicidad,talvez asi tus lectores al ver este hermoso efecto se animen a hacer publicidad en tu web.

La vista previa del truco es la siguiente:

El truco se logra mediante CSS3 por lo que solo sera compatible con los navegadores modernos.

Para añadir este truco a tu blog pega antes de ]]></b:skin> el siguiente codigo:

.redondeado {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Ahora en un elemento HTML/JavaScript pega lo siguiente :

<div class="ads">
<a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a>
<a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a>
<a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a>
<a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a>
</div>

Ahora cuando vayas a poner los banners de publicidad solo cambia las condicionales que resalte en color azul por las tuyas y listo.

Espectaculares emoticones para los comentarios anidados

Los emoticones son muy conocidos en el mundo de la blogosfera y su uso se ha extendido exponencialmente que hoy en dia es muy dificil encontrar un blog que no los use, asi que atendiendo esa premisa hoy les presento unos espectaculares emoticones para los comentarios anidados de Blogger.

Para agregar estos emoticones a tu blog ve a a la Edición HTML de tu blog (con los artiluguos expandidos) y busca la siguiente linea:

</div>
<b:if cond='data:post.includeAd'>

Arriba de la anterior linea pega lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<div class='emoticons'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWVU-VlprzAx28PVV1mA90peMvunt5DX3__eez0qs7lPDYnzPr4lFnQ3O-01StCLBBngYCK75qanK3HbOSgGB2S_bTBO_kNjtCnAuXw8aJV1juMvcalsShsbTQkrR4ezdJjiCIit9ufQ/s36/01.gif' style='max-height:24px'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBTYeZKWFW0yZmKooKeW9UuznkjFjaMq-sWKuwEudSOdxGT6nhkY8Z_xjjCfJGwrp1MJw5MEDVWK0XPHLrARK_qv87ASZ0vE3d2EP-ZHTLIFlHGTxz3ojYqA50F69-fUXf0qP_PBV-Es/s36/02.gif' style='max-height:24px'/>:-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwkqO6E0ukNSSnIBezULaXBrvxAf1pKji2YVhGNr9EBveAc2wCZNljmtvpy0_3Bx7d_jrnXoicMBLcBftuFj0Y4HybLk96pCN7AFwOm6XVY_ae8YpKPhPHOi9x_CLpk9_fGkZyypDEdBI/s36/03.gif' style='max-height:24px'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFAzKMTx5Ek5tLHdo9IAc_CkWOeaUMqQ7acsoucy7eIR3M_sFFdMOH4kYmqbxfM6tfnQ9pOuo85d9NKC1Jk_0B-6sFGXyzeRXPFVLC6QYiN0oW-R91HuYWhvdzj5gwpUHPuYjMqAth1X0/s36/03a.gif' style='max-height:24px'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIY79HRkF5TBK3sccbriwK30jjPU4k0BufgXONJp_1LGdhHTas0eqsLSdC6Lt9376tAPcPckYqE3hOdvrcUC_xAHy0dPWs0tvHOjkW6RpYpPHdXJ_1C98dH6AAZTteDahhh0BtOXwVOQ/s36/04.gif' style='max-height:24px'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZm51JLZsS9tmO87zVfU54ZdRwuA6PWIi_3UvPf5LpviTSCgzfC3jD9imHXWWb5VuCPMgy__9Zw51Hsiw5NUS1r3SkRyTkQVPJ61qbpnxu2m_W8HgmVKTTQM39VSA8qXmx6ZCcsfLJmo/s36/05.gif' style='max-height:24px'/>:-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPQq8Zcpiagu_9OTgrjEWOMj_eN5gn-X0cAan5SeIT3_56Lr4VEakOVAqAU1_ApVSi0RaOubod0oe22gSGN9TykLUj9hmKAjTcidgT_Vtzx6THXrpa0PrZk1Gn_rx69CdD8BKYEEVSKo/s47/06.gif' style='max-height:24px'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipFc6JJbhXEKzClyABs2DePpydpTk96Ukr5L45ZY7DS926ILtEe1N0LYb-yr9tlf69ZU-sLoId1E3HvPCOFnXbnRcKZBDFtqbqATfk8WIW6KB3Iu6Ugxldb3B2WSZVR4GCZZWFJzUYqi4/s36/7.gif' style='max-height:24px'/>:d
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhadT70VWboVtjQLdUW6623h-UDYMicYIdX3DW82w7FKF3f7_XBbFRSurWiQJ1SkqZ4aduyQKTlTn6WdEDumqyCTwP_UVZYuh2TzHcUcvT_uvnFWblWvcxUHGsEH1GmzUCMIdFIO7hPm-w/s36/8.gif' style='max-height:24px'/>:-d
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEIODKRP1ZKMdo561txWUN_u0UT7YGJASJvzOXcLVbeM5HpyZj6mIupHWqLJmTuz67vGYxzNYawOgRj1q_1_IEBQMlwzNLAtlrxMD66HiVa328xuZhn03tHgAKI0yd5PqW5484HRMHEsk/s36/09.gif' style='max-height:24px'/>@-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwjn4ZXnavaa71HWTH5utc9Ci7P4I1Vjj4OhOB-azzrZAEaIExgejFiIrtXbJjuxtPsyet_b28hGF8PYeaQkZyxPe-Lw762WzY4JdeuLhny-DpJvF8Iz6NzMRM6Pvrl2EstoYkhBBC3bI/s36/10.gif' style='max-height:24px'/>:p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUCmZV1CAU7Dn3NilHAIlKiJX4fgh4cZYyrRP-h3PcJUvdXnCubVStlqOWbjY1CbIQRB-3XJM_DwY3P_or5ITsbCGCXQWQiL0YzWqj-PhD_5mo-ZXZS56D8gKdFpkTvj3LQFEIeitzcoU/s36/11.gif' style='max-height:24px'/>:o
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQD78Lqdr9UJThl9BplYbbZm5RU-pmLlR7Gp5H_J-gKZRNoNTNZX0okYQQvzu3Q66bQqjmSoDxCvaa2D0EqGQ6iLMfpO2gjn368EU_cUw7lcyGi75t14V9nsYevHF_SxXOFXnJu0r_aVo/s36/12.gif' style='max-height:24px'/>:&gt;)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSvxNRUaCRDRnR7Iz31c35ji84SGiUcyNmom6ha2zfg7vUyLcryoEno6KY3ZWtUUbBChnKoGzeMeTHQ4ARBPIZCWF4be059LxztQeMz50cTXHByCJ9xV4hkAOYPcYVRen606Wpov2UxNE/s36/13.gif' style='max-height:24px'/>(o)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYYzaYrgf696jEnazfQ4pdh_A55LhuAMuFCH6L65QafRAKfx7UZzCsc2LaOFVjSKTedJS767EDUf9YcM4GsSRDHOFS7mxZR0pKoC-x_wrxU27scw-kmoyN4CgTt3FMhC0WNBgqj-pG8sk/s36/14.gif' style='max-height:24px'/>[-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyccS9nz6huckVQCRS-5F5wUr5vzr1voMyUxKUjbumChR-Jh6XgPe9fvOXha2D4zcndKeUEEWfabGsuUZMpk5wytziEBJip2S6-JLudY-0lfKeVkkaYUGBq2PAPHxPjflUSrNzBRpOAWA/s36/15.gif' style='max-height:24px'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8pNoym2pd3t6TKuKsJZkDZrW7TYjcGHn4AHU1e2UTo28P961mKNyj-e11LPyuNOyMn91ylFiid7mT0N2AVE_G8KUx_aRRPdd6x0Hi4oVPVPnNLDnWIXaE7XhLI2Dy4EYtq7e6wc8wU80/s36/16.gif' style='max-height:24px'/>(p)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjit9_caj-qFC-H99goavK_xiYHqYEvoVJhIrldxwiT04Y-Sm9Arzg8iOPgNZfAVu8dl86pvJUzuerjL1uSAYlqbdlCxJzVIemCK-j85T6v2AuUyFimiAIcNwr7P7UN9y1DVbLSfkTi1tk/s36/17.gif' style='max-height:24px'/>:-s
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22HpD3xUdpOpcbioArLFdVSdNI5EC_7NFJeNBc45Z_IgXA3EJcziWmTw3-bFPaDJz5VcqWGIR_l7stsPW3EqbU0YWcrgl9ipiMxw9HqyJfmLYBaOcE3EO84Tsf5ffTkWX6KzAkTaY-vQ/s36/18.gif' style='max-height:24px'/>(m)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5x5zpguFXAP4KXEOK1YGWQyQegZpvfYqZDcNH_JB4aDJcpCInY5-y6D5Qbo7zt02Z6yp9rsy_d6_2vH0V5dxZKkv9iYYbxnmCxPzKnuLeNS74qSeVdya6eIRdXcpTEk9rDKeS3EJgylY/s36/19.gif' style='max-height:24px'/>8-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqtViUO-lk5RTV3FaPUSx7RcbtUo6HRdj4MeiEo0IHXaGDB0t6syZSTcgnw4son1XnzjjjhUnZQfclv4t_zaPA8TnK604u9QmzUfb1-G6lpRU-8PSu2YBNFVM8_UtFFA3fFyTqi2Ef-k/s36/20.gif' style='max-height:24px'/>:-t
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpDoAPOKWkgIPPDSvJQz3v7og0vmvN_9G0BpAeNPqO8QQemKwUF58EKjkeg3RlFSL1CJKsSw1TpyqnkvBzPOqvT9Ga8RchrJD3Aq-sE160MdJfuuGVVUNHWg54T6TkMpdzJXSpJZI8UB0/s36/21.gif' style='max-height:24px'/>:-b
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS37qibjEQA8moZuZZ60CiuuS1BajWf4b0-AJo4YwxBnqZaMYaa4PzE_LF5yixffwHZsqB94uz-I3DSu2BEg7Zof_c1hgV1xskMe_Rv7GtPNIovOxDI0W4n5iFA_6mvay1FxstnTFXXgw/s35/22.gif' style='max-height:24px'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMck_hqOp4YCkJ_xDvTe1CiEL8OuwVNV0G0FoXpaWHnXqiz72CdVsmiAlbsqkFuxhMGk8JhhaoSfnYZkvcroP-rG052-3_0-h56hyphenhyphen-hGd95UAC37R2MXH7UBI4h8-pcF-O2Vj8IZjOLvQ/s36/23.gif' style='max-height:24px'/>:-#
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8kY0rta24da61FYIEB_eY5tO1ddmz338akcHk2rHJPhA7vasLohU8zNNX2BBN7BXOIWO10SUXa3y-931sdUmSLus8i-a54P8tPmeozvs23AQ3glEMmq16k0WVDQFHdKTCLN8OmoqAw4E/s36/24.gif' style='max-height:24px'/>=p~
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitsWrJ5E4I3h-BeqoowJakMTFlxAIC-X_pRx8ou4sLaU5wVWqE07gASyrz6BRXD-S5V3VDxReKQ3as1G2n5-rysPZEfiZsbU3m68AqmQgH0krj4fEogcJQS5xV21Vnm3a6bH687mDaFcM/s36/25.gif' style='max-height:24px'/>:-$
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIX2AqKSNjNqvfHzaM0sH5Uwy_utC_aUFHiK-B6fFyEkjA8lEVBLr0miTaGGj4LAHfOKwGwVWrG9Qaei7YHYp2SpyrY6vLBTHhO8GQrnEPK5RiYl_Jiqj-vk9KXoQy7VM9OXE96bv-0Uo/s36/26.gif' style='max-height:24px'/>(b)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0bGhoWzBAYlUae40Imw4ns83fH7Fa_1Ig8qOV0uort4QZzfA7T4VX1O5OGnnaWmN9WA4ZOJ3NyVMjXVogSZRQmTG51J843Z34aAcEyG934oRS1RjMuqrVxNfFEOAcXNQP8EJWB0dNTz0/s36/27.gif' style='max-height:24px'/>(f)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWstuokRFA4KuXt9VkeWwnzbtJILwiN_WhQ_N6qK3rlPWUa5MB_GLej39BmdMqTEm9j-_8qdkfWYEBhmtkRp8t1YuoFsGSzIcoySryjrKf5F0JoYQcT_JvlJISmwm9su78FZJFqodGruA/s36/28.gif' style='max-height:24px'/>x-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkPJC8BFFlfqbm1O1am2snth9kowsXdqQiO9Xm9bJteT5D6wIKprnYAo91MwaotgnLAmuBAY1IfhOj6wV96vRYo6VJ4HKVKIWNqQCjbPQR7Vur2piiFl-W0TwvBKuxuKFLX3DSOBGyYLc/s36/29.gif' style='max-height:24px'/>(k)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYQWUe-IZB7UEt9P4MoCZ1UtnJ9psCPDBLGj720Nckup4kQl0KvnhBlSb69ZcKyvbrIEFvm1GvwQzNfTrKRIVHqYq1xZPu095T9xoZsNf_2SojIYSEBAtrcyZ9YTuzmcyxnEda-HYQ-w/s36/30.gif' style='max-height:24px'/>(h)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSPNBymprx9GdF-PH08WL_UaiPZCyIIx8tdrnDzuID7WOB6bn_rHkYmtsuvgB3yEj6CJRwAYP3fRFt17tsdxO6xaMx7nfdEAOZYbm11KhIwnItZKQRMFl2VBzc7svoheGcac6E7GDidA/s36/31.gif' style='max-height:24px'/>(c)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYyWndC-aqebNBr8iexTItYfk6ludbSPWpbaGJErVyGJKu-xmk8CxquYJoBJ5WL7W1SvK2JoFUtk6wGgm_EnBr1tmG4k_6di74oICBz9zBwZz_q3FSN-w0n1G0yaEQsIqjEdmWb9TwtcI/s36/32.gif' style='max-height:24px'/>cheer
</div>
</b:if>

Ahora busca en tu blog la etiqueta </body> y arriba de ella agrega lo siguiente:

 <script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin: 3px 0px 5px;border:1px solid #DDD;max-width:98%;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<p style='margin: 5px 0px'><iframe width='480' height='355' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<p style='margin: 5px 0px'><iframe width='480' height='355' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe></p>");
theText = theText.replace(/:\)\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwkqO6E0ukNSSnIBezULaXBrvxAf1pKji2YVhGNr9EBveAc2wCZNljmtvpy0_3Bx7d_jrnXoicMBLcBftuFj0Y4HybLk96pCN7AFwOm6XVY_ae8YpKPhPHOi9x_CLpk9_fGkZyypDEdBI/s36/03.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPQq8Zcpiagu_9OTgrjEWOMj_eN5gn-X0cAan5SeIT3_56Lr4VEakOVAqAU1_ApVSi0RaOubod0oe22gSGN9TykLUj9hmKAjTcidgT_Vtzx6THXrpa0PrZk1Gn_rx69CdD8BKYEEVSKo/s47/06.gif'/>");
theText = theText.replace(/:\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWVU-VlprzAx28PVV1mA90peMvunt5DX3__eez0qs7lPDYnzPr4lFnQ3O-01StCLBBngYCK75qanK3HbOSgGB2S_bTBO_kNjtCnAuXw8aJV1juMvcalsShsbTQkrR4ezdJjiCIit9ufQ/s36/01.gif'/>");
theText = theText.replace(/:cool\:/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBTYeZKWFW0yZmKooKeW9UuznkjFjaMq-sWKuwEudSOdxGT6nhkY8Z_xjjCfJGwrp1MJw5MEDVWK0XPHLrARK_qv87ASZ0vE3d2EP-ZHTLIFlHGTxz3ojYqA50F69-fUXf0qP_PBV-Es/s36/02.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFAzKMTx5Ek5tLHdo9IAc_CkWOeaUMqQ7acsoucy7eIR3M_sFFdMOH4kYmqbxfM6tfnQ9pOuo85d9NKC1Jk_0B-6sFGXyzeRXPFVLC6QYiN0oW-R91HuYWhvdzj5gwpUHPuYjMqAth1X0/s36/03a.gif'/>");
theText = theText.replace(/:\(/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIY79HRkF5TBK3sccbriwK30jjPU4k0BufgXONJp_1LGdhHTas0eqsLSdC6Lt9376tAPcPckYqE3hOdvrcUC_xAHy0dPWs0tvHOjkW6RpYpPHdXJ_1C98dH6AAZTteDahhh0BtOXwVOQ/s36/04.gif'/>");
theText = theText.replace(/:-\(/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZm51JLZsS9tmO87zVfU54ZdRwuA6PWIi_3UvPf5LpviTSCgzfC3jD9imHXWWb5VuCPMgy__9Zw51Hsiw5NUS1r3SkRyTkQVPJ61qbpnxu2m_W8HgmVKTTQM39VSA8qXmx6ZCcsfLJmo/s36/05.gif'/>");
theText = theText.replace(/:d/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipFc6JJbhXEKzClyABs2DePpydpTk96Ukr5L45ZY7DS926ILtEe1N0LYb-yr9tlf69ZU-sLoId1E3HvPCOFnXbnRcKZBDFtqbqATfk8WIW6KB3Iu6Ugxldb3B2WSZVR4GCZZWFJzUYqi4/s36/7.gif'/>");
theText = theText.replace(/:-d/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhadT70VWboVtjQLdUW6623h-UDYMicYIdX3DW82w7FKF3f7_XBbFRSurWiQJ1SkqZ4aduyQKTlTn6WdEDumqyCTwP_UVZYuh2TzHcUcvT_uvnFWblWvcxUHGsEH1GmzUCMIdFIO7hPm-w/s36/8.gif'/>");
theText = theText.replace(/@-\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEIODKRP1ZKMdo561txWUN_u0UT7YGJASJvzOXcLVbeM5HpyZj6mIupHWqLJmTuz67vGYxzNYawOgRj1q_1_IEBQMlwzNLAtlrxMD66HiVa328xuZhn03tHgAKI0yd5PqW5484HRMHEsk/s36/09.gif'/>");
theText = theText.replace(/:p/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwjn4ZXnavaa71HWTH5utc9Ci7P4I1Vjj4OhOB-azzrZAEaIExgejFiIrtXbJjuxtPsyet_b28hGF8PYeaQkZyxPe-Lw762WzY4JdeuLhny-DpJvF8Iz6NzMRM6Pvrl2EstoYkhBBC3bI/s36/10.gif'/>");
theText = theText.replace(/:o/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUCmZV1CAU7Dn3NilHAIlKiJX4fgh4cZYyrRP-h3PcJUvdXnCubVStlqOWbjY1CbIQRB-3XJM_DwY3P_or5ITsbCGCXQWQiL0YzWqj-PhD_5mo-ZXZS56D8gKdFpkTvj3LQFEIeitzcoU/s36/11.gif'/>");
theText = theText.replace(/:&gt;\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQD78Lqdr9UJThl9BplYbbZm5RU-pmLlR7Gp5H_J-gKZRNoNTNZX0okYQQvzu3Q66bQqjmSoDxCvaa2D0EqGQ6iLMfpO2gjn368EU_cUw7lcyGi75t14V9nsYevHF_SxXOFXnJu0r_aVo/s36/12.gif'/>");
theText = theText.replace(/\(o\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSvxNRUaCRDRnR7Iz31c35ji84SGiUcyNmom6ha2zfg7vUyLcryoEno6KY3ZWtUUbBChnKoGzeMeTHQ4ARBPIZCWF4be059LxztQeMz50cTXHByCJ9xV4hkAOYPcYVRen606Wpov2UxNE/s36/13.gif'/>");
theText = theText.replace(/\[-\(/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYYzaYrgf696jEnazfQ4pdh_A55LhuAMuFCH6L65QafRAKfx7UZzCsc2LaOFVjSKTedJS767EDUf9YcM4GsSRDHOFS7mxZR0pKoC-x_wrxU27scw-kmoyN4CgTt3FMhC0WNBgqj-pG8sk/s36/14.gif'/>");
theText = theText.replace(/:-\?/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyccS9nz6huckVQCRS-5F5wUr5vzr1voMyUxKUjbumChR-Jh6XgPe9fvOXha2D4zcndKeUEEWfabGsuUZMpk5wytziEBJip2S6-JLudY-0lfKeVkkaYUGBq2PAPHxPjflUSrNzBRpOAWA/s36/15.gif'/>");
theText = theText.replace(/\(p\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8pNoym2pd3t6TKuKsJZkDZrW7TYjcGHn4AHU1e2UTo28P961mKNyj-e11LPyuNOyMn91ylFiid7mT0N2AVE_G8KUx_aRRPdd6x0Hi4oVPVPnNLDnWIXaE7XhLI2Dy4EYtq7e6wc8wU80/s36/16.gif'/>");
theText = theText.replace(/:-s/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjit9_caj-qFC-H99goavK_xiYHqYEvoVJhIrldxwiT04Y-Sm9Arzg8iOPgNZfAVu8dl86pvJUzuerjL1uSAYlqbdlCxJzVIemCK-j85T6v2AuUyFimiAIcNwr7P7UN9y1DVbLSfkTi1tk/s36/17.gif'/>");
theText = theText.replace(/\(m\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22HpD3xUdpOpcbioArLFdVSdNI5EC_7NFJeNBc45Z_IgXA3EJcziWmTw3-bFPaDJz5VcqWGIR_l7stsPW3EqbU0YWcrgl9ipiMxw9HqyJfmLYBaOcE3EO84Tsf5ffTkWX6KzAkTaY-vQ/s36/18.gif'/>");
theText = theText.replace(/8-\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5x5zpguFXAP4KXEOK1YGWQyQegZpvfYqZDcNH_JB4aDJcpCInY5-y6D5Qbo7zt02Z6yp9rsy_d6_2vH0V5dxZKkv9iYYbxnmCxPzKnuLeNS74qSeVdya6eIRdXcpTEk9rDKeS3EJgylY/s36/19.gif'/>");
theText = theText.replace(/:-t/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqtViUO-lk5RTV3FaPUSx7RcbtUo6HRdj4MeiEo0IHXaGDB0t6syZSTcgnw4son1XnzjjjhUnZQfclv4t_zaPA8TnK604u9QmzUfb1-G6lpRU-8PSu2YBNFVM8_UtFFA3fFyTqi2Ef-k/s36/20.gif'/>");
theText = theText.replace(/:-b/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpDoAPOKWkgIPPDSvJQz3v7og0vmvN_9G0BpAeNPqO8QQemKwUF58EKjkeg3RlFSL1CJKsSw1TpyqnkvBzPOqvT9Ga8RchrJD3Aq-sE160MdJfuuGVVUNHWg54T6TkMpdzJXSpJZI8UB0/s36/21.gif'/>");
theText = theText.replace(/b-\(/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS37qibjEQA8moZuZZ60CiuuS1BajWf4b0-AJo4YwxBnqZaMYaa4PzE_LF5yixffwHZsqB94uz-I3DSu2BEg7Zof_c1hgV1xskMe_Rv7GtPNIovOxDI0W4n5iFA_6mvay1FxstnTFXXgw/s35/22.gif'/>");
theText = theText.replace(/:-#/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMck_hqOp4YCkJ_xDvTe1CiEL8OuwVNV0G0FoXpaWHnXqiz72CdVsmiAlbsqkFuxhMGk8JhhaoSfnYZkvcroP-rG052-3_0-h56hyphenhyphen-hGd95UAC37R2MXH7UBI4h8-pcF-O2Vj8IZjOLvQ/s36/23.gif'/>");
theText = theText.replace(/=p~/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8kY0rta24da61FYIEB_eY5tO1ddmz338akcHk2rHJPhA7vasLohU8zNNX2BBN7BXOIWO10SUXa3y-931sdUmSLus8i-a54P8tPmeozvs23AQ3glEMmq16k0WVDQFHdKTCLN8OmoqAw4E/s36/24.gif'/>");
theText = theText.replace(/:-\$/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitsWrJ5E4I3h-BeqoowJakMTFlxAIC-X_pRx8ou4sLaU5wVWqE07gASyrz6BRXD-S5V3VDxReKQ3as1G2n5-rysPZEfiZsbU3m68AqmQgH0krj4fEogcJQS5xV21Vnm3a6bH687mDaFcM/s36/25.gif'/>");
theText = theText.replace(/\(b\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIX2AqKSNjNqvfHzaM0sH5Uwy_utC_aUFHiK-B6fFyEkjA8lEVBLr0miTaGGj4LAHfOKwGwVWrG9Qaei7YHYp2SpyrY6vLBTHhO8GQrnEPK5RiYl_Jiqj-vk9KXoQy7VM9OXE96bv-0Uo/s36/26.gif'/>");
theText = theText.replace(/\(f\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0bGhoWzBAYlUae40Imw4ns83fH7Fa_1Ig8qOV0uort4QZzfA7T4VX1O5OGnnaWmN9WA4ZOJ3NyVMjXVogSZRQmTG51J843Z34aAcEyG934oRS1RjMuqrVxNfFEOAcXNQP8EJWB0dNTz0/s36/27.gif'/>");
theText = theText.replace(/x-\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWstuokRFA4KuXt9VkeWwnzbtJILwiN_WhQ_N6qK3rlPWUa5MB_GLej39BmdMqTEm9j-_8qdkfWYEBhmtkRp8t1YuoFsGSzIcoySryjrKf5F0JoYQcT_JvlJISmwm9su78FZJFqodGruA/s36/28.gif'/>");
theText = theText.replace(/\(k\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkPJC8BFFlfqbm1O1am2snth9kowsXdqQiO9Xm9bJteT5D6wIKprnYAo91MwaotgnLAmuBAY1IfhOj6wV96vRYo6VJ4HKVKIWNqQCjbPQR7Vur2piiFl-W0TwvBKuxuKFLX3DSOBGyYLc/s36/29.gif'/>");
theText = theText.replace(/\(h\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYQWUe-IZB7UEt9P4MoCZ1UtnJ9psCPDBLGj720Nckup4kQl0KvnhBlSb69ZcKyvbrIEFvm1GvwQzNfTrKRIVHqYq1xZPu095T9xoZsNf_2SojIYSEBAtrcyZ9YTuzmcyxnEda-HYQ-w/s36/30.gif'/>");
theText = theText.replace(/\(c\)/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSPNBymprx9GdF-PH08WL_UaiPZCyIIx8tdrnDzuID7WOB6bn_rHkYmtsuvgB3yEj6CJRwAYP3fRFt17tsdxO6xaMx7nfdEAOZYbm11KhIwnItZKQRMFl2VBzc7svoheGcac6E7GDidA/s36/31.gif'/>");
theText = theText.replace(/cheer/gi, "<img style='max-height:24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYyWndC-aqebNBr8iexTItYfk6ludbSPWpbaGJErVyGJKu-xmk8CxquYJoBJ5WL7W1SvK2JoFUtk6wGgm_EnBr1tmG4k_6di74oICBz9zBwZz_q3FSN-w0n1G0yaEQsIqjEdmWb9TwtcI/s36/32.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Solo queda guardar los cambios y listo.

Consideraciones
- Los emoticones solo funcionan en los comentarios anidados.
-Los emoticones fueron sacados de la plantilla Metro Simple.
-Para ver el truco funcionando lo puedes hacer en el siguiente blog.

añadir una preciosa caja de sucripciones a tu blog

 

Si te gusta ofrecer a tus lectores la posibilidad de suscribirse al contenido que publicas o invitarles a seguirte en Twitter, esta es sin duda tu mejor herramienta.

Construí una pequeña cajita con los colores y las tonalidades típicas de blogger -lo que la convierte en un artilugio muy familiar- y con un bonito efecto al pasar el cursor por encima de cada enlace.

Es una alternativa a los botones individuales que solemos incluir en nuestra barra lateral para ofrecer las mismas ventajas a todo visitante y por suerte, con una rápida instalación.

El resultado será el mismo que aparece en la imagen de la izquierda. ¿Te animas? ¡Empecemos!

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade esta línea encima (antes):

<link href="https://sites.google.com/site/scriptsbalcon/b/blcajCSS.css" rel="stylesheet" type="text/css"/>

Guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior:

<div id="blCajaMeta">
<div id="blCajaMetaContenid">
<div class="blcaja1"><a href="URL FEED">Suscríbete a mi feed</a></div>
<div style="padding:2px;border-bottom:1px dashed #E1D4C0;"></div>
<div class="blcaja2"><a href="URL FEED EMAIL">Suscríbete vía email</a></div>
<div style="padding:2px;border-bottom:1px dashed #E1D4C0;"></div>
<div class="blcaja3"><a href="URL TWITTER">Sígueme en Twitter</a></div>
</div>
</div>
<style>#blCajaMeta {width:220px;}</style>

Ahora tan solo debes reemplazar URL FEED, URL FEED EMAIL y URL TWITTER por la dirección del feed de tu blog, la dirección de la suscripción por email o correo electrónico (aconsejo utilizar Feedburner) y la dirección de tu perfil en Twitter -respectivamente-.

Las frases del código (resaltadas en color grisáceo) pueden editarse a gusto propio.

La cifra en color rojo (220) indica la anchura de la caja. Auméntala o disminúyela para ajustar el marco a tu barra lateral.



Si es así, haz uso de esta otra línea en el primer paso (en lugar de la indicada):

<link href="https://sites.google.com/site/scriptsbalcon/b/blcajCSSfcbk.css" rel="stylesheet" type="text/css"/>

Y añade esto justo antes de los cierres </div> y </div> del segundo código:

<div style="padding:2px;border-top:1px dashed #E1D4C0;" class="blcaja4"><a href="URL FACEBOOK">Seguir en Facebook</a></div>

Sustituye URL FACEBOOK por la dirección de tu perfil o página en dicha red social y edita la frase a mostrar si lo consideras necesario.

¡Guarda el gadget y habrás terminado!

efecto desvanecer y aparecer en imagenes al pasar el cursor

Con anterioridad vimos cómo darle un efecto de opacidad a las imágenes al pasar el cursor, para ello incluíamos dentro del código de la imagen los estilos necesarios para generar la opacidad. El efecto descavenecer o aparecer que se explica en esta entrada no es muy diferente al ya comentado pero posee una nueva característica. Al pasar el cursor sobre la imagen, ésta se desvanece o aclara suavemente.

A continuación puede verse el truco en funcionamiento:

   
 


El resultado presenta dos variantes del efecto. La primera tira de imágenes aparece con un grado de opacidad de 0.5 que produce la aparición de la imagen al pasar el cursor; la segunda tira, por el contrario, no presenta opacidad sino que se las imágenes se desvanecen al pasar el cursor.

Diseño>Edición de HTML>expandimos artilugios

Localizamos la etiqueta </head> y justo antes insertamos uno de los siguientes bloques, dependiendo de la variante escogida y la presentación deseada:

Para el efecto aparecer al pasar el cursor en todas las imágenes del blog:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en todas las imágenes del blog:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Para el efecto aparecer al pasar el cursor en las imágenes escogidas:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImagjtef').fadeTo('slow', 0.5);
$('.blImagjtef').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en las imágenes escogidas:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImaggjtef').fadeTo('slow', 1.0);
$('.blImaggjtef').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Los dos últimos códigos, al contrario que los dos primeros (que al guardar la plantilla aplicarán el efecto a todas las imágenes), se aplican de forma manual, utilizando las clases resaltadas en color rojo (respectivamente), dentro del código de la imagen:

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

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

En donde dice URL DE LA IMAGEN incluiremos la dirección de la fotografía o imagen.

El truco usa jQuery por lo tanto, si hemos instalado Scriptaculous, Prototype o Mootools seguramente no pueda utilizarse.

Con esto habremos terminado la instalación de este elegante efecto.

descargar tu plantilla

¿Te gusta mucho tu plantilla y tienes miedo a perderla si te equivocas en algo? ¿As aplicado trucos muy buenos que no quieres perder?

Con estos pasos te voy a enseñar a descargar tu plantilla, y , de esta forma tenerla guardada en tus documentos para que si alguna vez se te estropea, puedas volverla a poner...

Lo primero de todo, debes iniciar sesión en Blogger.

Estarás en el escritorio, haz click en Diseño.

Debajo de la pestaña de diseño, verás que hay sub-pestañas. Haz clic en la sub-pestaña que dice Edición de HTML.

Seguidamente verás esto...

Haz click en Descargar plantilla completa y aparecerá esta ventana:



Para terminar selecciona la casilla "Guardar archivo" y haz clic en el botón "Aceptar" para finalizar y tener la copia de seguridad en tus documentos.

Tutorial e imágenes por aranxa feliz

añadir cuatro columnas bajo la cabecera

En ocasiones me habían preguntado si había forma de añadir columnas encima de las entradas para disponer de más espacio en la sidebar (barra lateral).

Trás experimentar con las plantillas de blogger, dí con la solución de cómo añadir cuatro columnas encima de las entradas.

> Es un truco sencillo pero te recomiendo que descarges la plantilla para tener una copia de seguridad por si acaso. Si no sabes cómo descargarla, aquí te lo enseño.

Una vez tengas la copia de seguridad, podrás empezar con el truco.

Diseño>edición HTML>expandimos artilugios

1) Busca estos bloques en el CSS de tu plantilla (están separados) y cambia los valores como te lo indico en rojo:

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 640px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#footer {
width: 240px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

2) Una vez tengas las medidas correctas busca la etiqueta ]]></b:skin> y encima pegale estas definiciones:

#columna-bloque{
width: 940px;
clear: both;
margin: auto;
height: 200px;
margin-bottom: 10px;
line-height: 1.4em;
}

#columna-bloque h2{
border: 1px solid #b2b2b2;
background: #ededed;
margin-top:-1px;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
color: #9e9e9e;
font-size: 12px;
background: trasparent;
margin: .5 em 0 .5 em;
padding: 5px;
}

.columna{
padding: 5px;
}

3) Por último busca esta línea:

<div id='main-wrapper'>

Y pégale esto encima:

<div id='columna-bloque'>

<div id='columna1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='columna' id='columna1' preferred='yes' style='float:left;'>
</b:section>
</div>

<div id='columna2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='columna' id='columna2' preferred='yes' style='float:right;'>
</b:section>
</div>

<div id='columna3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='columna' id='columna3' preferred='yes' style='float:right;'>
</b:section>
</div>

<div id='columna4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='columna' id='columna4' preferred='yes' style='float:right;'>
</b:section>
</div>

<div style='clear:both;'/>
</div>

Haz vista previa para ver si todo va bien y guarda cambios.

Ahora podrás añadir artilugios bajo la cabecera de tu blog. Aquí te dejo unas imágenes para que veas cómo te quedará...

Iconos de Suscripción con efecto de bordes redondeados

Haciendo uso nuevamente de la propiedad img class="redondeado". tiempo atras hoy he creado unos iconos de suscripciones con bordes redondeados que al pasar el cursor sobre ellos despliegan un bello efecto.

A continuacion una imagen de como funciona el truco.

 

 

Para agregar este truco a tu blog pega antes de ]]></b:skin> el siguiente codigo:

 .redondeado {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Ahora en un elemento HTML/JavaScript pega lo siguiente :

 <div class="ads">
<a href="URL DE TU FACEBOOK" target="_blank" title="¡Facebook!"><img class="redondeado" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOrLT4Jk-BtcPqOyZ6Mjoe6J8MtBq1lSxNDiYjlwQC-YoLpADJLdRuSbHRKOqs2502WNWSNB6TKmHMebAnjxS76Vp_RW7uuEv_WvjQuxx_RoZE7jchCnsIUK8Lr-P8QCI0MHlrOl_OLLU/s128/Facebook.png" /></a>
<a href="URL DE TU TWITTER" target="_blank" title="¡Twitter!"><img class="redondeado" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEindO7p1f3pijIO4PvagPg7FZqmx_fM_cR1wBWXnUT8dueWKYj-XXJJK8f9zufCu703aM2E0cz973BsV-or7eDJjV9Hb4rv5y2Dzdv5GxfVcbbbvwN0HxKA0pt1EnprkCcIikyQE9nQgl0/s128/Twitter.png" /></a>
<a href="URL DE TU YOUTUBE" target="_blank" title="¡YouTube!"><img class="redondeado" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8MsO2EZ_py3DA45CB2WlKW5Js7D9PMWAfMUcCZ93-xvHZkTBOSpTuSaxRNSSytm0c0FPrHLUPZxaYr7KhPRlajGyljWDAeQe53Lw7jG8G82dE-MfVMRTDR8bEULI3TLBd0kWbu2b6RzU/s128/Youtube.png" /></a>
<a href="URL DE TU RSS" target="_blank" title="¡RSS!"><img class="redondeado" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV49eIHlmuSn4K_zkSUsG15127FG0EwVr8lXZSymxnspuOfswE3NY-U3QBjdz8y0NYxjW08LGCqZkh3pqqCjcMPalL4k_9NL-Rs_wSc8Qo_20T4Eaj12Jek61KZ502TyaRkI65gLS_Jkc/s128/RSS.png" /></a>
</div>

Para finalizar solo debes cambiar lo que resalte en color azul por la URL de tus cuentas y listo.

espero que les guste..

Espectaculares iconos triangulares de suscripciones

En esta oportunidad les quiero compartir un hermoso pack de iconos triangulares que me han gustado mucho debido a su simplicidad y elegancia.

El pack viene con los siguientes iconos:




     Para añadir este espectacular pack de iconos en tu blog pega en un elemento HTML/Javascript lo siguiente:

 <center><a href="URL DE TU FEED" target="_blank" title="Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD96_BO0xCFZrimMjxWEhT_bhrc4A3nVcoj65bL5bNv5yGfH9hkmaPHBgj8qqt_0Vp8Zq_jPrIIPP94rseTyALqJw4z7WG4Wz_VK72WZexRgxIRr8Dhr9i0q2iuekPH7Jg-kmgFKtQFR-V/s1600/RSS_78x75.png" style="margin-right: 2px;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE DE TU BLOG&amp;loc=en_ES" rel="nofollow" target="_blank" title="Sigueme Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3XAhsM6zzWlyecYcmPH8yZiRcFLRwx7bPTjSp20HXsDDgi9sr0zM9wv2A433Os_OfFAGr1ZqRPHKpUDncsyIEtJoCe4aYinawWwGaWUqncWos1CF6clPFCa5FawwprVdH9PxsQCHqLlTS/s1600/Email_78x75.png" style="margin-right: 2px;" /></a><a href="URL DE TU PAGINA EN FACEBOOK" rel="nofollow" target="_blank" title="Sigueme en Facebook"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvTlx9vAy2zkOTwqmOyyNf-Imtc1Zq4VrggG2lKbh9EGKcuUfhzYSXAmSE4aruV8e-_cbqGq5IrTvoZEJSiZGXXAvvYzBaKDDhyphenhyphenSgX5hEEDTbcTRZb3dUEW73de15Y3t1lf0NwvLGMIan2/s1600/Facebook_78x75.png" style="margin-right: 2px;" /></a><a href="URL DE TU TWITER" rel="nofollow" target="_blank" title="Sigueme en Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_ThnlADAfE562nIdUKSAEibnAhIxOAZrJsANS4zpkMLBXazVgeYvwbq6uBGiWc9pZgQA_fqY3GhiGFOz1OiKT4VJMruH9-HJ5cB86Zu4pfC0VYX47JnyRN3e3dDHvLiDhxtE4ltflwjZ/s1600/Twitter_78x75.png" style="margin-right: 2px;" /></a><a href="URL DE TU GOOGLE+" rel="nofollow" target="_blank" title="Sigueme en Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibOkooP2rmC3D5Ly2hSWEHPizlnRMsX2c61G1TAaIM_VuFKswkRS2g0RbK3Gv55BwpuZRRxrfSJ9oWdZIh-j5rki9VtYIQEvk-zNTt0iv0hqnDZtSubzw4SUQIeTrS7aoMRoy2O5Srte1d/s1600/Google+_78x75.png" style="margin-right: 2px;" /></a><a href="URL PINTEREST" rel="nofollow" target="_blank" title="Pinterest"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4XpkC27ypx97IzWe7nVfNW-6xi2mB19fTYu32dzz_GwGdfh-WHhdutJe8ap7nzfgGUkL4nJm_pQej8xBvYhTXHLsQaf3XGVnhKhqGFTKLhfGanQS3dNTE6kSFNUgS681OIgVoyHSi6OZV/s1600/Pinterest_78x75.png" style="margin-right: 2px;" /></a><a href="URL DE TU CANAL DE YOUTUBE" rel="nofollow" target="_blank" title="You Tube"><img alt="YouTube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXHrlKMXm86k70TIVz4-d08UPv3AC8JJpj4XeMnHVdCZtXZgcoRrUPDJrCWwtvsnkpZI0Ff7p09mjQpkAGH_w_tSut6v_h948QJGPnK4BjI2eaikVpXVI_B-WazJSjyfbj18neWg-dbjzD/s320/YouTube_78x75.png" style="margin-right: 2px;" /></a></center>

Ahora reemplaza lo que esta en color azul por lo que se indica en cada caso y guardas los cambios.

Espero que haya sido de utilidad este pack de iconos y los usen,y sigan visitando el blog.    saludoss.....