Publicar un Widget por etiquetas con imágenes en blogger

Bueno luego de estar buscando algunos códigos para poder organizar nuestro blog de blogger, les voy a presentar un widget que es realmente estupendo para las personas que les gusta tener bien organizado su blog y que quieran mostrar imágenes con texto incluido, basándonos en etiquetas. Este truco para blogger es muy fácil de realizarlo solo tienen que seguir las instrucción y nada mas. Lo que va a mostrar nuestro widget son, las imágenes y un fragmento del texto, usted lo podrá ubicar donde mejor lo convenga. Este widget para blogger nos sirve para poder mostrar algunas etiquetas que los usuarios no lo ven. Con esto podras aumentar las vistas de tu blog de blogger.

A continuación mire la demostración y en mi blog de demos el widget se llama “Widget de Etiquetas” el cual se encuentra en la parte superior derecha.

Vamos a trabajar

1 Abrir blogger

2 Da un clic en “Plantilla” y luego un clic en “Editar HTML” 

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

3 Busca este código ]]></b:skin> y encima de el inserta el siguiente código

/* Widget de Etiquetas con imágenes by www.ayudadeblogger.com by www.grupodelecluse.com --------------------------------- */ img.label_thumb{ float:left; border:1px solid #8f8f8f; /* Borde de las miniaturas */ margin-right:10px !important; height:55px; /* Alto de las imagenes */ width:55px; /* Ancho de las imagenes */ } .label_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; padding: 0; } ul.label_with_thumbs li { padding:8px 0; min-height:65px; margin-bottom:10px; } .label_with_thumbs a {} .label_with_thumbs strong {padding-left:0px;}

4 Ahora encuentra este código </head> y encima de el inserta el siguiente código

<script type='text/javascript'> //<![CDATA[ function labelthumbs(json){document.write('<ul class="label_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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgitHm4gbJnolWFmyGjEgimypM-o818VMf6vMlms7p_BxSB8Cqw6B9G7gSsgpZuspeNibx-dhQIPuIFuEE5pgeRCrvSmrXGHZRXE9sXg7BpL3tJhGIcJSvpfxmji-d6jLDvMuLb0BC10Ag/';} 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('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');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('');document.write(postcontent);document.write('');} else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}} var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;} if(showcommentnum==true) {if(flag==1){towrite=towrite+' | ';} if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';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('</li>');if(displayseparator==true) if(i!=(numposts-1)) document.write('');}document.write('</ul>');} //]]> </script>

5 Dale un clic en “Guardar plantilla”

6 Dirígete a “Diseño” y busca “Añadir un gadget” y encuentra el widget que dice “HTML/javascript” e inserta el siguiente código en su interior.

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/Aquí va el nombre de la etiqueta?published&alt=json-in-script&callback=labelthumbs"></script>

Realiza este cambio

En la parte que dice Aquí va el nombre de la etiqueta remplázalo por el nombre de la etiqueta que quieras mostrar, siempre tienes que tener encuentra de poner bien el nombre de tu etiqueta, si lo pusiste en mayúsculas deberás ponerlo en mayúsculas, ya que si no pones bien el nombre no se mostrara nada.

Si quieres mostrar 10 imágenes o menos en este widget, solo cambia el numero que se encuentra luego de este código var numposts = 3, remplaza el numero 3 por el numero que quieras mostrar, eso esto, ahora dale un clic en guardar y ubícalo donde quieras que se muestre tu nuevo widget de imágenes basado en etiquetas.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé.

Saludos.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Trucos BloggerWidgets para Blogger

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.