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.

Publicar un Widget por etiquetas con imágenes en 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

Publicar un Widget por etiquetas con imágenes en blogger




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.

Publicar un Widget por etiquetas con imágenes en blogger

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
¿Te ha resultado útil este artículo, recomiendanos?
Si



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.

Related post

Comentarios

42 comentarios:

  1. Hola Luis, gracias por el apoyo que nos da a los bloggers. Hace tiempo que busco un widget que me publique fotos y textos, pero no tomando los artículos publicados en la caja, sino algo independiente que pueda manejar, porque tengo algunos colaboradores -articulistas- y quisiera mostrar sus fotos y texto en una página independiente, digamos debajo de las entradas como el efecto linkwithin o outbrain, con lea más que el lector pueda buscar el artículo completo en el interior. Tienes alguna idea o información?. Gracias anticipadas

    ResponderEliminar
  2. Hola, Juan, el gusto es mio en ayudarles, el ultimo parrafo que me estas indicando no entiendo muy bien lo que dices, si fueras un poco mas exoplicativo posible para poderte ayudar ya que en blogger se puede hacer muchas cosas.
    Espero tu respuesta.
    Saludos...

    ResponderEliminar
  3. El script genial, pero me lista los posts en vertical, alguna idea de como listarlos en horizontal?

    ResponderEliminar
  4. Hola, TorrentSlash, es buena tu idea sobre listar el post en forma horizontal, voy haber si lo puedo realizar el truco ok, y de inmediato lo sabras.
    Saludos...

    ResponderEliminar
  5. genial!!!
    Buscaba un modo de publicar de alguna forma un "especial Navidad" (por ejemplo) y que se mostraran todos los artículos sobre esta temática.
    Funciona muy bien, muchísimas gracias por tu ayuda, ha sido fantástica. Si queréis podéis ver como ha quedado en mi blog www.mamapsicologainfantil.com

    ResponderEliminar
    Respuestas
    1. donde has implementado el código?

      ya revise tu sitio pero no lo distingo

      Eliminar
    2. donde has implementado el código? no lo distingo

      tu plantilla esta chida saludos

      Eliminar
  6. Hola Sara, me agrada mucho que te haya sido de mucha ayuda, y ya vi tu blog y te quedo estupendo.
    Saludos..

    ResponderEliminar
  7. Hola amigo como hago para que aparezcan mas letras Gracias

    ResponderEliminar
  8. Hola, en el paso 7 dice asi:
    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.
    Busca este codigo en tu widget, numchars = 100
    aumenta el numero 100 a el numero que tu quieras con eso aumentara las palabras de tu widget.
    Saludos.

    ResponderEliminar
  9. Hola! Muy interesante el tutorial!

    Como puedo hacer para que elija una imagen determinada de dentro del post y no otra? Por ejemplo que elija siempre para hacer el thumb 'imagen.jpg'.

    ResponderEliminar
    Respuestas
    1. Hola deberias color la primera imagen de 350x300 pixeles, y esa imagen principal es la que se mostrar en el widget de etiquetas y las otras no se mostraran. Asi que debarias insertar una primera imagen en el articulo que publiques.
      Saludos.

      Eliminar
    2. No lo he entendido bien. Cogerá la primera imagen del post? Si es así como puedo cambiarlo? Porque resuluta que en esa situación entraria en conflicto con el template que necesita que la primera foto sea rectangular.

      Se puede hacer algo para que utilize la que tenga en la url 'imagen' (por ejemplo) o la que tenga la medida 350x300 exacta y no la primera?

      Gracias por adelantado.

      Eliminar
    3. Hola, solo cogera la primera imagen que paresca en la primera posicion de tu articulo, y las demas imagenes que vengan despues de la imagen no la cogera, es por eso que te indique, que tu primera imagen es la que parecera en tu widget de imagenes.

      Eliminar
  10. a mi no me funcionó segui los pasos y creo que se ha bloqueado, intenta hacerlo de nuevo a ver si todavia funciona

    ResponderEliminar
    Respuestas
    1. Hola el widget de etiquetas funciona perfectamente, trata de hacerlo tal como lo estoy explicando en este post.
      Saludos.

      Eliminar
  11. repetido, en la parte css y head, lo pegue guarde y luego en el widget puse el siguiente codigo editando mi eiqueta, y nada, se queda en blanco

    ResponderEliminar
  12. Hola, disculpa este widget no me funciona para blog cerrado o sea para los lectores habilitados en la parte de la configuración. El feed me muestra que no tengo permiso, pero si lo habilito para público en general funciona correctamente. No hay manera de hacerlo funciona para un blog cerrado?
    Espero que me pueda ayudar

    ResponderEliminar
    Respuestas
    1. Hola, no lo permite, tiene que estar habilitado al publico..
      Saludos..

      Eliminar
  13. Luis,

    Disculpa la molestia,

    Algo no estoy haciendo correctamente, termino de seguir los pasos y me sale la siguiente leyenda

    Se ha producido un error al analizar el XML, línea 1016, columna 7: The element type "b:skin" must be terminated by the matching end-tag ""

    Que puedo estar haciendo mal?

    Saludos y Gracias

    ResponderEliminar
    Respuestas
    1. Hola estas insertando mal los pasos es por eso que te sale ese error, siguelos tal como esta en este tutorial, si todabia no te sale no dudes en dejarme un comentario y encontrare la forma de ayudarte directamente.
      Saludos.

      Eliminar
    2. Luis,

      Gracias por la respuesta anterior. Sin embargo cometo una y otra vez, el mismo error y no me doy cuenta en donde me equivoco.

      Habría alguna forma de que puedas chekear donde?

      Saludos y nuevamente disculpas por las molestias.

      Guillermo.-

      Eliminar
    3. Hola, si gustas te puedo ayudar directamente y yo podria implementar el codigo en tu plantilla, dejame un mensaje directo a esta direccion de correo: ayudadeblogger@gmail.com
      Y pon sobre tu escrito tu insidencia.
      Saludos.

      Eliminar
  14. Hola Luis, como hago para que aparezcan 2 post y abajo otros 2 osea 1 al lado del otro espero que entiendas la pregunta y gracias

    ResponderEliminar
    Respuestas
    1. Hola, es muy buena tu pregunta, tal vez en futuras publicaciones intentare realizar ese truco, miesntras tanto mantente atento a mis actualizaciones.
      Saludos

      Eliminar
  15. Hola Luis, yo he conseguido ponerlos totalmente en horizontal cambiando el número de caracteres a 300 y aumentando el alto y ancho de las imágenes a 100x100 px, aunque me gustaría que una de las entradas del widget fuese más grande y las otras más pequeñas.
    Aunque aún no he acabado el blog y estoy con cambios podéis echar un vistazo: http://cincotapas.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. He visto tu blog, esta muy bien.
      Saludos.

      Eliminar
    2. hola amigo como hicistes para cambiar el ancho y alto de las imágenes? por donde te metistes?

      Eliminar
  16. Hola, Luís, no me funciona, me queda hecho un desastre el blog. Lo puedes mirar?

    http://observatoricbs.blogspot.com

    ResponderEliminar
  17. Hola Luis resulta que te envié hoy 27 de nov un pedido pero aqui lo entontré muchisimas gracias por este widget trabaja fenomenal y es muy facil de instalar. Saludos

    ResponderEliminar
  18. Luis q tal, primeramente agradecerte por el apoyo, al aumentar las medidas de las imagenes estan se degradan hay algo q pueda modificar para este pequeño detallito.
    Saludos. http://www.madeintingomaria.com/

    ResponderEliminar
    Respuestas
    1. Hola Madein, he visto su blog y esta muy bien, sobre su pregunta al aumentar las medidas de las imágenes estas se van a degradar por que este truco de Blogger no dispone de un tipo de estilo en especial, Saludos.

      Eliminar
  19. Hola! lo he intentado y al principio funcionaba muy bien, pero al cabo del rato el gadget desaparece. Fui a la vista de diseño y vi que continuaba allí pero convertido en un gadget FEED. como puedo arreglarlo para que me salga bien???

    ResponderEliminar
    Respuestas
    1. Hola Ana, gracias por escribir, con respecto a su pregunta, tal vez usted elimino por error algún código, como usted puede observar este truco de Blogger funciona correctamente lo puede ver en mi blog de demos, ahora la solución seria eliminar todo el código que ingreso y volver a realizar nuevamente el tutorial.

      Saludos.

      Eliminar
    2. Tenías razón! FUNCIONA perfectamente! muchísimas gracias.

      Eliminar
  20. Hola como estas?
    me gustaria saber si puedes decir como poner todas las publicaciones de una misma etiqueta. Sin tener que estar modificando cada vez que agrego un nuevo post.
    Espero tu respuesta.
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Gerardo, gracias por escribir, con respecto a su pregunta, si bien comprendo lo que esta indicando, usted puede poner un nombre de etiqueta especifico en todas las entradas de su blog, luego dicho nombre de etiqueta lo ubica en el widget de este tutorial

      Saludos.

      Eliminar
    2. osea... que no es posible lo que te he pedido... por que basicamente no quiero agregar mas etiquetas a cada etiqueta que ya tengo....
      Ahora... conoces algun wifget, que pueda hacerme aparecer todas las publicaciones de una etiqueta de la misma manera que aparece esta?
      muchas gracias

      Eliminar
    3. Hola, si bien entiendo usted, puede ingresar una sola etiqueta, y todas las entradas deberan contener dicha etiqueta, con la cual se mostraran todas las entradas bajo esa etiqueta.

      Si usted quiere mostrar mas de tres publicaciones, puede obtar por cambiar el numero 3 por 100

      var numposts = 3

      Eso es todo

      Saludos.

      Eliminar
    4. Entiendo, el detalle es que solo toma hasta 30 publicaciones... no el total de las efectuadas con esa etiqueta...
      Muchas gracias por responder.
      abrazo

      Eliminar
  21. Anda perfecto, pero faltaría algo para que quede perfecto: hay manera de convertir el "numchars" en alfanumérico para que el resumen muestre sólo hasta el salto de línea? Muchas gracias por ayudarnos a aprender!

    ResponderEliminar