Con este sencillísimo truco se podrá visualizar un Top 10 de las personas que más visitan un blog. Es interesante porque brinda dinamismo a la página y es una buena herramienta que verifica que la visitan. Además, puede animar a los visitantes a regresar a la web en otra visita futura.

Foto cortesía de Dheeyreck

  • Ubicación: gadget java (añadiendo uno propio).
  • Proceso: 

>> El script de los visitantes se aloja en un gadget java, pero añadiendo uno propio. En la imagen que sigue y que ejemplifica la ubicación está marcado en un círculo rojo.


>> Se abrirá una ventanita con una franja en blanco, lugar idóneo para colocar el susodicho script:

http://sites.google.com/site/silviafilologa/home/Rankingdevisitantes.xml

El gadget es completamente configurable en medidas de altura. Poner el título que se desee y ¡listo!, a lucir el Top 10 de visitantes.


>> Visto en Mil Trucos Blogger.

  • Saber HTML: Si estas pensado en crear blog sin saber al menos el lenguaje básico en que se basan los sitios en internet te hará las cosas más difíciles. Muchos creen que no necesitan saber lenguajes de programación para crear blogs ya que pueden instalar WordPress con un clic, esto no es cierto. Los software como WordPress y otros administradores de contenido se basan en lenguajes de programación, asi que para mejorar y facilitarte el trabajo debes empezar a aprender HTML y CSS.
  • Saber inglés: Saber inglés es algo básico y necesario para entrar en el blogging. Los lenguajes de programación están en inglés, comandos, softwares y aprender programación es un principio básico para aprender a bloggear.
  • Saber compartir: Ser social y saber compartir son también características de un buen Blogger. Si no tienes capacidad para compartir lo que sabes no podrás transmitir en tus sitios.
  • Conocer otros lenguajes: Aprender PHP, Javascript, SQL y otros lenguajes te ayudarán a desarrollarte en este mundo.
  • Investigar: No es lo mismo publicar algo sobre lo que ya todo el  mundo sabe a crear tu propia opinión sobre el mismo tema del que todos hablan, hacer criterios, analizar y ofrecer algo distinto y relevante. Siempre que vayas a escribir articulos sobre una temática, asegurate de conocer muchos detalles interesantes que pueden llamar la atención de tus lectores.
Una manera sencilla y eficaz de visualizar los últimos comentarios de un blog, con avatar incluido. Tan solo hace falta un script.

TIPO 1 (avatares sin redondear)

  • Ubicación: gadget java.
  • Proceso:

Copiar el siguiente script (en cita) y modificar las variables que se indican justo a continuación. Para buscarlas hacer uso del buscador interno pulsando a la vez Ctrl+F:

VARIABLES

numRecentComments: cantidad de comentarios que se desea mostrar.
numPerPost: comentarios por post.
maxCommentChars: cantidad de caracteres a visualizar en el comentario.
maxPostTitleChars: título de la entrada.
txtWrote: texto de los enlaces para comentar (se puede dejar en blanco).
txtMore: Texto del pie que lleve al comentario en la página (en la foto es "Sigue").
txtToolTip: texto que se muestra cuando se pasa el cursor sobre los comentarios.
txtAnonymous: nombre de un usuario anónimo.
getTitles: buscar los títulos del feed de entradas; si los títulos falsos, se generan a partir de url.
trueAvatars: utiliza avatares de Blogger (imágenes de perfil).
urlMyAvatar: url de la imagen o avatar de perfil.
urlMyProfile: url del perfil.
urlAnoAvatar: avatar anónimo.

SCRIPT
<style type="text/css">
.recent-comment { margin-bottom:10px; padding-left: 24px; }
.recent-comment-admin { background-color: #F4F4F4; }
.recent-comment-ico { margin-left:-20px;margin-top:4px;float:left;margin-right:3px;}
.recent-comment-header {}
.recent-comment-body { padding-right: 4px; font-size: 95%;}
.recent-comment-footer { font-size: 85%; }
</style>
<script type="text/javascript">
//
// Recent Comments blogger gadget by MS-potilas 2011, using feed avatars
// see http://yabtb.blogspot.com/2011/12/son-of-better-recent-comments-gadget.html
//
// CONFIG:
var numRecentComments = 5;
var numPerPost = 2; // max comments per post (to try) or 0
var maxCommentChars = 90;
var maxPostTitleChars = 0; // if 0, use full post title

var txtWrote = 'wrote:';

var txtMore = 'Continue >>';
var txtTooltip = '[user] on &quot;[title]&quot; - [date MM/dd/yyyy hh:mm]';
var txtAnonymous = ''; // empty, or Anonymous user name localized
// Variables [xxx] in texts:
// supports [title], [user], [date], [time], [datetime], [date format]
// format supports: yyyy=long year, yy=short year, MM=month(01-12), dd=monthday, hh=hour, mm=min, ss=sec

var getTitles = true; // false faster

var trueAvatars = true; // false faster
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
var urlMyProfile = ''; // set if you have no profile gadget on page
//
var cropAvatar = true;
var sizeAvatar = 16;
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+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 maxResultsPosts = ""; // or for example "&max-results=100"
var maxResultsComments = ""; // or for example "&max-results=300"
// CONFIG END
var urlToTitle = {};
function replaceVars(text, user, title, date) {
text = text.replace('[user]', user);
text = text.replace('[date]', date.toLocaleDateString());
text = text.replace('[datetime]', date.toLocaleString());
text = text.replace('[time]', date.toLocaleTimeString());
text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
var i = text.indexOf("[date ");
if(i > -1) {
var format = /\[date\s+(.+?)\]/.exec(text)[1];
if(format != '') {
var txtDate = format.replace(/yyyy/i, date.getFullYear());
txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
text = text.replace(/\[date\s+(.+?)\]/, txtDate)
}
}
return text;
}
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;
}
}
function getPostUrlsForComments(json) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
urlToTitle[href] = entry.title.$t;
}
}
function showRecentComments(json) {
var postHandled = {};
var j = 0;
if(numPerPost) {
while(numPerPost < numRecentComments) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
j++;
}
}
if(j >= numRecentComments)
break;
numPerPost++;
j = 0;
postHandled = {};
}
if(numRecentComments == numPerPost)
numPerPost = 0;
}
postHandled = {};
j = 0;
for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
j++;
var href='';
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href=='') {j--; continue; }
var hrefPost = href.split("?")[0];
var comment = "";
if("content" in entry) comment = entry.content.$t;
else comment = entry.summary.$t;
comment = comment.replace(/<br[^>]*>/ig, " ");
comment = comment.replace(/<\S[^>]*>/g, "");
var postTitle="-";
if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
else {
if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");
postTitle = postTitle.replace(/-/g," ");
postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
}
if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
postTitle = postTitle.substring(0, maxPostTitleChars);
var indexBreak = postTitle.lastIndexOf(" ");
postTitle = postTitle.substring(0, indexBreak) + "...";
}

