add

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.

30 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
  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
  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

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios