¿Cómo crear un Slideshow manual para mi blog de Blogger?


He publicado varios Slideshow para ser utilizados en cualquier blog de Blogger, ahora nos toca el turno de publicar un nuevo Slideshow para su uso en Blogger. Los Slideshow son muy apetecidos por muchos bloggeros y es por esto que voy a compartir con ustedes un nuevo Slideshow para que muestren las fotos y un link dirigido hacia la página que quieran mostrar.  El Slideshow es manual, ustedes podrán cargar las fotos que quieran mostrar sin límite alguno.

Tal vez te pueda interesar



A continuación mire su demostración


Instrucciones de instalación:

1 Un clic en Tema


2 Un clic en “Editar HTML


Ahora se le abrirá el Editor HTML de su plantilla


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.


3 Busque el siguiente código

</head>

4 Inserta el siguiente código justo arriba del </head>


<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 Un clic en “Guardar Tema”

Un clic en Diseño


Un clic en "Añadir un gadget"


Seleccione el widget que dice HTML/Javascript, abralo


Inserte el siguiente código en su interior.


<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='URL 1 del Articulo aqui'><img src='URL de la imagen 1 aqui'/></a></li>
<li><a href='URL 2 del Articulo aqui'><img src='URL de la imagen 2 aqui '/></a></li>
<li><a href='URL 3 del Articulo aqui'><img src='URL de la imagen 3 aqui '/></a></li>
<li><a href='URL 4 del Articulo aqui'><img src='URL de la imagen 4 aqui'/></a></li>
<li><a href='URL 5 del Articulo aqui'><img src='URL de la imagen 5 aqui'/></a></li>
</ul>
</div>


Realiza estos cambios

Donde dice URL 1 del Articulo aquí cámbialo por la dirección URL de cualquier articulo que quieras dar a conocer y donde dice URL de la imagen 1 aqui, bórralo e inserta la URL 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='URL 6 del Articulo aqui'><img src='URL de la imagen 6 aqui'/></a></li>


Listo da un clic en guardar y ubica tu nuevo Slideshow en el centro de tu blog para que sea visible, con esto aumentara las visitas de los artículos de tu blog que pasaron desapercibidos por tus lectores.

¿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:

LABELS

Adsense dispositivos moviles (2) Alojamiento web (12) Amp en Blogger (15) Amp HTML (5) Amp Html Premium (5) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (36) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (3) Configurar dominio de Godaddy en Blogger (2) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (21) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (4) Ganar Dinero (22) Google (11) Google Adsense (13) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (14) Material Design Blogger (9) Medios de Comunicacion Social (38) Menu desplegable (20) Menu Responsive para Blogger (7) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (44) Plantillas Landing page para Blogger (5) Popout (6) Posicionamiento SEO (23) Publicidad (2) SEO Mobile (13) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (74) Widgets Suscripciones (9) Widgets y Plugins (5)

FORMULARIO DE CONTACTOS