Instalar un Slideshow para Blogger con un solo widget


Slideshow Blogger - En esta nueva presentación de Ayudadeblogger.com les presentare un nuevo Slideshow para que lo utilicen en su blog de blogger gratis. En este nuevo Slideshow para Blogger no necesitaran instalarlo en el Editor HTML de su plantilla de Blogger, solo copiaran un simple código en su pagina de Diseño en un widget HTML/Javascript, luego tendrá que realizar un cambio, y con esto funcionara su Slideshow para Blogger. A este Slideshow para Blogger se lo ha hecho tan simple y sencillo para que no tengan ningún problema al momento de instarlo en su blog de Blogger. El Slideshow esta hecho en jQuery con efectos de transición, los efectos de transición que les voy a presentar en este Slideshow se mostrara en las imágenes las cuales realizan un efecto único.

Nota: este truco de Blogger funciona solo en el protocolo HTTP y no en HTTPS

Anteriormente publique algunos Slideshow para Blogger de los cuales les dejo los enlaces a continuación:



Video Tutorial 


A continuación mire su demostración en mi blog de demos

Instrucciones

Un clic en Diseño


Un clic en "Añadir un gadget"


Seleccione el widget que dice HTML/Javascript, abralo


Ingrese las siguientes lineas de código en su interior


<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://ayudadeblogger.com",
 MaxPost: 7,
 cmtext: "Comentarios",
 MonthNames : ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],
 pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
 NoCmtext : "Puestos para comentarios",
 imageSize :500,
 SumChars : 100,
 tagName:false,
 width: 500,
 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://cdn.rawgit.com/grupodelecluse/css-js-widget/7810a072/slideshow-autocoin-js.js" type="text/javascript"></script>


Realiza estos cambios:

Si ya utilizas un jQuery en tu blog de Blogger ya no tendrás que poner en este código el script http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js, y si no utilizas ningún jQuery entonces pon todo el código tal como lo presente.

Debes borrar el link http://ayudadeblogger.com  y poner la dirección URL de tu blog de Blogger.

Si quieres hacer más grande el Slideshow, solo basta con cambiar el número 500 que es el ancho y el número 250 que es su altura:

Ejemplo

width: 500,
height: 250,

Eso es todo, un clic en “Guardar” y ubícalo debajo de la cabecera principal de tu blog de Blogger.

Fácil verdad, ahora ya tienes un nuevo Slideshow con un solo widget.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé.




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: