Widget entradas recientes estilo Material design


En este nuevo tutorial de Ayudadeblogger aprenderán a insertar un widget el cual mostrara las entradas recientes de su blog de Blogger con un estilo único como lo es Material design de Google, la inserción del código es muy simple de realizarlo.

¿Qué cambios tendré que realizar?

Lo que vamos hacer es ingresar un código en un widget HTML/javascript, luego tendrá que cambiar la dirección URL por la dirección URL de su blog de Blogger.

Además podrá aumentar o disminuir el número de entradas recientes que quiera mostrara, este widget de entradas recientes tiene tres botones, los cuales sirve para ir hacia atrás, hacia adelante y un botón de inicio para regresar a sus primeras publicaciones.

Widget entradas recientes estilo Material design

A continuación pueden ver su demostración en el siguiente blog, el widget de entradas recientes estilo Material design, está ubicado en el sidebar

Video tutorial


Empezamos

1 Ir a Blogger.com

2 Un clic en Diseño

Widget entradas recientes estilo Material design

3 Un clic en Añadir un gadget

Widget entradas recientes estilo Material design

4 Busca el widget que dice HTML/Javscript, ábrelo

Widget entradas recientes estilo Material design

5 Ingrese las siguientes líneas de código

<style type='text/css'>
#grupodelecluse-code{border:1px solid #585858;width:100%;margin:0 auto;}
#ayudadeblogger{margin:0px; padding: 3px 2px 3px 2px !important;}
.adb-card{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.adb-card img{background:#3f51b5;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border-radius: 100%;}
.adb-card h6,.adb-card h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.adb-card:hover{background-color:#c3c3c3}
.adb-card p{font:14px;text-align:justify;color:#000000;line-height:14px;margin:5px 0}
#adb-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#e91e63 url(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#cajanavegacion{border:0px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px;     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);}
#cajanavegacion:hover{box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);}
#cajanavegacion a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:12px 10px}
#cajanavegacion span{padding:12px 10px}
#cajanavegacion .next{float:right; border-radius: 0px;
    background: #dc033d; box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);}
#cajanavegacion .previous{float:left;border-radius: 0px;
    background: #dc033d; box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);}
#cajanavegacion .home{text-align:center;     background: teal; font-size: 24px !important; box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);}
#cajanavegacion a:hover,#cajanavegacion span.noactived{color:transparant!important}



.adb-card img, .adb-card {
box-shadow: 0 3px 10px rgba(0,0,0,.23), 0 3px 10px rgba(0,0,0,.16);
}
.adb-card img:hover, .adb-card:hover {
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);
}
.previous:hover, .next:hover{
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
}
.card {
    position: relative;
    margin: 0.5rem 0 1rem 0;
    background-color: #fff;
    transition: box-shadow .25s;
    border-radius: 2px;
background:#EEEEEE;
padding: 5px 7px 5px 6px !important;
}
 .card {
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.card:hover{box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);}

</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 9;
var startfeed = 0;
var urlblog = "http://www.ecuador-turistico.com/";
var charac = 60;
var urlprevious, urlnext;

function ayudadebloggerfeed(adbwidget,adbgroup){
var showfeed = adbwidget.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,adbgroup-1);
return showfeed;
}
function adbayudadeblogger(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='adb-card'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + ayudadebloggerfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("ayudadeblogger").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668;</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; </span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>&#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>&#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>&#x1f3e0;</a>";
document.getElementById("cajanavegacion").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=adbayudadeblogger";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("ayudadeblogger").innerHTML = "<div id='adb-loading'></div>";
document.getElementById("cajanavegacion").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var ayudadeblogger = document.createElement('script');
ayudadeblogger.setAttribute('type', 'text/javascript');
ayudadeblogger.setAttribute('src', archievefeed);
ayudadeblogger.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(ayudadeblogger);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div class="card">
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:40px; box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);"></div>
<div id="ayudadeblogger"></div>
<div id="cajanavegacion"></div></div>
<!--End ayudadeblogger.com-->

Realiza este cambio:

Elimina la dirección URL que está marcada de color azul, remplázalo por la dirección URL de su blog de Blogger

Aumentar o disminuir las entradas recientes:

Encuentre la siguiente línea de código

var numfeed = 9;

Cambie el número 9 por otro número

6 Un clic en Guardar

Widget entradas recientes estilo Material design

Eso es todo, ahora ubique su widget de entradas recientes estilo Material design en el sidebar de su blog

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Enviar por correo
  1. ya lo instale y esta perfecto ,,, pero como quito el que tenia antes? no es html sino entradas del blog, y cuando lo edito no sale la opcion de eliminar... buenas noches gracias

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, no comprendo su pregunta que es lo que necesita eliminar por favor explique un poco mas, ademas remita la dirección URL de su blog y así poder ver lo que usted solicita

      Saludos.

      Eliminar
  2. Buen dia, es posible quitar las fechas de los comentarios. ? Gracias por sus aportes.

    ResponderEliminar
  3. Hola muchisimas Gracias me podrias explicar como cambiarle el color y Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Wilson, gracias por escribir, con respecto a su pregunta puede buscar el siguiente código de color en el CSS

      background: teal;

      -Remplace teal por un código de color

      - Remplace #dc033d por un código de color

      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 (9) Amp Html Premium (1) 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