Conoce a los "Seguidores" de tu blog -81-

¿Tienes un blog favorito y deseas que el autor y los lectores conozcan que tú eres un seguidor de su blog?
Pues ahora puedes hacer un seguimiento de los blogs con el widget Seguidores. Incluso puedes estar al tanto de los blogs que sigues a través de la Lista de lectura ubicada bajo la lista de blogs del escritorio.
Seguidores del blog se utiliza para crear una especie de comunidad en el blog, en la cual se encuentran personas que siguen tu blog, es decir que lo leen, pero normalmente no se da.
Por ejemplo, tú lees mi blog y yo leo el tuyo, esto es como decir “comenta en mi blog que yo comentare en el tuyo”, el cual he visto que no siempre sea cierto.
Con esto podrás ver quienes son tus seguidores, seguir así mismo a otros blogs que nos interesan, ver el número de seguidores en nuestro panel y leer las últimas entradas de los blogs que seguimos.

¿Cómo añadir el widget “Seguir” a tu blog?
1. Ir a diseño de la plantilla, luego en Elementos de la página añadimos un Gadget o Widget y seleccionas Seguidores.
2. Después le introduces el título que desees para tu widget Seguir. Una vez hayas elegido el título, haz clic en Guardar, para que se agregue el widget Seguir a tu blog.
Resultado:* Ahora los lectores pueden ir a tu blog y ser Seguidores. Una vez que tus lectores se conviertan en seguidores de tu blog, la imagen del perfil se mostrará en el widget Seguir. Además se mostrará una cuenta acumulativa de tus seguidores junto al nombre del blog en el escritorio.
¿Cómo puedo hacerme seguidor de un blog?
3. Visitar un blog que haya añadido el widget Seguir y hacer clic en el enlace Seguir este blog o en Seguir.
4. Verás una ventana emergente con las opciones para seguirlo de forma pública o anónima.
* Público: Al seguir un blog de forma pública, aparece la imagen de tu perfil y un enlace a tu perfil de Blogger en el widget Seguidores del blog.
* Anónimo: Al seguir un blog de forma anónima, la imagen y el enlace de tu perfil NO se mostrarán en el widget Seguidores del blog.
Finalmente, seleccionar el modo en que deseas seguir el blog y luego haz clic en Follow (Seguir).

5. Cuando te hagas seguidor de un blog, dicho blog también se añadirá a tu Lista de lectura del escritorio de Blogger. Además, puedes hacerte seguidor de cualquier blog o URL (aun si el blog no tiene el widget Seguidores) añadiendo el blog a tu Lista de lectura en el escritorio.

¿Cómo utilizo la Lista de lectura?
6. Con la Lista de lectura, puedes leer las últimas entradas de tus blogs favoritos en el Escritorio.
La Lista de lectura, ubicada bajo la lista de blogs del escritorio, te permite suscribirte a cualquier blog con un feed. Éste se actualizará al instante cada vez que se publique una nueva entrada en cualquier blog de la Lista de lectura.

7. Para añadir un blog a la Lista de lectura tienes que hacer clic en la pestaña Blogs que sigo y luego Añadir.
8. Después, introduce la URL del blog que te gustaría seguir. Puedes añadir tantos blogs como desees haciendo clic en Añadir otro. Una vez que hayas añadido todos tus blogs favoritos, haz clic en Añadir.

* Ahora, cada vez que se actualicen los blogs, se mostrará la última entrada en la Lista de lectura bajo la sección "Elementos".

Paginación en el blog -80-

La paginación es cualquier tipo de sistema de control que permite al usuario navegar a través de las páginas de resultados de búsqueda, archivos, o cualquier otro tipo de contenidos.
La paginación se encuentra también en algunos blogs, foros de debate y en la web de comics.

1. Ir a diseño de la plantilla, luego en Elementos de la página añadimos un Gadget, seleccionas HTML/Javascript y pegas el siguiente código:

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 2px;
text-decoration: none;
}