var authorName = entry.author[0].name.$t;

var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;

var avaimg = urlAnoAvatar;

var bloggerprofile = "http://www.blogger.com/profile/";
if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = entry.author[0].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+"/");
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
var clsAdmin = "";
if(urlMyProfile != "" && authorUri == urlMyProfile)
clsAdmin = " recent-comment-admin";
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]);

var txtHeader = txtWrote;

if(txtWrote.indexOf('[')==-1)
txtHeader = authorName + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);

if(!/#/.test(href)) href += "#comments";
document.write('<div title="'+tooltip+'" class="recent-comment'+clsAdmin+'">');
document.write('<div title="'+tooltip+'" class="recent-comment-header'+clsAdmin+'"><div title="'+tooltip+'" class="recent-comment-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '</div>');
else {
comment = comment.substring(0, maxCommentChars);
var indexBreak = comment.lastIndexOf(" ");
comment = comment.substring(0, indexBreak);
document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '...</div>');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="recent-comment-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
}
}
document.write('<div style="clear:both;"></div></div>');
}
}
}
if(getTitles)
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script>



TIPO 2 (avatares redondeados)

  • Ubicación: gadget java. 
  • Proceso:

Pegar este script cambiando lo que está marcado en verde y en negrita a gusto personal:






 
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 4,
 showAvatar  = true,
 avatarSize  = 40,
 roundAvatar = true,
 characters  = 60,
 showMorelink = true,
 moreLinktext = "Sigue",
 defaultAvatar  = "https://lh6.googleusercontent.com/-HvZ1dhJY1Nc/UCQ037LiV2I/AAAAAAAAAMY/58an7fb9Ndo/s45/anonimo.jpg",
 hideCredits = true;

//]]>
</script>
<script type="text/javascript" src="http://sites.google.com/site/silviafilologa/home/recent-comments.js"></script>
<script type="text/javascript" src="http://NOMBREDETUBLOG.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Un mapa del sitio o índice en el blog mejora en gran medida la búsqueda de artículos o posts escritos, ya que se tienen todas, o casi todas, las etiquetas y sus respectivas entradas en una solo página. El índice se actualiza automáticamente a cada entrada publicada.
  • Ubicación: en este caso directamente en el editor HTML de la entrada o página independiente.
  • Proceso:
Copiar este script y hacer el cambio pertinente en NOMBREBLOG, donde se pondrá, como se indica, la dirección del blog. El número 100 indica las últimas entradas escritas a visualizar en el mapa. Se puede cambiar a gusto personal (hasta un máximo de 999 entradas).

<script style="text/javascript" src="https://sites.google.com/site/silviafilologa/home/mapadelsitio.js"></script>

<script src="http://NOMBREBLOG.blogspot.com/feeds/posts/default?max-results=100&alt=json-in-script&callback=loadtoc"></script>

Un rollover es una aplicación práctica y sencilla relacionada con el tratamiento de imágenes. El efecto creado es dinámico y consiste en  el paso de una imagen a otra con tan solo poner el cursor del mouse sobre ellas. Las imágenes se alternan de este modo. Cuando el cursor se va, vuelven a su estado inicial.

Un ejemplo:


  • Ubicación: gadget java.
  • Proceso:

Tan solo hay que pegar este script en el gadget:

<script language="JavaScript"><a href=""></a> 
knighted=new Image(200,381)//tamaño de imagen 1
knighted.src="URL IMAGEN 1"
knightred=new Image(200,381)//Tamaño de imagen 2
knightred.src="URL IMAGEN 2"
</script>
<!-- efecto -->
<a
onmouseout="document.knight.src=knighted.src" onmouseover="document.knight.src=knightred.src" target="_blank"><img src="URL IMAGEN 1"
border="0" name="knight"/>
</a
onmouseout="document.knight.src=knighted.src"></center></p>

Sustituir URL IMAGEN 1 (está dos veces) y URL IMAGEN 2 por los enlaces de las imágenes. Hay que tener en cuenta el tamaño de las mismas en anchura y altura para que el rollover quede mejor. Es recomendable que las dos imágenes tengan las mismas medidas.

Las imágenes que se publican en los blogs están estáticas, no tienen ningún tipo de dinamismo. Con este tutorial sencillo y breve, las imágenes tendrán un efecto de giro al pasar el cursor del mouse por ellas. Así ganamos ese dinamismo perdido o faltante.

El resultado final será así:
  • Ubicación: plantilla y gadget java.
  • Proceso:

1.) EN LA PLANTILLA: pegar los siguientes estilos antes de ]]></b:skin>

.imagerotate img {
-moz-border-radius:5px;
-moz-transition: -moz-transform 1s ease 0s;
background:#B292A9 !important;
border: 1px solid #ffffff !important;
border-radius: 5px 5px 5px 5px;
height: 150px; margin: 5px;
padding: 0px;
position: relative;
width: 220px;
}

.imagerotate img:hover {
background:#AD184E !important;
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-ms-transform:rotate(15deg);
}

Hay que modificar el ancho (width) y alto (height) de las imágenes que se tengan en el momento, que por defecto están a 220 y 150 px, respectivamente. Si se desea se pueden cambiar los colores del background.

2.) EN EL GADGET: pegar este código

<div class="imagerotate">
<a href="URL-ENLACE"><img alt="" src="URL-IMAGEN" /></a>
</div>

Tan solo resta poner la URL del enlace que redireccionará la imagen, y también la URL de esta. El código se puede copiar tantas veces como imágenes queramos poner en el gadget. Si no se desea redireccionar la imagen a un enlace, tan solo hay que copiar el código sin la línea de la URL-ENLACE <a href="URL-ENLACE">. Solo hay que dejar la clase "imagerotate" y la línea de la URL-IMAGEN.

Las imágenes que se publican en los blogs están estáticas, no tienen ningún tipo de dinamismo. Con este tutorial sencillo y breve, las imágenes tendrán un efecto de giro al pasar el cursor del mouse por ellas. Así ganamos ese dinamismo perdido o faltante. El resultado final será así:
 
  • Ubicación: plantilla y gadget java.
  • Proceso:

1.) EN LA PLANTILLA: pegar los siguientes estilos antes de ]]></b:skin>

.imagerotate img {
-moz-border-radius:5px;
-moz-transition: -moz-transform 1s ease 0s;
background:#B292A9 !important;
border: 1px solid #ffffff !important;
border-radius: 5px 5px 5px 5px;
height: 150px; margin: 5px;
padding: 0px;
position: relative;
width: 220px;
}

.imagerotate img:hover {
background:#AD184E !important;
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-ms-transform:rotate(15deg);
}

Hay que modificar el ancho (width) y alto (height) de las imágenes que se tengan en el momento, que por defecto están a 220 y 150 px, respectivamente. Si se desea se pueden cambiar los colores del background.

2.) EN EL GADGET: pegar este código

<div class="imagerotate">
<a href="URL-ENLACE"><img alt="" src="URL-IMAGEN" /></a>
</div>

Tan solo resta poner la URL del enlace que redireccionará la imagen, y también la URL de esta. El código se puede copiar tantas veces como imágenes queramos poner en el gadget. Si no se desea redireccionar la imagen a un enlace, tan solo hay que copiar el código sin la línea de la URL-ENLACE <a href="URL-ENLACE">. Solo hay que dejar la clase "imagerotate" y la línea de la URL-IMAGEN.

Foto cortesía de Diyva
Con este truco se podrá visualizar en un gadget varias entradas aleatorias del blog con una imagen en miniatura. Una manera diferente de navegar por los posts publicados.
  • Ubicación: plantilla y gadget java.
  • Proceso:

1.) EN LA PLANTILLA: antes de ]]></b:skin> pegar lo siguiente (bloque de las miniaturas, perfectamente editable en el borde, alto y ancho de la imagen, fondo y flotamiento a la derecha o a la izquierda):




#random-posts img{
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:36px;
height:36px;
padding:3px}

2.) EN UN GADGET:  sencillamente pegar este script:

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comentarios';
var rdp_disable='Deshabilitados';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://lh4.googleusercontent.com/-n3jTXCx96lw/UCs8lm3eUbI/AAAAAAAAAnE/XfxOEHz8GGc/s48/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
Del script hay que tener en cuenta lo siguiente para editarlo, si se desea.

>> var rdp_numposts=5; número de post a mostrar.
>> var rdp_snippet_length=número de caracteres a mostrar.
>> var rdp_info='yes'; datos que aparecen debajo del nombre del post (la fecha de publicación y el número de comentarios (poner "no" si no queremos tales datos).

>> Nadie dijo que ser un buen blogger fuera fácil, pero eso no es excusa para no serlo

Foto cortesía de Gravedad | Blogs
La mayoría de bloggeros abandonan su actividad como bloggers a los seis meses de haber empezado con sus blogs. Es una cifra aproximada pero se acerca mucho a la realidad de la mayoría de casos de abandono. La causa de estos abandonos suele ser, la mayoría de veces, por no corresponderse el esfuerzo invertido con los resultados obtenidos. Es decir, se esperaba como mínimo tener entre 500 y 1000 visitantes a los 6 meses y sólo ha llegado a los 150; además, nunca recibe comentarios y los pocos que recibe no aportan nada a lo dicho en el artículo; nadie comparte su contenido en Twitter y Facebook; no recibe el apoyo de la gente en sus diferentes perfiles dispersos por la Red; su página de Facebook parece un pueblo abandonado del salvaje oeste americano; y un largo etc. de situaciones desesperantes capaces de tumbar al más estoico. Si eres un blogger primerizo estas cosas te pueden tumbar sin contemplación incluso en los primeros meses de haber iniciado tu actividad. Simplemente es demasiado duro escribir de forma regular para tu blog y actualizar tus perfiles sin ver ningún indicio de estar haciendo progresos en tu presencia online. Pasan los días y los resultados no mejoran, cada vez se te hace más duro seguir el ritmo y, al final, decides utilizar tu tiempo en otra cosa que te aporte algo de forma más inmediata. 

Ya seas alguien que aún no tiene un blog pero que espera tenerlo o alguien que ya está sumergido en aguas de la blogoesfera aquí te dejo una serie de 6 consejos para que nunca abandones tu actividad como blogger.

1.    Ser un buen blogger no es coser y cantar

Antes de empezar debes de ser consciente de la dureza de ser blogger. No todas las personas están hechas de la pasta que hace falta. Ser un buen blogger implica actualizar tu blog al menos cinco días a la semana. Ello conlleva la búsqueda de ideas para artículos nuevos, investigar mínimamente sobre los temas escogidos y plasmarlo todo en un buen artículo. Así, como ya he dicho, casi cada día del resto de tu vida. Un buen blogger no se toma vacaciones nunca. Lo único que puede hacer es tener artículos en la recámara y programar su publicación con antelación. Aparte de eso, no hay descanso. Por si esto fuera poco, además hay que mantener activas las cuentas en las distintas redes sociales como Twitter y Facebook.

2.    Ponte en el peor escenario posible

Si crees que vas a pegar fuerte nada más entrar vas muy errado. No sólo no vas a pegar fuerte sino que seguramente nadie o casi nadie va a saber de ti y de tus contenidos hasta pasado mucho tiempo.  El éxito no viene de la noche a la mañana y quien diga lo contrario miente.

Mi consejo: ponte desde el principio en el peor de los escenarios posibles. Si te parece  razonable que en acabar tu primer mes te visiten 100 personas al día rebaja esa aspiración a 20. Si crees que recibirás 20 comentarios rebájalos a 2. Si crees que conseguirás 5 Retweets por post de media rebájalo a 0-1 Retweet por post. Si crees que tendrás 20 targeted followers más rebaja la cifra a 2. Y así con cualquier dato relacionado con el funcionamiento de tu blog que te puedas plantear.

¿Por qué? Porque si las cosas van feas, como seguramente irán, no te cogerán de sorpresa y, por lo tanto, no supondrán un duro golpe para ti. Tú ya esperabas que las cosas fueran mal así que esto no te dice nada nuevo. En cambio, si antes de empezar tienes tus aspiraciones demasiado altas, el mazazo que te vas a llevar pasado el primer mes puede llegar a ser lo suficientemente duro como para destrozar tu moral y hacer que abandones. ¡Ojo! Esto no quiere decir que apuntes bajo y que estés contento con el fracaso, esto es simplemente ser realista. Lo contrario sería engañarte a ti mismo. Y, oye, si al final, por el motivo que sea las cosas van mejor que lo esperado la felicidad que sentirás será doble.

3.    Ignora las estadísticas al menos durante el primer año

Trabaja bien cada día y olvídate de estar cada 10 minutos mirando tus stats. ¿De qué te sirve mirar tus pobres números cada día? Ya te lo digo yo: de nada. Es una absoluta pérdida de tiempo. Además, el impacto que tienen en tu confianza es perjudicial. Ver cada día que tus números no mejoran o no lo hacen como esperas es duro y difícil de digerir. ¿Por qué exponerse día tras día a esa tortura? Deja de perder el tiempo y céntrate en lo que de verdad importa, esto es, publicar cosas interesantes, construir tu presencia online y conectar con gente y, todo  esto, hacerlo paso a paso.

Mi consejo: no mires los stats de tu sitio al menos durante los 6 primeros meses. ¿Para qué? ¿De qué me sirve saber que me leen 100 personas al día o 400?. Con ello, no sólo dejarás de perder el tiempo mirando datos inútiles, con el consiguiente beneficio para tu productividad, sino que además evitarás que te afecten negativamente al ánimo.

4.    Haz las cosas a tu ritmo

No te sobresatures de trabajo con la esperanza de alcanzar la cima en poco tiempo porque eso simplemente no ocurrirá. Lo único que conseguirás es destrozarte la vida y quemarte en poco tiempo. Si sólo puedes publicar tres buenos artículos por semana haz eso. Si sólo puedes usar twitter y facebook  durante 30 minutos al día pues limítate a eso. Como en las maratones, al principio se va a un ritmo suave y luego se incrementa la marcha. Una vez veas que tu trabajo da frutos y entonces piensa en dedicarle más tiempo (y, para ello, tendrás que liberarte de hacer otras cosas). Hasta entonces sigue un ritmo que te sea cómodo de llevar.

5.    Descubre el tema que te apasiona

Tu blog y tu actividad profesional online se debe centrar en aquello que te apasione más en la vida. ¿Por qué? Porque de lo contrario no hay forma de que aguantes los obstáculos que te vendrán con el tiempo. Esto lleva mucho trabajo y si no amas al 100% lo que haces será mejor que ni abras el chiringuito. Si no hay pasión en lo que haces no transmites y si no transmites nadie dará ni cinco céntimos por tu trabajo. La pasión viene de amar lo que uno hace, por lo tanto, descubre qué es aquello que más amas y destina el resto de tu vida a hacer eso. Hoy en día no hay excusas para no hacer lo que te gusta y vivir decentemente de ello. Tú eliges, hacer algo que no te gusta y vivir frustrado el resto de tu vida o hacer algo que te gusta y vivir feliz el resto de tu vida. Esto es así de simple.

6.    Piensa en las ventajas de tipo personal y profesional

Cuando los pensamientos de abandono te vengan a la cabeza, que te vendrán (siempre lo hacen de tanto en cuando), piensa en las ventajas que obtienes de ser un buen blogger:
  • Desarrollas el hábito de la escritura.
  • Aprendes a administrar tu tiempo sabiamente.
  • Desarrollas tus destrezas y habilidades. Si antes escribías bien imagina como escribirás después de dedicarle cada día un rato para actualizar tu blog durante años.
  • Te haces un nombre en tu nicho de mercado o campo de especialización. ¿A quién pedirán consejo los demás cuando quieran saber algo sobre el tema de tu especialidad? A ti.
  • Creas una audiencia que, con el tiempo, confiará en tu criterio sobre los temas de que hablas más que en el de ninguna otra persona.
  • Por lo mismo te puedes hacer consultor y/o coaching, según sea el tema de tu blog.
  • Las editoriales si ven que escribes bien y sabes de lo que escribes, si tienes una audiencia importante, te pueden ofrecer la oportunidad de escribir para ellos uno o más libros. Hay muchos casos de bloggers que han recibido ofertas para publicar libros y, la mayoría de ellos, son éxitos de ventas. Es un tiro seguro para las editoriales pues saben que el autor mismo tiene una plataforma potente (o más si contamos con las redes sociales) para promocionar su libro.
  • Tener un blog y una presencia online también te facilita mucho el hacer networking y conectar con otras personas con intereses similares contigo.
  • Tener una buena presencia online también te va a facilitar encontrar trabajo si lo necesitas. Los empleadores cada vez utilizan más internet para seleccionar trabajadores. ¿Por qué? Porque en internet todo está a la luz, aquí se ve quien sabe de lo que habla y quien vende humo.
  • Y qué decir del legado que estás dejando para el resto de la comunidad. La cuestión es contribuir de alguna forma a los demás para que cuando te levantes cada mañana te digas a ti mismo: mi vida tiene un sentido. Yo contribuyo con mi actividad a dejar un mundo mejor que el que encontré siendo blogger.



Clic para agrandar (+)
El formulario de comentarios en  Blogger peca de soso, muy pobre y nada alegre a la vista. Con este truco diremos adios a todo eso ya que efectuaremos un diseño acorde con lo que todos nos gustaría: un formulario elegante (no olvidemos que lo verán los comentaristas de nuestro blog). Le pondremos una imagen de cabecera y un fondo con borde estiloso.

DISEÑO DE MENSAJE

Para este primer caso, sustituiremos el clásico enlace "Publicar un comentario en la entrada" por una imagen. En el ejemplo, es la imagen conjunta de "Publica tu bibliofília" y "¡Participa y opina! ¿Qué piensas?".

  • Ubicación: plantilla.
  • Proceso:
  
1.) Buscar este bloque de códigos

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>

