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://lh6.googleusercontent.com/_dsEG33PDaHw/Tdw5i1GeYnI/AAAAAAAABcM/K_URA3p40_A/sin-imagen.png';} 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
42 comentarios: