Widget de post recientes con imágenes para mi blog de Blogger


Widget de publicaciones recientes para blogs de Blogger, este widget lo podrán usar en cualquier blog de Blogger. Su función e instalación es sumamente fácil, lo único que tendrán que hacer es seguir mis instrucciones y nada mas. A este widget de Blogger se lo conoce como publicaciones recientes, lo podrán insertar en cualquier parte de su blog. Una de las funciones que realiza este widget de publicaciones recientes es indicar las nuevas publicaciones y las antiguas publicaciones de su blog, con una imagen en miniatura y también le mostrara un texto de 60 caracteres. El widget que les voy a presentar también tiene un menú para poder regresar a los artículos nuevos, al igual que podrán dirigirse a sus primeras publicaciones, es bueno si queremos mostrar todo el contenido de nuestro blog.

Widget de post recientes con imágenes para mi blog de Blogger

Pueden ver su demostración en la siguiente página web


A continuación como insertar el widget de post recientes en nuestro blog de blogger

1 Abrir Blogger

2 Diríjase a “Diseño”


Widget de post recientes con imágenes para mi blog de Blogger

3 Abrir “Añadir un gadget”

Widget de post recientes con imágenes para mi blog de Blogger

4 Cuando se le despliegue el Gadget tendrá que buscar un widget que dice “HTML/Javascipt”.

Widget de post recientes con imágenes para mi blog de Blogger

5 Insertar en su widget el siguiente código


<style type='text/css'>
#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZzN59nHhPY1MIPLNNXIxXYR6wkXn6Vxr2CF_VHOI6BNPdhZPA2rhB8xR0fLc1mWzKzXGYumg31B5lqDJNOlX8_daidkUyRETSZNqh3V7WO4IbzFaDZh8u2PCceK5JXjkKGGnyYxueNo/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://ayudadeblogger.com/";
var charac = 60;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOAzh7i4k4VMcpDZikLZRR3y-qF0ZqQxCU43UA8bMgOEyQbHL32LjBjOhrnt37Jhyphenhyphen52Diio96TB2On-qFWa1oZeIoQWWrNvYG5fFXuovwjE_w5_8M16A4yoXSYN_TfNnGD-66A5Nyzmos/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>


Realice estos cambios:

6 Cambiar el texto que esta marcado de color amarillo del código, por la dirección de su blog de blogger.

Por ejemplo mi dirección es http://ayudadeblogger.com/, lo que necesita hacer es cambiar por su dirección de blog.

7 Dele un nombre a su widget y guárdelo, dirija a su blog y mire sus cambios.

¿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

11 comentarios:

  1. Muy bueno tu web me ayudo bastante estoy aplicando mucho de tus consejos en mi blog el cual te invito a visitar y si me pudieras dar algún consejo: http://peliculaestrenoonline.blogspot.com

    Se que esta pregunta no es sobre este tema pero me gustaría mucho que me ayudaras a como hacer el fondo de las entradas opacos casi transparente, ¡no transparente! por que eso es fácil digo opaco que se pueda ver el fondo del blog y así mismo del los gadget muchas gracias y que sigan los exitos

    ResponderEliminar
    Respuestas
    1. Hola, he visto tu blog, hay que poner algunos estilos para que se de lo que tu dices. En el transcurso de la semana publicare una tema sobre lo que tu dices.
      Saludos.

      Eliminar
  2. Respuestas
    1. Hola, puedes ver su demostracion en este blog, el widget funciona perfectamente. Tal vez alguna parte del codigo borraste por error, vuelve a cargar el codigo en tu widget y veras que funciona.
      Saludos.

      Eliminar
  3. donde modifico el numero de entradas que saldran el cuadro de ultimas publicaiones

    ResponderEliminar
  4. tengo un problema con la plantilla que no me deja colocar mas widgets

    ResponderEliminar
  5. hice paso a paso todo lo que lei en la descripcion y aun asi no me sale nada en el blog

    ResponderEliminar
  6. amigo gran blog de ayuda un pregunta como haces el HEADLINES donde sale el titulo de texto como una noticia con la hora de publicacion y la otra es con el widget de Widget de Post Recientes slide te graddeceria

    Saludos

    ResponderEliminar
  7. Saludos, una preguta ¿ Como puedo hacer para que en vez de los post recientes me muestre los post que hay en una etiqueta determinada? (vi el post de las etiquetas pero en ese no salen las pestañas de navegacion que tiene este)

    ResponderEliminar
    Respuestas
    1. Hola Souji-21, con respecto a su pregunta, en futuras publicaciones se tomara en cuenta su solicitud y así usted pueda disfrutar de los widgets para Blogger.

      Saludos.

      Eliminar
  8. Buen trabajo, me sirvió de mucho :)

    ResponderEliminar