­
­

Ultimas entradas

ULTIMAS ENTRADAS

thumb

PÁGINA DE BIENVENIDA

thumb

ICONOS HOVER A BLANCO Y NEGRO & VICEVERSA

ICONOS HOVER A BLANCO Y NEGRO & VICEVERSA . Utilizando los filtros del CSS3 podemos obtener este efecto, en el que al pasar el cursor por cualquier imagen, esta cambia de color a...
thumb

BOTONES PARA BLOGGER HECHOS CON HTML

BOTONES PARA BLOGGER HECHOS CON HTML . Esta clase de botones grises hechos con HTML son muy utiles, porque los puedes poner donde quieras en tu web sin complicaciones.  Basta ...
thumb

PRESENTACIÓN DE IMÁGENES APILADAS EN BLOGGER

PRESENTACIÓN DE IMÁGENES APILADAS EN BLOGGER . Cuando queremos mostrar una galería de imagenes en nuestro blog, pienso que la manera estética de hacerla es fundamental.  S...
thumb

MENÚ DESPLEGABLE CON IMÁGENES PARA BLOGGER

MENÚ DESPLEGABLE CON IMÁGENES PARA BLOGGER . Es tiempo de compartir con todos los bloggeros del mundo un fabuloso menú desplegable para blogger con imágenes. Este truco para blo...
thumb

AÑADIR REFLEJO A LAS IMÁGENES CON UN SCRIPT

AÑADIR REFLEJO A LAS IMÁGENES CON UN SCRIPT . Ahora podemos hacer que las imagenes se vean como reflejadas en un espejo sin necesidad de utilizar ningún editor ni photoshop. Solamente...
thumb

PERSONALIZAR LA BARRA DE DESPLAZAMIENTO DE MÍ BLOG

PERSONALIZAR LA BARRA DE DESPLAZAMIENTO DE MÍ BLOG.   jScrollPane : Es un script de jQuery que permite cambiar la barra de desplazamiento del blog, es decir, el scrollbar del...
thumb

IMÁGENES QUE SE DESCOMPONEN CON BUSTIFY

IMÁGENES QUE SE DESCOMPONEN CON BUSTIFY. Bustify es un Javascript creado por Matthew Lein que 'rompe' cualquier imagen en una serie de cuadros. Es decir, que al pasar el cu...
thumb

MENÚ LATERAL DESLIZANTE PARA REDES SOCIALES

MENÚ LATERAL DESLIZANTE PARA REDES SOCIALES . Este es un menú para nuestro blog que tiene la particularidad de no sólo ser lateral sino también tener un pequeño efecto deslizante. Se o...
thumb

MENÚ HORIZONTAL CON EFECTO ZOOM

MENÚ HORIZONTAL CON EFECTO ZOOM. ul.arrowunderline{ list-style-type:none; margin:0; padding:0; text-align:center; font-size:16px; } ul.arrowunderline li{ display:inline; margin-right...
thumb

UN MENÚ HORIZONTAL PARA BLOGGER

UN MENÚ HORIZONTAL PARA BLOGGER. div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhraOdP-dmjBGOonjA3l62yhisiSSy2p-HXxFy7uX2g9zKP2Yjp5P...
thumb

MENÚ DESPLEGBLE RESPONSIVE EN MI BLOG DE BLOGGER

MENÚ DESPLEGBLE RESPONSIVE EN MI BLOG DE BLOGGER . ¿Crear un menú desplegable Responsive en mi blog? ¿Menú desplegable gratis totalmente Responsive se muestre correctamente en un tel...
thumb

MENÚ DESPLEGABLE PARA BLOGGER V3

MENÚ DESPLEGABLE PARA BLOGGER V3 . Insertar de forma fácil y sencilla un menú desplegable para mi blog de Blogger? Con tres simples pasos  instalaras un Menú desplegable en su bl...
thumb

MENÚ DESPLEGABLE PARA BLOGGER MEGA MENÚ V2

MENÚ DESPLEGABLE PARA BLOGGER MEGA MENÚ V2 . Como siempre "La Pagina de los Widgets" te presenta temas interesantes para que lo utilices en tu blog de blogger completame...
thumb

MENÚ SENCILLO PARA BLOGGER

MENÚ SENCILLO PARA BLOGGER . Este menu gris efecto 'tab' es simple, pero a la vez efectivo y elegante. Si quieres ponerlo en tu sitio, coloca este codigo en la parte CSS de tu we...
thumb

MENÚ VERTICAL DESPLEGABLE AZUL PARA BLOGGER

MENÚ VERTICAL DESPLEGABLE AZUL PARA BLOGGER . Tras un largo periplo de widgets y gadgets para Blogger vuelvo de nuevo con un menú vertical desplegable y totalmente responsive con...
thumb

MENÚ VERTICAL PARA BLOGGER HECHO CON CSS

MENÚ VERTICAL`PARA BLOGGER HECHO CON CSS. En el día de hoy vamos a ver como agregar a un sitio web un genial menú (ya que este truco no solo sirve para los blogs de Blogger sino ta...
thumb

MENÚ HORIZONTAL CON SUBMENÚES Y UN EFECTO DE BALANCEO

MENÚ HORIZONTAL CON SUBMENÚES Y UN EFECTO DE BALANCEO . Este es un menú horizontal con submenúes y un efecto de balanceo para nuestro blog de Blogger. Fácil de colocar, tan solo un códig...
thumb

MENÚ VERTICAL PARA LA SIDEBAR DE NUESTRO BLOG CON HOVER ZOOM-OUT

MENÚ VERTICAL PARA LA SIDEBAR DE NUESTRO BLOG CON HOVER ZOOM-OUT . TEXTO ENLACE TEXTO ENLACE TEXTO ENLACE TEXTO ENLACE TEXTO ENLACE .menuzoomout ul { width: 100%; m...
thumb

MENÚ TIPO ACORDEÓN ESTILO GALERÍA DE IMÁGENES

MENÚ TIPO ACORDEÓN TIPO GALERÍA DE IMÁGENES . Uno de nuestros lectores nos preguntaba cómo se hacía un menú de estos que tienen un estilo tipo acordeón. Este específicamente fue crea...
blogger

WIDGET DE ENTRADAS RECIENTES ESTILO MATERIAL DESIGN

By Blogs Famag - domingo, diciembre 30, 2018

WIDGET DE ENTRADAS RECIENTES ESTILO MATERIAL DESIGN .



En este nuevo tutorial de LA PAGINA DE LOS WIDGETS 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.

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.


Empezamos

1 Ir a Blogger.com

2 Un clic en Diseño



3 Un clic en Añadir un gadget



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




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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4IOnuXZ2EKmDbLbN0J-ezrkvsR-2pgqQWXiiuwXqhlfbmfWYjtcOnq_qsLHrWvYsVI3Xz_U2WnuQXNxI-qpBMufT_nF-Yr931xqnSBWSE_hEiMWRwTJd8n8xc6AJSNYreP7yqRbBzo4Y/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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRJVGRw0xvCirGGBjPqHnOLUyQDPmHEkDM2YuNSYQaS1LvSfi-SQ7_IWirPOw5X9Y1g1fT084CRV_Nf-qbZwOImNOX77GpvD_FyfJ8ZWu_bvJyXtcZcAuGDd0kz20MnqczRKdYJ5mEKG0/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





  Fecha de la Publicación; 30-12-2018

  Fuente;  ayudadeblogger

  Publicado por;                                                          





















  • Share:

You Might Also Like

VENTANA EMERGENTE CON UN MENSAJE A...

GUARDAR LOS POST EN PDF

PÁGINA DE BIENVENIDA

0 comentarios