add

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.

Widget caja publicaciones recientes para Blogger – Video tutorial

¿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

Widget caja publicaciones recientes para Blogger – Video tutorial

¿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

Widget caja publicaciones recientes para Blogger – Video tutorial

3 Un clic en “Editar HTML

Widget caja publicaciones recientes para Blogger – Video tutorial

Ahora se le abrirá el Editor HTML de su plantilla

Widget caja publicaciones recientes para Blogger – Video tutorial

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.

Widget caja publicaciones recientes para Blogger – Video tutorial

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'/>

Widget caja publicaciones recientes para Blogger – Video tutorial

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

Widget caja publicaciones recientes para Blogger – Video tutorial

7 Un clic en Diseño

Widget caja publicaciones recientes para Blogger – Video tutorial

8 Un clic en Añadir un gadget

Widget caja publicaciones recientes para Blogger – Video tutorial

9 Un clic en el widget HTML/Javascript, ábrelo

Widget caja publicaciones recientes para Blogger – Video tutorial

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

Widget caja publicaciones recientes para Blogger – Video tutorial

¡Fácil verdad!

¿Necesita ayuda?

Cualquier pregunta no duden en escribir

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin 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) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) 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 (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) 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 (10) Material Design Blogger (2) 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 (42) Plantillas Landing page para Blogger (3) 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 (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios