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>

O lo que es igual: el esqueleto de la estructura de un blog.

Foto cortesía de Quiero crear un blog
outer-wrapper: envuelve a todo el blog.
main-wrapper: lugar donde se escriben los posts o entradas.
sidebar-wrapper: columna lateral donde se insertan los gadgets.
header-wrapper: cabecera del blog.
footer-wrapper: pie de página del blog.
 
Estos son los elementos básicos de toda plantilla Blogger. Saber distinguirlos garantiza el éxito editando el diseño de un blog.

En ambas, clicar para agrandar (+)

Fotos por cortesía de Quiero crear un blog
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>