MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Slideshow manual para Blogger

Como crear un Slideshow manual para mi blog de Blogger


Instrucciones de instalación:

1-- Ir a Blogger

2--Un clic en “Plantilla

En este punto deberás presionar la tecla “Control” de su teclado junto con la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor
Como crear un Slideshow manual para mi blog de Blogger

3-- Busque el siguiente código: </head>

4-- Inserta el siguiente código justo arriba del </head>
<a href="http://ayudadeblogger.com" target="_blank" title="Widgets para blogger"><img src="" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='https://dl.dropboxusercontent.com/s/q5xg9vc9qmhenkx/ayudadeblogger-jquery.js' type='text/javascript'></script><script src='https://dl.dropboxusercontent.com/s/ailbpndyse3u5ru/ayudadeblogger-jquery.jcarousel.js' type='text/javascript'></script><script src='https://dl.dropboxusercontent.com/s/trdnsrm5eu9vwie/ayudadeblogger-jquery-ui-1.6.2.js' type='text/javascript'></script>
<script type="text/javascript">jQuery(document).ready(function() {jQuery('#mycarousel').jcarousel({wrap:"both",scroll:2,animation:"slow"});function mycarousel_initCallback(carousel) {jQuery('#featured-next-button').bind('click', function() {carousel.next();return false;});
jQuery('#featured-prev-button').bind('click', function() {carousel.prev();return false;});jQuery('.button-nav span').bind('click', function() {carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));return false;});};jQuery('#feature-carousel').jcarousel({wrap:"both",scroll:1,auto:10,initCallback: mycarousel_initCallback,buttonNextHTML: null,buttonPrevHTML: null});
});</script>
<style type="text/css">.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;cursor:pointer;height:254px;right:20px;position:absolute;top:0;width:46px;}
.jcarousel-skin-tango .jcarousel-prev-horizontal {background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;cursor:pointer;height:254px;left:20px;position:absolute;top:0;width:46px;}
.jcarousel-container {position: relative;}.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}.jcarousel-next {z-index: 3;display: none;}.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#FFFFFF;padding:20px 0;}#news-slider img{border:none;height:254px;width:307px;}</style>

5 Ahora un clic en “Guardar plantilla

Como crear un Slideshow manual para mi blog de Blogger
6 Un clic en “Diseño

Como crear un Slideshow manual para mi blog de Blogger
- Un clic en “Añadir un gadget
Como crear un Slideshow manual para mi blog de Blogger

- Busca el widget que dice “HTML/javascript”, ábrelo 


Como crear un Slideshow manual para mi blog de Blogger
- Inserte el siguiente código en su interior.
<div id='news-slider'><ul class='jcarousel-skin-tango' id='mycarousel'><li><a href='LINK 1 del Articulo aqui'><img src='LINK de la imagen 1 aqui'/></a></li><li><a href='LINK 2 del Articulo aqui '><img src='LINK de la imagen 2 aqui '/></a></li><li><a href='LINK 3 del Articulo aqui '><img src='LINK de la imagen 3 aqui '/></a></li><li><a href='LINK 4 del Articulo aqui '><img src='LINK de la imagen 4 aqui '/></a></li><li><a href='LINK 5 del Articulo aqui '><img src='LINK de la imagen 5 aqui '/></a></li></ul></div>

Realiza estos cambios

Donde dice LINK 1 del Articulo aquí cámbialo por el link de cualquier articulo que quieras dar a conocer y donde dice LINK de la imagen 1 aqui bórralo e inserta el link de la imagen que quieras que se muestre en tu Slideshow y así realiza los cambios en todo el código.

Y si quieres aumentar mas imágenes en tu slideshow solo basta con insertar el siguiente código antes de </ul>
<li><a href='LINK 6 del Articulo aqui '><img src='LINK de la imagen 6 aqui '/></a></li>
Ubica tu nuevo Slideshow en el centro de tu blog para que sea visible

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者