Slider para Blogger

Si hay una cosa que recriminar a Blogger es lo difícil que resulta configurar su página de inicio de una forma diferente, por su propia estructura estamos abocados a mostrar una cantidad de post, resumidos o no, junto con una sidebar y alguna otra configuración horizontal con widget. Wordpress es mucho más manejable en ese sentido, permite crear páginas de inicio mucho más atractivas visualmente.

Con los cambios que últimamente estoy realizando, me propuse modificar esto y hacer que los posts de la página de inicio no fueran como una lista interminable y aparecieran en un slider.

Como siempre pensé en utilizar jQuery para ello y encontré un pequeño plugin que hacia la función que quería. Para conseguirlo deberéis bajaros este fichero e insertar antes de </body> lo siguiente

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Blog1 {
margin:10px auto 40px;
width:95%;
height:230px;
overflow:hidden;
}
.blog-posts.hfeed div{
width:340px;
height:230px;
position:relative;
float:left;
margin: 10px;
padding: 0 5px;
}
.next {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNe7JdaEmExE8FG700xiERPfpKiP0nYN0wdNkYZ73fKu0mwTIfhV9rASV0ZURyk4CYUPb-WM_v65gB0Ee1wU1gZBN6LmnZW_cve0DPTwNh6ghDd0Wj0LFOY_Lcm7Ka5mjXQuCnu3ioG0/s1600/prev.png) center left no-repeat;
margin-top: -210px;
width: 40px;
height: 230px;
position: absolute;
opacity: 0.7;
}
.prev {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAziOxh9T9g1_etVXzXqiQzIb5Tn5soWhAFGPbPdcfZk0vfHleGVK07zEpPZbCOnPE9T0Ny_TR3jCl3eVdMcrdgl1CqhJgu7UbBOYJqyznEeXtmpyxgEEKfJXFLV1_ILpSh3jNTHRiOu0/s1600/next.png) center no-repeat;
margin-top: -210px;
width: 40px;
height: 230px;
position: absolute;
opacity: 0.7;
right: 10px;
}
</style>
<script src='URL DE ALOJAMIENTO DEL FICHERO JS'/>

</b:if>

Varias consideraciones a tener en cuenta:

.- No recomiendo que se instale a usuarios pocos avanzados en la codificación Blogger, no me hago responsable de lo que pueda pasar. El código se proporciona tal cual.

.- Hay que tener la librería jQuery implementada.

.- Las entradas en el home deben tener el formato resumido, ya sea usando el formato snippet que proporciona Blogger (recomiendo esta opción para entradas resumidas) o cualquier otra forma.

.- Las dos imágenes de la flechas que se usan en el slider copiarlas y subirlas a vuestro propio alojamiento, no garantizo mantenerlas.

.- El código CSS proporcionado es solo indicativo, deberá ajustarse según vuestras preferencias.

.- El fichero js, dependiendo de las dimensiones de vuestro blog también debe ajustarse, editándolo veréis $('.blog-posts.hfeed').animate({marginLeft:'-=1120'},1000,function(){ ... y $('.blog-posts.hfeed').animate({marginLeft:'+=1120'},1000,function(){ . Las dos cifras en rojo indican el desplazamiento hacia la derecha y la izquierda. Ahí podéis ajustar ese desplazamiento para que quede bien. Subirlo a vuestra web de alojamiento e insertarlo donde pone URL DE ALOJAMIENTO DEL FICHERO JS

.- El número de entadas a mostrar se ajusta editando el widget Blog1 en el diseño de plantilla.

Creo que no se me olvidado nada, con este slider se nos abre la posibilidad de mejorar mucho el diseño de nuestras paginas de inicio...