Mostrando entradas con la etiqueta JSON. Mostrar todas las entradas

Sistema de paginación para blogger

Las paginaciones en blogger ayudan a la experiencia de los lectores dentro de determinado sitio, más aun si este contiene una gran cantidad de publicaciones, la navegación se hace más cómoda y más ordenada.
Las ventajas son evidentes a la hora de aplicarlo, el Script que usaremos es bastante liviano apenas 4kb y está basado en Json, este hará la función de leer los feeds de nuestro sitio para hacer la ordenación y el sistema de paginación.

Para aplícalo lo que haremos es desgargar este pequeño archivo lo copiamos y vamos a la plantilla a ubicar esta línea </body>, y justo arriba lo pegamos.
Una vez hecho esto guardamos la plantilla y nos dirigimos a diseño y agregamos un HTML-JavaScript en el cual pegaremos el siguiente cogido que contiene los estilos de la paginación, y los ajustes, es recomendable ubicarlo luego debajo de las entradas.

Ajustes:
var numshowpage=5;
Es la cantidad de páginas que mostrará la numeración.
var postperpage ='6';
Es la cantidad entradas que se mostrará en cada página (importante debe ser la misma cantidad que se establezca en los ajustes del blog, en cuanto a la cantidad de entradas a mostrar en el home)
var upPageWord="«";
Flechas de navegación, esto pueden cambiarlo si gustan por algo de su preferencia.
var downPageWord="»";
Con esto ya tenemos nuestro sistema de paginación en Blogger, más fácil imposible.

Widgets de imágenes de últimas entradas con efecto

Vamos a implementar un widgets simple solo de imágenes de las últimas publicaciones con un efecto hover de bordes redondeados, la función es bastante simple, usando un script de JSON que leerá los feeds de nuestro sitio y hará el resumen del mismo, lo que haremos es modificar un poco los estilos para hacer una pequeña galería de solo la imágenes sin resumen de texto, para eso vamos a hacer los siguiente:

Vamos a diseño y agregamos un JavaScript HTML y pegamos el siguiente código:
<style>
#bp_recent {
width:300px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}
#bp_recent img {
width: 70px;
height: auto;
border: 3px solid #5b6569;
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
opacity: 1.0;
-webkit-box-shadow: 0px 0px 9px -1px rgba(3,142,222,1);
-moz-box-shadow: 0px 0px 9px -1px rgba(3,142,222,1);
box-shadow: 0px 0px 9px -1px rgba(3,142,222,1);
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
#bp_recent img:hover{
opacity: 0.5;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s
}
#bp_recent a{
color: #fff;
font-size: 15px;
text-transformation: uppercase;
margin-bottom: 5px!important;
}
#bp_recent a:hover {
text-decoration: underline;
}
</style> <div id='bp_recent'></div>
<script type="text/javascript" src="https://sites.google.com/site/escribiendotrazos/JsEntradasEscribiendoT.txt"></script>
<script style='text/javascript'>
var numberOfPosts = 9;
var showPostDate = false;
var showSummary = false;
var summaryLength = 0;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Leer más';
</script>
<script src=' http://lapizycafe.blogspot.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Modificaciones: reemplazar el nombre por el de su sitio, el numero 9 marcado en rojo es la cantidad de imágenes de post, todos los estilos se pueden modificar, el resultado sería algo como esto.

Gadget de entradas recientes simple

Gadget de entradas recientes simple para blogger usando JSON, la función es sencilla lo que hace el Script es leer los últimos artículos del sitio haciendo este pequeño resumen, para implementarlo lo que hay que hacer es ir a diseño agregar un JavaScript HTML y pegar todo este código:

<div id="recientes">
<script src="https://sites.google.com/site/escribiendotrazos/JSescribiendoT.txt">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://lapizycafe.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>
</div>
<style type="text/css">
#recientes a {
color: #3c9df5;
font-size: 15px;
font-family: "Josefin Sans",sans-serif;
}
#recientes {
color: #777;
font-size: 11px;
padding: 5px;
border: 2px solid #47657f;
border-radius: 5px;
background: #293036;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2CU92QndK3VFpzu-n_t0SjRlFusrfQJ6Pd5SVG49d4UNy2TQbnfQ-usUDSALBenMY2RFkqwsW30oBA741FG0gK2z6HU1lKHoFux1McaHqA0cjyhL1FEnQKKtOuVo0hPk5swPyt6hjy0X/s1600/fonox.jpg");
}
</style>

Hay que tener en cuenta el nombre de su sitio, sustituir lo resaltado y agregar su nombre todos los estilos se puede modificar al gusto, el resultado sería algo como esto: