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(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/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 = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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.
Enviar por correo
  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

Discusión:

Ayudadeblogger.com
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) Amp en Blogger (7) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) 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 (19) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (4) 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 (11) Material Design Blogger (8) 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 (43) Plantillas Landing page para Blogger (4) 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 (74) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Copyright © - Ayudadeblogger.com

 

Inspiración

Tecnología

Contactos

+593 994589032