2.) Y seguidamente sustituir la línea en verde y subrayada por esta otra <img src="URL DE LA IMAGEN"/> (la imagen puede crearse en MyLiveSignature o Cool Text).


DISEÑO DEL CAJÓN O VENTANA DE COMENTARIOS

Ahora toca diseñar el cajoncito de comentarios. Se podrá visualizar una imagen como fondo, la cual se aconseja sea de colores o tonos pastel para no desentonar mucho. En el ejemplo se ve que el fondo es de un grisáceo claro.

  • Ubicación: plantilla.
  • Proceso:

>> Buscar este código ]]></b:skin> y antes de éste pegar lo siguiente (es perfectamente modificable acorde a los gustos personales):

.comment-form {
background:#c0c0c0 url (url de la imagen si queremos fondo);
margin: 0 auto;
border:2px dashed #000;
padding-left:5px;
padding-right:5px;
}

NOTA IMPORTANTE: este truco es incompatible con los comentarios anidados. Si se aplica este la imagen del diseño de mensaje del formulario ("Publica tu bibliofília...") no saldrá visualizada si hay comentarios en la entrada (tan solo basta con que haya uno solo). Si no hay comentarios, el diseño completo del formulario se verá perfectamente.

Blogger no ofrece nada similar a lo que, en cambio, sí figura en Wordpress, el mayor competidor de la plataforma de blogs de Google. Consiste en una cajita descriptiva a final de las entradas sobre el autor del blog. Incluye unas líneas de perfil y la imagen de la misma. Incluirlo en el diseño de Blogger es muy fácil.
 
  • Ubicación: plantilla.
  • Proceso: 
1.)  Eliminar el siguiente código (es lo que detalla el "Publicado por"):

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

2.) Debajo de <data:post.body/> pegar lo siguiente:

<div id='Sobreauttrblcn'>
<img border='0' src='URL IMAGEN'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'>AUTOR DEL ARTÍCULO:</span> <strong><data:post.author/></strong></div>
<p>BREVE BIOGRAFIA DEL AUTOR</p>
</div>

<style>

#Sobreauttrblcn {font-family:Arial,helvetica,sans-serif;background:#F4F4F4;border:1px solid #CCCCCC;color:#424242;font-size:12px;letter-spacing:0;margin:20px 0;padding:6px;text-transform:none;}
#blAAut {border-bottom:3px solid #DDDDDD;width:80%;}
#Sobreauttrblcn strong {padding-left:6px;color:#333333;font-weight:bold;font-size:13px;}
#Sobreauttrblcn img {background:#FFFFFF;border:1px solid #CCCCCC;float:right;
height:70px;margin:4px 4px 8px 6px;width:70px;}
</style>

>> Al código hay que efectuarle unos ligeros cambios:

URL IMAGEN: avatar del perfil.
AUTOR DEL ARTÍCULO: nombre del autor bloggero.
BREVE BIOGRAFÍA: texto descriptivo del perfil.  

El cajoncito aparecerá automáticamente al final de cada entrada escrita. 
 
Blogger no ofrece nada similar a lo que, en cambio, sí figura en Wordpress, el mayor competidor de la plataforma de blogs de Google. Consiste en una cajita descriptiva a final de las entradas sobre el autor del blog. Incluye unas líneas de perfil y la imagen de la misma. Incluirlo en el diseño de Blogger es muy fácil.
 
  • Ubicación: plantilla.
  • Proceso: 
1.)  Copiar el siguiente bloque después de esta línea <div class='post-footer'>

     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='tw-authors'>
    <div class='tw-author clearfix'>
      <div class='author-image'><img alt='' class='avatar avatar-70 photo' height='70' src='URL DE LA IMAGEN' width='70'/> </div>
    <h3>Escrito por <a expr:href='data:post.authorProfileUrl' rel='author' title='Entrada del autor'><data:post.author/></a></h3>
    <div class='author-title-line'/>
    <p> TEXTO </p>
    </div></div>
    </b:if cond>


Editar lo que figura en color rosa. 

Si aparece dos veces la línea <div class='post-footer'> copiar el bloque de nuevo bajo dicha línea.

2.) El siguiente paso son los estilos del cuadro (colores...). Buscar esta línea ]]></b:skin> y pegar antes el siguiente bloque:

/* Estilos para el cuadro de autor */
.tw-author {
margin: 50px 0;
padding: 20px;
background-color: #333;
margin-bottom: 20px;
}
.tw-author .author-image {
float: left;
margin-right: 30px;
margin-top: 15px;
}
.tw-author h3,.tw-author a {
color: #fff;
font-size: 13px;
}
.tw-author p {
margin: 0;
color: #fff;
margin-top: 10px;
}
.tw-authors {
float: left;
border-top: 1px solid #d2d2d2;
width: 625px;
}
.tw-author {
float: left;
}
.tw-author.clearfix h3 {
font-weight: bold;
text-transform: uppercase;
color: #fff!important;
margin: 0px;
margin-top: 10px;
}
.tw-authors p {
font-size: 13px;
}

Ahora hay que editarlo a gusto personal.

El cajoncito aparecerá automáticamente al final de cada entrada escrita. 
 
El scroll es el acto de desplazar vertical u horizontalmente el contenido de una página web. Este efecto se logra utilizando el ratón o el dedo en una pantalla táctil para moverse hacia arriba, abajo, izquierda o derecha, dependiendo de la dirección del scroll.

Aquí se detalla cómo ponerlo en la sidebar, esto es, en un gadget. 

  • Ubicación: gadget java.
  • Proceso:

Simple, pegar el código en el gadget:

<div class="widget-content">

<ul style="height:150px;width:240px; overflow:auto; ">

<li>

TEXTO TEXTO TEXTO TEXTO

</li>

</ul></div>

Sustituir la línea de TEXTO TEXTO TEXTO TEXTO por el contenido que se desea visualizar dentro del scroll. Las medidas de alto (height) y ancho (width) son modificables según las que disponga el blog. 


