CoinSlider Auto

En los blogs de actualidad donde las noticias o post se actualizan constantemente y tocan diversos topicos, resulta mucho más conveniente contar con un slider que en lugar de mostrar siempre las mismas cuatro fotos que uno ha seleccionado, presente las correspondientes a los últimos post y si es con un pequeño resumen de los mismos mejor.
En el pasado he utilizado en mis templates algunos sliders que incluso permiten mostrar post del pasado y así lograr una segunda oportunidad de lectura a los mismos. Pero aquí les traigo uno bien sencillo que todos podemos instalar facilemente en cualquier lugar del blog, incluso al pie de esta entrada.

Se trata del Coinslider, que es un slider basado en jQuery con atractivos efectos de transición.
Los efectos  incluyen remolino, lluvia, recto, etc.
Debido a que no son tan complicados, la presentación de diapositivas sólo tiene un tamaño pequeño  (12KB).
Bueno, para aquellos de ustedes que quieran incluirlo en su blog pueden seguir los pasos que se presentan a continuación.

Si quieres ubicarlo en la parte media superior es posible que el sistema no te permita agregar elementos así que primero deberás hacer lo siguiente.

En el panel de control selecciona Plantillas y, a continuación,  clic en el código HTML Edit
A continuación, busca el código <b:section class='main' showaddelement='no'> id = 'main' y luego reemplaza showaddelement de tal manera  que quedará como este <b: section = clase 'main' id = 'main' showaddelement = 'yes '>

 Hacer clic en Guardar

Nota: Para facilitar la búsqueda presiona Ctrl + F en el teclado y escribe class='main' <b:section showaddelement='no'> id='main'.
 
Así permitirás la entrada de más elementos, incluído este slider, claro.

También puedes saltear este paso y colocar tu slider en cualquier otra ubicación adaptando los tamaños al espacio.

Si no haz hecho un salvado de tu plantilla previamente , ahora puede ser muy tarde ;)

 Ahora si, para agregar el gadget en HTML del CoinSlider sige las siguientes indicaciones:

En el panel de control selecciona Diseño / Diseño y clic en Añadir un gadget sobre el Espacio medio anterior al cuerpo de publicación del blog.

Después de eso, vamos hacia abajo para encontrar el código HTML / JavaScript y clic en el botón  Agregar .
 
A continuación, copiamos y pegamos el siguiente código:
 

<style scoped="" type="text/css"> #coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em} .coin-slider{overflow:hidden;zoom:1;position:relative} .coin-slider a{text-decoration:none;outline:none;border:none} .cs-buttons{font-size:0;padding:10px;float:left} .cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px} .cs-active{background-color:#B8C4CF;color:#FFFFFF} .cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)} a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important} .cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF} .cs-title strong{display:block;font-size:120%} .cs-title p{margin:0} .cs-title cite{font-size:90%} .cs-title strong,.cs-title cite,.cs-title p{padding:0 10px} .cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script type='text/javascript'> var AutoCoinConfig = { url_blog: "http://generacionopin.blogspot.com", MaxPost: 7, cmtext: "Comentarios", MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", NoCmtext : "No Hay Comentarios", imageSize :500, SumChars : 100, tagName:false, width: 900, height: 250, spw: 7, sph: 5, delay: 3000, sDelay: 30, opacity: 0.7, titleSpeed: 500, effect: '', navigation: true, links : true, hoverPause: true, prevText: 'prev', nextText: 'next' }; </script> <script src="https://ivyth.googlecode.com/svn/js/autocoin.min.js" type="text/javascript"></script>
Recuerda cambiar donde dice "generacionopin.blogspot.com.ar" por la dirección de tu blog.

Como siempre te recomiendo guardar el archivo autocoin.min.js para no depender del servidor de ivyth.

La cosa sin adaptarla a nuevas dimensiones o colores se vería así:


Lo vimos en : http://mkr-site.blogspot.com

Listo. Que lo disfrutes con suerte.