WIDGET POR ETIQUETAS CON IMÁGENES EN BLOGGER

WIDGET POR ETIQUETAS CON IMÁGENES EN BLOGGER.

 Bueno después de estar buscando algunos códigos para poder organizar nuestro blog de blogger,
os 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 tienes que seguir las instrucción y nada mas.

 Lo que va a mostrar nuestro widget son, las imágenes y un fragmento del texto, vosotros lo podreis ubicar donde mejor os 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 mira 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”

3 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/AVvXsEiRxTugtS1l_1zBeSegTKPgMzIx0-lnIHEcCSqU07_RYKRfeJ9UMsFsEd999uSwmkNkxBqiko8-7hyphenhyphenltmt65meL4vUq1pKLoedgOQTdW0vDXA7h9Wpt_jmRq095sO9FJsoepQGELwQYTS4/';}
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>

 Dale un clic en “Guardar plantilla”

Ir a Blogger

1-Un clic en “Diseño” 

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo 

4-Coloca el siguiente codigo en el 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.

Fecha de la Publicación; 15-01-2019

 Fuente;  ayudadeblogger

 Publicado por;