Como insertar un slideshow en el sidebar de Blogger
El objetivo de los bloggers es mostrar
los mejores temas de interés y así llegar a tener éxito con su blog, para tener más tráfico web hacia su blog, tienen que tener algunos trucos bajo la manga,
uno de ellos es tener los mejores trucos de Widgets para Blogger, de entre
ellos voy a explicar cómo insertar un slideshow en el sidebar de su blog de
Blogger con un solo código y en un solo widget. La inserción del código es muy
fácil de realizarlo, tendrán que copiar un código y ponerlo en un widget y
luego ubicarlo en su sidebar de Blogger, no le causara ningún error en la
estructura de su blog, tiene una carga ligera al momento de cargarse. Este
nuevo slideshow para Blogger funciona perfectamente en todos los navegadores
web.
Además, si necesitan ver algunos diseños
de Slideshow, les dejo algunos post que publique
A continuación mire su demostración en
mi blog de demos, el slideshow está ubicado al final del sidebar
Les gusto verdad!
Vamos a trabajar
1 Ira Blogger
2 Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript”
ábrelo
5 Inserta las siguientes líneas 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://plantilla-escritorio.blogspot.com/",
MaxPost: 10,
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 : "comentarios",
imageSize :300,
SumChars : 0,
tagName:false,
width: 300,
height: 170,
spw: 5,
sph: 5,
delay: 3000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 300,
effect: '',
navigation: true,
links : true,
hoverPause: true,
prevText: 'Anterior',
nextText: 'Siguiente'
};
</script>
<script
src="https://dl.dropboxusercontent.com/s/nx3y46w3wr3oovl/autocoin.js"
type="text/javascript"></script>
|
Nota: si ya utilizas un script en tu
blog, borra esta línea de código http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js, y si no
utilizas ningún script inserta todo el código tal como está.
Realiza este cambio:
He marcado de color azul la URL en la
cual ustedes tendrán que borrarlo http://plantilla-escritorio.blogspot.com/ y
cambiarlo por la dirección URL de su blog de Blogger o página web.
Eso es todo, ahora dale un clic en “Guardar”
y ubica tu nuevo Slideshow en el sidebar de tu blog de Blogger, en el cual les
mostrara sus 10 últimas publicaciones.
Fácil verdad!
Recuerda suscribirte y así recibirás mis
nuevas actualizaciones diarias directamente en tu correo electrónico
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Luis, agradecido por los aportes y deseando consultarte. Las imagenes de los post tendrian q tener alguna medida en especial ya q el widget insertado no me muestra alguna de imagenes de los post. Saludos
ResponderEliminarLas imaganes se mostraran perfectamente si las adecuas a una dimension de 300x170 pixeles
EliminarSaludos.
POR QUE CUANDO AGREGO LAS LINEAS DEL CODIGO ME DESCONFIGURA LA PLANTILLA, LA COLUMNA LATERAL LA ENVIA HASTA ABAJO, YA LE QUITE EL http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js Y NADA, QUE ESTA MAL...
ResponderEliminarAdicione "center" que a lateral volta.
EliminarEx.: < center >Início e Fim da Tag< /center > "sem os espaços"<center....
Veja como ficou: www.vinnypublicidade.com.br
Buenas noches. Está excelente este slide. El único problema es que me muestra siempre una sola imagen, la de una de las entradas. Sí cambia los títulos y la descripción, pero la imagen es la misma, no aparece la imagen de la otra entrada.
ResponderEliminarhola !muy bueno el unico inconveniente que tengo es que las imagenes se ven en mosaico y no expandidas. hay forma de arreglarlo?saludos
ResponderEliminaramigo lo quiero colocar en mi plantilla http://que-buena-imagen.blogspot.com/ y no agarra bien no se cual sera el problema, mi plantilla ya tiene un ajax 1.5.1 y le quite el del wadgeet y igual no me sirve ayudame
ResponderEliminarHola Luis, haces un muy buen trabajo en estos turoriales. He hecho mucho gracias a tus concejos, pero quería ver como puedo mejorar la calidad de carga de mi pagina, si tu me puedes dar unos consejos te etaria muy agradecido, esta es mi pagina: http://naciongamerschile.blogspot.com/ saludos...
ResponderEliminar