Foto cortesía de Chica Blogger
Con este truco podemos poner un gadget en el blog que muestre las últimas entradas escritas. El propio Blogger dispone de un gadget para ponerlo, pero peca de bastante soso y escueto. Este mostrará las entradas más recientes de una manera elegante y más bonita. 
  • Ubicación: gadget java.
  • Proceso: 
Simplemente pegar el siguiente código en el gadget:
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<style type='text/css'>
img.recent_thumb {padding:2px;width:70px;height:70px;border:0;
float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 14px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
 
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg';
}
 
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">');
 
 
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>');
 
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
 
 
if (showpostsummary == true) {
 
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}
 
var towrite='';var flag=0;
document.write('<br><strong>');
 
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}
 
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
 
if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>';
flag=1;
;
}
 
document.write(towrite);
 
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');
 
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;</script>
<script src='http://TUBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

La ultimísima línea del código (100) hay que cambiarla. Donde dice "TUBLOG" ponemos el nombre de nuestro blog. Importante ponerlo bien ya que es la dirección RSS (Feeds) que se encargará de leer automáticamente las entradas que se visualizarán luego en el gadget.

Hay un par de variables que pueden modificarse:
  • numposts (línea 92): nº de posts que se muestran (por defecto “5″).
  • numchars (línea 99): nº de caracteres de los resúmenes (por defecto “80″).
El siguiente bloque de variables (al final del código, a partir de la línea 93) también es modificable. Todos están marcados con "true". Para anular alguno de ellos, y por tanto que no aparezca en el gadget, basta con ponerle la palabra "false":
  • showpostthumbnails: miniaturas de imagen.
  • displaymore: enlace “Más”.
  • displayseparator: línea de separación entre cada ítem.
  • showpostdate: fecha de cada post.
  • showpostsummary: resumen de cada post.
La paginación consiste en un menú a pie de entradas para navegar por las mismas. Sustituye al clásico menú que ofrece Blogger: aquel de entradas antiguas y recientes, con flechitas a izquierda y derecha con la página principal en el centro, a menudo, con un icono en forma de casita.

  • Ubicación: gadget java.  
  • Proceso:  
Tan solo basta pegar este código en el gadget, justo a pie de entradas, al final de estas en el diseño:

<style type="text/css">#blog-pager{font-size:normal;padding:10px 0;clear:both;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}
.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x}
.showpageNum a:hover{border:1px solid #888;background:#ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x}
.showpageOf{margin:0 4px 0 0}
.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;text-decoration:none}</style>
<script style='text/javascript'>
    var numshowpage=7;
    var postperpage =7;
    var upPageWord="Anterior";
    var downPageWord="Siguiente";
    var home_page="/";
    var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://sites.google.com/site/silviafilologa/home/paginacionblogger.js'></script>

A TENER EN CUENTA:
  • var numshowpage=7: indica el nº de cuadradritos a visualizar detrás y delante de la página activa.
  • var postperpage =7: indica el nº de entradas por página.
  • var upPageWord="Anterior": texto para el botón de las entradas previas.
  • var downPageWord="Siguiente": texto para el botón de las entradas siguientes.
Un comentario anidado permite, entre otras cosas, interactuar con los participantes de una entrada del  blog. Además, es una forma ordenada de presentar los comentarios.


  • Ubicación: plantilla.
  • Proceso:  
1.) Buscar las siguientes líneas de código (basta con buscar la primera y saldrá el bloque entero): 

  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>

Sustituir todo el bloque por lo siguiente:

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

2.) Revisar si está repetido el código del paso 1.) (puede pasar según el modelo de plantilla) y proceder a lo mismo, a sustituirlo por el nuevo dado. Usar el buscador pulsando Ctrl+F para buscar el supuesto código repetido, si lo hubiera.