.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 2px;
text-decoration: none;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpagePoint {font-size:10px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=1;
var firstPageWord = 'Primera';
var endPageWord = 'Última';
var upPageWord ='Anterior';
var downPageWord ='Siguiente';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:10px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Página '+thisNum+' de '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Explicación:
- .showpageArea .- Es el rectángulo donde se va a mostrar la paginación.

- .showpageArea a .- Son los enlaces en general (los números de las páginas y los textos Anterior y Siguiente). Podemos usar cualquier propiedad, como ponerles una imagen y un borde.

- .showpageArea a:hover .- Se refiere al efecto gráfico cuando colocamos el ratón encima de la paginación.

- .showpageNum a y .showpageNum a:hover .- Son los enlaces con los números de las páginas si es que queremos que se vean diferentes.

- .showpage a y .showpage a:hover .- Son los enlaces con los textos si es que - queremos que se vean diferentes.

- .showpagePoint .- Es el texto que se muestra en la página actual, es decir los números.

- var pageCount .- La cantidad de posts que se mostrarán por página.
Si var pageCount=4 entonces se mostraran por pagina 4 artículos publicados.

- var displayPageNum .- La cantidad de páginas listadas.
Si var displayPageNum=1 entonces se listarán 1 más 1 página, serian 2.

2. Finalmente, después de haber pegado el código en un HTML/Javascript necesitas arrastrar el widget y ponerlo debajo de Entradas del blog.
Resultado:

- Por ejemplo, si deseas eliminar Página 1 de 88 entonces tendrías que eliminar el siguiente código que se encuentra casi al final:

html = '<div class="showpageArea"><span style="font-size:10px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Página '+thisNum+' de '+(postNum-1)+': </span>'+html;

Via: Blogger Accessories

¿Cómo insertar el formulario para comentarios en los post? -79-

Este formulario para comentarios aparecerá al final de cada post y es más conveniente para los lectores porque pueden publicar un comentario rápidamente.

1. Ir a Configuración. Después a Comentarios. De ahí, en donde dice: Ubicación del formulario de comentarios, escogemos la siguiente opción:


* No te olvides que tienes que Guardar valores.

2. Finalmente vas a tu blog y verás el siguiente resultado:

Click en las imagenes para agrandarla

¿Cómo mostrar los comentarios numerados? -78-

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantilla de artilugios, agregar el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para eliminarlo.

.CommentIndex{
float:right;
position:relative;top:25px;left:3px;
margin-left:-200px;
font: italic bold 30pt 'Century Gothic','Trebuchet MS';
color:red;
opacity:0.3;
-moz-opacity:0.3;
filter:alpha(Opacity=30);
}

.CommentIndex:hover{
font-size:80px;
}

Explicación:
- En float, puedes cambiarlo de posición, sea left (izquierda) o right (derecha).
- En margin, ver aquí.
- En font y color, si deseas le cambias.
- En opacity, el número aparecerá opaco o transparente (sobre puesto), si deseas lo eliminas y desaparecerá lo transparente.

2. Buscar lo siguiente:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

3. Agregar lo siguiente (lo que está con color azul) después de:

<dl id='comments-block'>
<script type='text/javascript'>Index = 1;</script>
<b:loop values='data:post.comments' var='comment'>

4. Debajo de: <b:loop values='data:post.comments' var='comment'> pegar lo siguiente:

<span class='CommentIndex' title='solo comentario enumerado'><script type='text/javascript'>document.write(Index); Index= Index+1 ;</script></span>

5. Finalmente, guardamos los cambios.

¿Cómo mostrar la foto del autor del comentario en la página principal? -77-

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios, buscar lo siguiente:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

2. Agregar lo siguiente (lo que está con color azul) después de:
<b:loop values='data:post.comments' var='comment'>

<div style="clear:both">
<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'>
</dt>
<b:if cond='data:comment.authorUrl'>
<script type="text/javascript">
if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':'<data:comment.authorUrl/>'});
</script>
<b:else/>
<script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':''});
</script>
</b:if>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

Explicación:
<div style="clear:both">
<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'>
- En float, puedes cambiarlo de posición, sea left (izquierda) o right (derecha).
- En margin, ver aquí.

3. Pegar lo siguiente antes de: </body> (esto se encuentra al final de la plantilla)

<script type='text/javascript'>
//<![CDATA[
function commentPhotoDo() {
var tag;
for(var i = 0; i < commentPhotoIds.length; i++) {
tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');
document.body.appendChild(tag);
}//end for var i in commentPhotoIds
}//end function commentPhotoDo
if(typeof(commentPhotoIds) != "undefined") commentPhotoDo();
//]]>
</script>

* Agregar tu propia imagen en donde dice: &defaultimage='+encodeURIComponent('http://aquí-la-dirección-de-tú-imagen'), porque algunos no agregan su foto y aparecerá una imagen como un anónimo(?), pero si están registrados en Blogger (con-enlace).
En el caso del anónimo aparecerá simplemente la imagen que ustedes han puesto.
- Con respecto a la imagen tiene que ser de ancho 60px por 45px de alto aproximadamente.
** px.- pixeles

4. Finalmente, guardamos los cambios.

¿Cómo calificar los post de tu blog? -76-

Un Widget es uno de esos artilugios que habitualmente adornan las barras laterales de los blogs.

Si quieres saber lo que piensan tus lectores acerca del contenido de tu blog o de los posts de tu blog, puedes añadir el widget Outbrain ratings y tus lectores podrán calificar cada post con una determinada cantidad de estrellas (1 al 5) el contenido de tu blog o página web.
El Outbrain ratings es el más completo y elegante. Sencillo de instalar y funciona en las plataformas Blogger, TypePad, WordPress, Drupal, javascript y FeedBurner RSS feed.
El widget inserta automáticamente el selector de 5 estrellas, en la parte inferior de cada entrada que se publica.
Te recomiendo que te registres para que lleves un registro de tus propias votaciones y asi poder solicitar las estadísticas de tu blog.
Outbrain ratings, incluye soporte para varios idiomas, incluyendo el español. Además te muestra en el blog las 3 Publicaciones más Populares.

1. Ingresar a Outbrain ratings.
2. Selecionar la plataforma que esta alojado tu blog (Blogger, WordPress, TypePad, Drupal u otros).
3. Registrarse (Opcional). Caso contrario instalas el widget.
Ejemplo:

Click en la imagen para agrandarla

4. Recibirás un correo en caso de que te hayas registrado.
5. En caso de que no te hayas registrado te aparecera lo siguiente:

Click en la imagen para agrandarla

6. Finalmente:

Click en la imagen para agrandarla

Existen otras páginas como:
Spotback