Poner un sistema de valoración propia

Ahora blogger nos ofrece un gadget para poder incorporar una valoración con estrellas en las entradas. Para habilitarlo vamos a Diseño-entradas del blog-editar y activamos la opción Mostrar la evaluación de estrellas

Algunas plantillas aún no tendrán esta opción así que tendremos que ir a Plantilla-editar html 

busca esta línea <b:include name='feedLinks'/>  y justo debajo pon esto

<b:if cond='data:top.showStars'>

<script src='//www.google.com/jsapi' type='text/javascript'/>

<script type='text/javascript'>

google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});

function initialize() {

google.annotations.setApplicationId(<data:top.blogspotReviews/>);

google.annotations.createAll();

google.annotations.fetch();

}

google.setOnLoadCallback(initialize);

</script>

</b:if>

Ahora buscamos esta línea <div class='post-footer'> y debajo ponemos esto

<span class='star-ratings'>

<b:if cond='data:top.showStars'>

<div expr:g:background-color='data:backgroundColor'

expr:g:text-color='data:textColor'

expr:g:url='data:post.absoluteUrl'

g:height='42'

g:type='RatingPanel'

g:width='180'>

</div> 

</b:if>

</span>

Y ya tendremos puesto el sistema de valoración por estrellas en nuestro blog.

Gadget Ultimas entradas

Con este gadget podremos  tener en nuestro blog los posts más recientes con imagenes en miniatura . Tiene otras características como los números de los comentarios, etc...

Para ponerlo, sólo hay que añadir el código en Diseño-añadir gadget-código HTML

<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><b>'); 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('</b></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>

Donde pone TUBLOG, tienes que poner el nombre del tuyo.

Como poner debajo de las entradas una lista de posts relacionados

Una manera de que tus visitantes puedan ver de un vistazo más cosas que les pueden interesar de tu blog, es poner debajo de las entradas una lista de otros posts que les pueden interesar. Es muy fácil hacerlo si sigues estos pasos:

Primero tenemos que ir a esta página: http://www.linkwithin.com/learn y nos saldrá un cuadro como este

Donde pone email pones tu dirección de correo y debajo la Url de tu blog. Donde pone Plataform, pinchas en la flechita y te saldrá un desplegable con varias opciones para que elijas la plataforma de tu blog, por ejemplo Blogger y en con la otra flechita de abajo podrás elegir cuantos posts quieres que se mencionen en el listado. Yo suelo poner 5 porque me queda perfecto con el ancho de la entrada, pero eso a tu gusto.

Si tu blog esta escrito con letras de color claro sobre fondo oscuro, marcas el caudradito de My blog...y ya está, ahora pulsas en Get Widget! y te llevará a una página donde te saldrá esto

Pincha en Install Widget y saldrá un cuadro como este

Puedes cambiar el título si quieres, si no, lo dejas como esta y pinchas en Editar contenido y se te abrirá un cuadro con código HTML.

Y ahora ya sólo nos queda colocarlo en su sitio así que vamos a hacer Copia y pega como con cualquier código. Lo copiamos y nos vamos a nuestro blog a Diseño-añadir gadget-código HTML y lo pegamos. Damos a Guardar y ya tendremos el gadget añadido. En mi caso, es el primer cajetín que sale en la columna de la derecha. Pero quedará mucho mejor si lo movemos debajo del cuadro de las entradas

Para eso, solo tendremos que pinchar con el ratón y arrastrarlo. Y nos quedará así. Ya solo nos queda pinchar en Guardar disposición

Y ya tendremos debajo de cada entrada una relación de otros posts para que nuestros visitantes puedan verlos.

Si las entradas tienen imagen, el listado saldrá con imagen y en horizontal un post al lado del otro, si no es así te saldrá una lista en vertical y sin imagen. En este blog podrás ver como quedan las dos.