¿Qué beneficios aportan los comentarios anidados?

  1. Fomentan la participación y la interactividad entre los usuarios del blog.
  2. Pueden aumentar la posibilidad de que comenten más, fomentando el diálogo y la discusión.
  3. Permiten reconocer fácilmente a la vista las respuestas a un comentario y sus reacciones.

    Están marcados en el círculo rojo
    Con este truco se podrá visualizar en el lateral derecho (o izquierdo) de la página, justo al lado de la barra de scroll, 4 botones sociales: Facebook, Twitter, aNobii y Netvibes. Así es fácil ahorrar espacio en la sidebar, por ejemplo, al tenerlos fuera de ella.
    • Ubicación: gadget java.
    • Proceso:
    Copiar simplemente el código en el java (HTML):

    <style type='text/css'>

    a.linkopacity img {

    filter:alpha(opacity=100);

    -moz-opacity: 0.5;

    opacity: 0.5;

    -khtml-opacity: 0.5;}

    a.linkopacity:hover img {

    filter:alpha(opacity=100);

    -moz-opacity: 1.0;

    opacity: 1.0;

    -khtml-opacity: 1.0; }

    </style>

    <div style='display:scroll; position:fixed; top:400px; right:-12px;'>

    <a class='linkopacity' href='http://www.facebook.com/URL PÁGINA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Sígueme en Facebook'><img border="0" src="https://lh6.googleusercontent.com/-6VPz6xF95ZQ/UELFb0j43wI/AAAAAAAABSs/MA5p8-bIhus/s32/LogoFB.png" /></a><br />

    <a class='linkopacity' href='http://www.twitter.com/NOMBRE USUARIO' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Sígueme en Twitter'><img border="0" src="https://lh3.googleusercontent.com/-miBU5Dxktzc/UELFbwmVaDI/AAAAAAAABSo/JsgPXqJ7teY/s32/LogoTwitter.png" /></a><br />

    <a class='linkopacity' href='http://www.anobii.com/NOMBRE USUARIO' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Visita mi estantería'><img border="0" src="https://lh3.googleusercontent.com/-7CgYrDyuNlU/UDu6UZ2OBHI/AAAAAAAAA_U/bKo4fV5NRvA/s32/anobi.png" /></a><br />

    <a class='linkopacity' href='http://www.netvibes.com/NOMBRE USUARIO' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Curiosea por mi escritorio'><img border="0" src="https://lh6.googleusercontent.com/-UxbLGOeK9g4/UDrtxVJWupI/AAAAAAAAA-M/zYHX7k9sBrI/s32/netvibess.png" /></a><br /></div>

    Las imágenes de los iconitos pueden cambiarse por otras redes sociales (Tuenti, Godreads...) o incluso poner los feeds o rss. Para ello basta con buscar los iconitos deseados con el mismo tamaño y sustituirlos por los que figuran en cada caso. Hay que poner los nombres y/o urls de las páginas en donde se especifica "URL PÁGINA" para Facebook, y "NOMBRE USUARIO" para los demás. Y listo.


    Dentro del diseño web, un scroll sirve para aglomerar contenido de la página cuando éste excede sus límites de ancho y alto. Dispone de una barra de desplazamiento, horizontal o vertical, para moverse por el contenido que excede de las propiedades de la web.
    • Ubicación: plantilla (sin expandir artilugios). 
    • Proceso: 
    MODO 1

    1.) Copiar lo siguiente antes de ]]></b:skin>
    #scroll {
    width:400px;
    height:200px;
    background-color:#99CC66;
    overflow:auto;
    }
    Aqui podemos cambiar el color del fondo background-color:#FFFFFF;

    Aqui el ancho width:400px;

    Aqui el alto height:200px; 

    Editar las medidas de alto y ancho según las del blog, así como los colores del background. Con overflow: auto sólo aparecerán las barras del scroll en caso de que el contenido sea mayor a las medidas que se añadieron en la plantilla. Si deseamos que siempre aparezcan las barras del scroll en lugar de overflow: auto añadiremos overflow: scroll en su lugar. Si el contenido no excede las medidas las barras quedan deshabilitadas. En el momento que es mayor el contenido las barras se habilitan. 

    Como último paso tras guardar los cambios anteriores, sólo queda colocar un código más:
    • Ubicación: cada vez en la entrada a publicar, o en la plantilla de entrada (aparece cada vez que se crea una). Para esto último ir a Configuración > Entradas y comentarios > Plantilla de entrada.
    • Proceso: 
    2.) Pegar este código en la ubicación deseada:

    <div align="left">

    <div id="scroll">
    <p>Aquí lo que queremos que este dentro del scroll</p>
    </div>

    </div>

    Y quedaría así (texto sacado de Wikipedia):

    • La lectura es el proceso de significación y comprensión de algún tipo de información o ideas almacenadas en un soporte y transmitidas mediante algún tipo de código, usualmente un lenguaje, que puede ser visual o táctil (por ejemplo, el sistema Braille). Otros tipos de lectura pueden no estar basados en el lenguaje tales como la notación o los pictogramas.
      El proceso mediante el cual leemos consta de cuatro pasos:
      1. La visualización. Cuando leemos no deslizamos de manera continua la mirada sobre las palabras, sino que realizamos un proceso discontinuo: cada palabra absorbe la fijación ocular durante unos 200-250 milisegundos y en apenas 30 milisegundos se salta a la siguiente, en lo que se conoce como movimiento sacádico. La velocidad de desplazamiento es relativamente constante entre unos y otros individuos, pero mientras un lector lento enfoca entre cinco y diez letras por vez, un lector habitual puede enfocar aproximadamente una veintena de letras; también influye en la velocidad lectora el trabajo de identificación de las palabras en cuestión, que varía en relación a su conocimiento por parte del lector o no.
      2. La fonación. Articulación oral consciente o inconsciente, se podría decir que la información pasa de la vista al habla. Es en esta etapa en la que pueden darse la vocalización y subvocalización de la lectura. La lectura subvocalizada puede llegar a ser un mal hábito que entorpece la lectura y la comprensión, pero puede ser fundamental para la comprensión de lectura de materiales como la poesía o las transcripciones de discursos orales.
      3. La audición. La información pasa del habla al oído (la sonorización introauditiva es generalmente inconsciente).
      4. La cerebración. La información pasa del oído al cerebro y se integran los elementos que van llegando separados. Con esta etapa culmina el proceso de comprensión.


    MODO 2
    • Ubicación: cada vez en la entrada a publicar, o en la plantilla de entrada (aparece cada vez que se crea una). Para esto último ir a Configuración > Entradas y comentarios > Plantilla de entrada.
    • Proceso:  
    Pegar este código en la ubicación deseada:
    <div style="height: 300px; overflow: auto;">
    <div class="wp_syntax">
    <table><tbody>
    <tr><td class="line_numbers"><pre><span style="color: blue;">TEXTO A INCLUIR EN EL SCROLL</span>
    </pre>
    </td><td class="code"><pre class="language" style="font-family: monospace;"><span style="color: blue;">
    </span></pre>
    </td></tr>
    </tbody></table>
    </div>
    </div>

    Ya solo queda incluir el contenido donde se especifica TEXTO A INCLUIR EN EL SCROLL. Las medidas del scroll (por defecto, a 300 px de altura) deben cambiarse de acuerdo a las que tenga el blog.
     
    Se acabó la visión fea y simple de los comentarios de los visitantes a un blog. Con este truco, estos se visualizarán como si de un bocadillo o globo tipo cómic se tratara. Elegante y bonito a la vez.

    • Ubicación: plantilla.
    • Proceso:
    Copiar debajo de .comments .avatar-image-container { el siguiente código:

    .comments .comment-block {
    background: #E0F8F7;
    border: 3px solid #A9F5F2;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin-left: 60px;
    padding: 10px;
    position: relative;
    }
    .comment-thread li .comment-block:before {
    position: absolute; left: -26px;content:"\25C4";
    font-size:30px;
    color:#A9F5F2;
    }

    El código es completamente editable en colores y borde del bocadillo.

    Foto cortesía de Mil Trucos Blogger
    Ubicación: plantilla.

    Proceso paso a paso:

    1.) En primer lugar hay que eliminar el gadget de entradas populares que ofrece Blogger, si se tiene puesto en el diseño.

    2.) Seguido, pegar el siguiente código debajo de /* Variable definitions:

     
     <Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
    <Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#ff4c54"/>
    <Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ff764c"/>
    <Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ffde4c"/>
    <Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#c7f25f"/>
    <Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#33c9f7"/>
    </Group>
      
    3.) Pegar antes de ]]></b:skin> lo siguiente:

    #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none;}
    #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px;}
    #PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%;}
    #PopularPosts1 ul li:first-child:after{content:"1";}
    #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%;}
    #PopularPosts1 ul li:first-child + li:after{content:"2";}
    #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%;}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3";}
    #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%;}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4";}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%;}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";}
    #PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff;}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px;}
    #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none;}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none;}
     
    4.) Buscar esta línea <b:section-contents id='sidebar-right-1'> y pegar debajo lo siguiente:

     <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content popular-posts'>
    <ul>
    <b:loop values='data:posts' var='post'>
    <li>
    <b:if cond='data:showThumbnails == &quot;false&quot;'>
    <b:if cond='data:showSnippets == &quot;false&quot;'>
    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
    <b:else/>
    <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
    </b:if>
    <b:else/>
    <b:if cond='data:showSnippets == &quot;false&quot;'>
    <b:if cond='data:post.thumbnail'>
    <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
    <b:else/>
    <img alt='no image' class='item-thumbnail' src='https://lh4.googleusercontent.com/-n3jTXCx96lw/UCs8lm3eUbI/AAAAAAAAAnE/XfxOEHz8GGc/s48/default.jpg'/>
    </b:if>
    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
    <div class='clear'/>
    <b:else/>
    <b:if cond='data:post.thumbnail'>
    <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
    <b:else/>
    <img alt='no image' class='item-thumbnail' src='https://lh4.googleusercontent.com/-n3jTXCx96lw/UCs8lm3eUbI/AAAAAAAAAnE/XfxOEHz8GGc/s48/default.jpg'/>
    </b:if>
    <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
    <div class='clear'/>
    </b:if>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>

    </div>
    </b:includable>
    </b:widget>

    En el diseñador de plantillas, opción Avanzado, se verá en 1ª instancia el gadget de entradas populares cuya pestaña se titula "Popular Posts Backgrounds". Desde allí, el diseñador, podemos cambiar el color de fondo para cada entrada popular (nunca no más de 5).


    >> Cómo poner citas


    Un blockquote es una cita, y sirve para enmarcar un texto que se quiera destacar en la entrada.

    • Ubicación: para todos los casos, en la plantilla.
    • Proceso:
    Pegar los debidos códigos después de .post blockquote {


    Tipo 1) Con barritas laterales

      
    }blockquote {
    width: 450px;
    margin: 10px 0 10px 50px;
    padding: 10px;
    text-align: justify;
    font-size:12px;
    font-family: arial;
    color: #050505;
    background: #F0F3BF;
    border-left: 2px solid #9398A2;
    border-right: 2px solid #9398A2;
    border.radius: 10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    }


    Si se quiere poner un fondo, sustituir esta línea background: #F0F3BF; justo por esta otra: background:url("URL IMAGEN DE FONDO") repeat scroll 0 0 #FFFFFF;


    Tipo 2) Apuntillada


    margin : 0 30px; padding: 15px 35px 20px 20px; background : #F7F7F7 url() no-repeat right top; font: .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 1px dashed #A39C96; } .post blockquote p { margin: 2; padding-top:15px; }

    Cambiar datos de colores y background si se desea.


    Tipo 3) Con bordes laterales redondeados


    }
    blockquote {
    border-color: #b3a158;
    border-width: 0px;
    border-style: dotted;
    border-left: 1px solid #b3a158;
    border-right: 1px solid #b3a158;
    width: 500px;
    heigh: 200px;
    padding: 20px;
    margin: 20px 40px;
    background-image: url("URL IMAGEN DE FONDO");
    border-radius: 10px;}
    blockquote.blockquote2 {
    border: 1px solid  #78b5b4;
    border-left: 0px double #78b5b4;
    border-right: 0px double #78b5b4;
    width: 500px;
    heigh: 200px;
    padding: 25px 57px;
    margin: 10px;
    background-color: #ffffff;
    }


    Insertar la imagen de fondo en "URL IMAGEN DE FONDO" y cambiar a gusto personal los valores de los colores de los bordes en border-left y border-right.


    Tipo 4) Con sombras


    webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    -webkit-box-shadow: 0px 0px 16px #DF3A01;
    -moz-box-shadow: 0px 0px 16px #DF3A01;
    box-shadow: 0px 0px 16px #DF3A01;
    background: #D3D3D3 url(URL DE LA IMAGEN);
    padding: 19px;
    opacity: 0.5;
    font-size: 13px;
    color: #696969;
    font-family: trebuchet ms;
    }


    Se puede insertar una imagen de fondo si se desea. Igualmente los valores de los colores de las sombras (shadow), el tamaño y fuente de la letra del texto son editables. El 16x del shadow es la sombra. Cuanto más alto sea este valor, más evidente será la sombra de la cita.


    Tipo 5) Cajón con doble borde lateral
     
    }
    blockquote {
    border-color: #eeeeee;
    border-width: 1px;
    border-style: solid;
    border-left: 3px double #e2d67d;
    border-right: 3px double  #e2d67d;
    width: 500px;
    heigh: 200px;
    padding: 20px;
    margin: 20px 40px;
    background:  #ffffff;}
    blockquote.blockquote2 {
    border: 1px solid #eeeeee;
    border-left: 3px  double #9bbb4d;
    border-right: 3px  double #9bbb4d;
    width: 500px;
    heigh: 200px;
    padding: 25px 50px;
    margin: 10px;
    background-color: #ffffff;
    }
      

    Los valores de los colores de fondo y de los bordes se pueden cambiar. 

    >> ¿Cómo obtengo los colores para editar los blockquotes?


    Para obtener colores en códigos hexagecimal (Hex), acompañados del símbolo #, se puede consultar esta web: Hex Color Codes o esta otra: Color Hexa. También hay disponibles unas aplicaciones (no programas descargables al disco duro) que identifican cualquier color que aparezca en pantalla, obteniendo así su código Hex. Tal es el caso de JC Picker (o Just Color Picker), Pixel Pick o el complemento para Firefox Rainbow Color Tools, ambos facilísimos de usar y muy intuitivos. Por estas vias es casi imposible quedarse sin colores.