Widget caja publicaciones recientes para Blogger – Video tutorial
Un widget desplegable que muestren las publicaciones recientes de su blog al momento de desplazarse hacia abajo del blog, de una forma atractiva y muy interesante para los usuarios que visitan sus blogs de Blogger.¿Cómo funciona?
Cuando un usuario visita su blog y se desplaza hacia abajo para seguir leyendo el contenido, automáticamente se desplegara una caja incluyendo una pequeña imagen, el titulo de la entrada y la fecha de publicación.
Tendrá más vistas en su blog gracias a este nuevo widget caja de publicaciones recientes slider para Blogger
¿Cómo se va a insertar el código?
Se ingresara los códigos en el HTML de la plantilla y el ultimo código con el cual hará que funcione, se tendrá que insertar en un widget HTML/Javascript y realizar algunos cambios
La instalación de este widget caja de publicaciones recientes slider es fácil, no tendrá ninguna complicación alguna, solo habrá que seguir las instrucciones de este tutorial creado para usuarios de Blogger.com
A continuación puede ver su demostración en el siguiente blog
Nota importante:
Se recomienda antes de ejecutar cualquier tutorial que se encuentra en esta página web, realizar una copia de seguridad de su plantilla, o a su vez primero crear un nuevo blog de ejemplos para que pueda efectuar cualquier tutorial. Ayudadeblogger.com no se hace responsable por el mal uso del código en su plantilla. Para más detalles visite:
Video Tutorial
Empezamos
1 Ir a Blogger
2 Un clic en “Plantilla”
3 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
4 Busque el siguiente código
<head>
Inserte el siguiente código justo abajo del código que encontró
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/> <script src='//code.jquery.com/jquery-1.11.3.min.js'/>
5 Busque el siguiente código
]]></b:skin>
Inserte los siguientes estilos justo arriba del código que encontró
/* ---- Style Post ----- */
#related-adb {
width: 350px;
overflow: hidden;
height: 200px;
position: fixed;
bottom: 20px;
right: 20px;
background: #fff;
box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29);
transition: all 0.5s;
}
#related-adb .header h2 {
font-size: 12px;
margin: 0;
}
#related-adb .header {
padding: 10px 15px;
color: #fff;
background: #FF8800;
}
#related-adb .adb {
position: absolute;
top: 10px;
right: 15px;
}
#related-adb .item {
padding: 15px;
width: 320px;
float: left;
}
#related-adb .list {
height: 120px;
overflow: hidden;
width: 600px;
transition: all 0.5s;
}
#related-adb .ayudadeblogger img {
height: 100px;
float: left;
width: 50%;
margin-right: 10px;
}
#related-adb .header a {
color: #fff;
}
#related-adb .info {
font-size: 12px;
font-family: Oswald,arial,Georgia,serif;
color: #000000;
text-decoration: none;
margin-left: 0;
margin-right: 0;
}
#related-adb .navigation a {
float: left;
border: 1px solid rgba(0, 0, 0, 0.32);
margin-left: 10px;
font-size: 10px;
width: 10px;
padding: 3px;
}
#related-adb .navigation {
position: absolute;
width: 60px;
right: 20px;
bottom: 20px;
}
.relatedshow {
position: fixed;
bottom: 190px;
right: -50px;
transition: all 0.5s;
}
.relatedshow a {
color: #fff;
background: #FF8800;
padding: 7px 15px;
box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29);
}
6 Un clic en Guardar plantilla
7 Un clic en Diseño
8 Un clic en Añadir un gadget
9 Un clic en el widget HTML/Javascript, ábrelo
Ingrese las siguientes líneas de código
<script type='text/javascript'>
/* Cambie la dirección URL */
!function(){var a={homepage:" http://www.ayudadeblogger.com ",title:" Publicaciones recientes ",
post: 6 ,
date:!0,
scr:500,
showcredit:!0};if("object"==typeof relatedbox)for(var b in relatedbox)a[b]=relatedbox[b];var c='<div class="relatedshow" style="right: 0px;"><a href="#"><i class="fa fa-plus"></i></a></div><div id="related-adb" style="transform: translateX(400px);"><div class="header"><h2>'+a.title+'</h2><div class="adb"><a href="#" class="close"><i class="fa fa-times"></i></a></div></div><div class="list">',d="object"==typeof labelArray&&labelArray.length?"/-/"+shuffle(labelArray)[0]:"",f=0;$.ajax({type:"GET",url:a.homepage+"/feeds/posts/summary"+d+"?max-results="+a.post+"&alt=json-in-script",async:!0,contentType:"application/json",dataType:"jsonp",success:function(b){var d=b.feed.entry;if(d){for(var e=0;e<d.length;e++){for(var g,h=d[e],i=0;i<h.link.length;i++)if("alternate"==h.link[i].rel){var j=h.link[i].href;break}g=void 0!==h.media$thumbnail?h.media$thumbnail.url.replace("s72-c","w"+f+"-h400-c"):"https://3.bp.blogspot.com/-TGWhhhk5Ebo/V_QxTFme1JI/AAAAAAAABIM/ZXIL38U-HsEg34WWYFAliMNuqI3sqlFRwCLcB/s1600/imagen-no-encontrada.jpg";var k=h.title.$t,l=a.date?h.published.$t.substr(0,10):"";c+='<div class="item"><div class="ayudadeblogger"><img src="'+g+'"></div><div class="info"><h3><a href="'+j+'">'+k+"</a></h3><span>"+l+"</span></div></div>"}var m=a.showcredit?'':"";c+='</div><div class="navigation"><div class="left"><a href="#"><i class="fa fa-chevron-left" style="color:red"></i></a></div><div class="right"><a href="#"><i class="fa fa-chevron-right" style="color:red"></i></a></div></div>'+m}$("body").append(c),$("#related-adb").each(function(){function i(){$("#related-adb").css({transform:"translateX(400px)"}),$(".relatedshow").css("right",0)}function j(){$("#related-adb").css({transform:"translateX(0)"}),$(".relatedshow").css("right","-50px")}for(var b=$(this).find(".list"),c=$(this).find(".left a"),d=$(this).find(".right a"),e=0,f=0,g=!0,h=1;h<$(this).find(".item").length;h++)e+=$(this).find(".item").outerWidth();b.width(e+$(this).find(".item").outerWidth()),c.click(function(a){a.preventDefault(),0==f?f=-e:f+=350,b.css("transform","translateX("+f+"px)")}),d.click(function(a){a.preventDefault(),f==-e?f=0:f-=350,b.css("transform","translateX("+f+"px)")}),$(".relatedshow").click(function(a){a.preventDefault(),j()}),$(this).find(".close").click(function(a){a.preventDefault(),i(),g=!1}),$(window).scroll(function(){var b=$(window).scrollTop();b>a.scr&&g?j():b<a.scr&&g&&i()})})}})}();
</script>
Realice el siguiente cambio:
Elimine la dirección URL que está marcada de color azul, remplácelo por la dirección URL de su blog de Blogger
Si necesita aumentar o disminuir las entradas recientes, puede hacerlo cambiando el número 6 que está marcado de color rojo, por el número que guste quiera.
Eso es todo, un clic en Guardar, ubique el widget caja de publicaciones recientes slider justo debajo del Gadget Entradas del blog
¡Fácil verdad!
¿Necesita ayuda?
Cualquier pregunta no duden en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios