Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
En este tutorial veremos como agregar un gadget de Entradas Relacionadas para Blogger.
Un gadget de Entradas Recientes es importante para un blog ya que sirve como de apoyo para la navegación. Sobre todo cuando el numero de
entradas en la pagina inicial es escaso. Asi que el gadget de Entradas Recientes para ver las ultimas entradas o un post Anterior

Comencemos: 

  • Paso 1: Vamos a Blogger>> Plantilla>>Edicion HTML>>
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
  </head>
  • Paso 3: Justo por encima de </head> pegamos el siguiente código HTML 
<script>
// Tip y Tutoriales Blogger [ OBC ]
// Tutorial por http://tutoriales-blogger.info
// Entradas Relacionadas para Blogger.
//<![CDATA[
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Creado por Tutoriales-Blogger.info">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
//]]>
</script>
  • Paso 4: Todabia en la plantilla Buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
  • Paso 5: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.
/*  Entradas Recientes Tutoriales-Blogger.info */
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
/* Entradas Recientes Tutoriales-Blogger.info */

Guardamos los cambios realizados en la plantilla. Ahora agregaremos un gadget para las Entradas Recientes.

  • Paso 6: Vamos  a Blogger>> Diseño>> Añadir un gadget nuevo>> HTML/Javascript.
  • Paso 7: Dentro de gadget pegamos el siguiente codigo HTML.
<script>
var bsrpg_thumbSize = 150;
var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

Nota: Si quieres puedes cambiar el ancho de la imagen en rojo
Nota: También puedes cambiar si quieres que muestre el titulo o no True (para mostrar titulo) False (para no mostrar)
Nota: Cambia el valor 8 por la cantidad de entradas a mostrar 
  • Paso 8: Guardamos el gadget y listo a disfrutar nuestro gadget de Entradas Recientes. 
- - 11 Comentarios
Tag

Comentarios (11)

  1. hola me super sirvió lo único que me pasa es que me queda abajo del cuadro de comentarios... como tengo que hacer para que quede justo abajo de la entrada y luego el cuadro de comentarios

    ResponderEliminar
  2. En mi caso me aparece, pero muy arriba.. lo quiero debajo de cada post D:

    ¿Qué código maneja la posición de las entradas?

    ResponderEliminar
  3. @Byakuya-Kuchiki
    Dime si te sirve de la siguiente manera.

    Arriba de

    <data:post.body/>

    Pega el siguiente código

    <script>
    var bsrpg_thumbSize = 150;
    var bsrpg_showTitle = true;
    </script>
    <script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>


    Cuéntame si te sirvió :>)

    ResponderEliminar
  4. Medio resolvi el problema directamente moviendo ese codigo desde diseño..

    Ahora tengo otras dudas:

    ¿Como hago para que solo aparezca en las entradas y no en la portada principal y así mismo que muestre entradas aleatorias y no las últimas que yo hice?

    Espero que no sea mucho pedir D:

    ResponderEliminar
  5. @Byakuya-KuchikiOK para hacer todo eso tengo que que crear otro tutorial ya que es muy extenso para decírtelo por la caja de comentarios.

    Espero que me entiendas

    ResponderEliminar
  6. Si, te entiendo...Para ser más especifico, quisiera un gadget de entradas relacionadas como el que tu tienes, pero con los efectos que vienen en este post, con la diferencia que muestre entradas aleatorias cada vez que se actualice la pagina o entren a otra sección de mi blog.

    Bueno, gracias por todo.

    ResponderEliminar
  7. Cómo puedo agregar el scripts en el html de la página,no como gadget.. me da error al intentarlo.. Saludos!!

    ResponderEliminar
  8. @Cristian ParraComo dije en un comentario anterior en otro tutorial daré los pasos para agregarlos en la plantilla y no en un gadget. Sepan entender

    ResponderEliminar
  9. hola, hay una forma de agregar el script feed como async? Saludos ;)

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar