add

Nuevo estilo de Slideshow para blogger


Obtener un buen estilo de Slideshow para blogger es la mejor opción al momento de implementarlo en su blog de blogger. Ayudadeblogger.com te ayudara con la configuración de un Slideshow para blogger con unos simples códigos. Existen cientos de estilos de Slideshow para blogger, nosotros nos destacamos en presentarles siempre estilos nuevos y que realmente funcione en su blog de blogger y que no cause ningún daño en la estructura de su blog. Deberán seguir las instrucción tal y cual lo publico en este post y lo podrán utilizar en su blog de blogger.

Slideshow para blogger

Anteriormente di a conocer algunos estilos de Slideshow para blogger de los cuales les dejo los enlaces a continuación:

  1. Como agregar a mi blog de blogger un Slideshow automatico
  2. Como crear un Slideshow manual para mi blog de blogger
  3. Como crear una galería de imágenes para Blogger online Gratis – Como crear un Slideshow gratis para blogger
  4. Como hacer un Slideshow Carrusel basado en etiquetas para blogger
  5. Instalar un Slideshow para blogger con un solo widget
  6. Mostrar un Slideshow con mis entradas populares para blogger
  7. Necesito un Slider para mi blog de blogger
  8. SlideShow con control deslizante para blogger
  9. Slider para blogger en 3D
  10. Slideshow con Entradas Populares Nuevo estilo
  11. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  12. Slideshow para Blogger
  13. Slideshow para blogger blogspot con etiquetas
  14. Slideshow para blogger con un solo widget
  15. Slideshow para blogger manual nuevo estilo
  16. Slideshow para blogger nuevo estilo
  17. Slideshow vertical para usarlo en blogger
  18. Widget Slider galería de imágenes acordeón para blogger
  19. Widget para blogger, Slideshow con Entradas Populares

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


Te gusto verdad!

Vamos a configurarlo

1 Ir a blogger

2 Da un clic en “Plantilla

Slideshow para blogger

3 Un clic en “Editar HTML

Slideshow para blogger

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Slideshow para blogger

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, 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 te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Slideshow para blogger

4 Busca este código

</head>

Luego de que hayas encontrado el código, tendrás que insertar las siguientes líneas de código justo abajo del código que encontraste

<script src='https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery-1.7.min.js'/>
<script src='https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.js'/>
<script src='https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.min.js'/>

<script type='text/javascript'>
      $(document).ready(function() {
        var carousel = $(&quot;#carousel&quot;).featureCarousel({
          // include options like this:
          // (use quotes only for string values, and no trailing comma after last option)
          // option: value,
          // option: value
        });

        $(&quot;#but_prev&quot;).click(function () {
          carousel.prev();
        });
        $(&quot;#but_pause&quot;).click(function () {
          carousel.pause();
        });
        $(&quot;#but_start&quot;).click(function () {
          carousel.start();
        });
        $(&quot;#but_next&quot;).click(function () {
          carousel.next();
        });
      });
    </script>


<style type='text/css'>
/********************
 * FEATURE CAROUSEL by Ayudadeblogger.com stard*
 ********************/
#carousel-container {
  position:relative;

padding:7px;
  background-color:#CCC;

}
#carousel {
  border:2px solid #fff;
  height:300px;
  background-color:#CCC;
  position:relative;
  font-size:12px;
  font-family: Arial;
}
#carousel .carousel-image {
  height:230px;
  width:400px;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
  border:0;
  display:block;
}
#carousel .carousel-feature {
  position:absolute;
  top:-1000px;
  left:-1000px;
  border:2px solid #5d5d5d;
  cursor:pointer;
}
#carousel .carousel-feature .carousel-caption {
  position:absolute;
  bottom:0;
  width:100%;
  background-color:#000;
}
#carousel .carousel-feature .carousel-caption p {
  margin:0;
  padding:5px;
  font-weight:bold;
  font-size:12px;
  color:white;
}
#carousel .tracker-summation-container {
  position:absolute;
  color:white;
  right:50px;
  top:212px;
  padding:3px;
  margin:3px;
  background-color:#000;
}
#carousel .tracker-individual-container {
  position:absolute;
  color:white;
  right:95px;
  top:218px;
  padding:0;
  margin:0;
}
#carousel .tracker-individual-container li {
  list-style:none;
}
#carousel .tracker-individual-container .tracker-individual-blip {
  margin:0 3px;
  padding:0 3px;
  color:#000;
  text-align:center;
  border:1px solid #5d5d5d;
  background-color:#DDD;
}
#carousel .tracker-individual-container .tracker-individual-blip-selected {
  color:#FFC600;
  font-weight:bold;
  border:1px solid #fff;
  background-color:#000;
}
#carousel-left {
  position:absolute;
  bottom:33px;
  left:200px;
  cursor:pointer;
}
#carousel-right {
  position:absolute;
  bottom:33px;
  right:200px;
  cursor:pointer;
}
</style>

Nota: Si ya utilizas un script jQquery en tu plantilla, no pongas el script jQuery que se encuentra dentro de este código https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery-1.7.min.js, ya que ocasionará problemas y no se mostrara el Slideshow, y si no utilizas ningún jQuery copia todo el código tal como esta.

Ahora dale un clic en “Guardar plantilla

5 Da un clic en “Diseño

Slideshow para blogger

6 Abre un gadget “Añadir un gadget

Slideshow para blogger

7 Busca el widget que dice “HTML/Javascritp” e inserta el siguiente código

Slideshow para blogger

<div id="carousel-container">
 
<div id="carousel">

<div class="carousel-feature">
<a href=" URL DE SU POST ">
<img class="carousel-image" alt="Image Caption" src="http://3.bp.blogspot.com/-8tIYsBlWgKg/UdBZFThP9FI/AAAAAAAAD5I/W9ZtzewoSQc/s1600/laptops+1.JPG" /></a>
<div class="carousel-caption">
<p>DESCRIPCION DE SU POST
 </p>
</div>
</div>

<div class="carousel-feature">
<a href="URL DE SU POST">
<img class="carousel-image" alt="Image Caption" src="http://1.bp.blogspot.com/-dciMYxs2uaM/UdBZIcoeQsI/AAAAAAAAD5Q/GDXsEwhMLss/s1600/laptops+2.JPG" /></a>
<div class="carousel-caption">
<p>DESCRIPCION DE SU POST
</p>
</div>
</div>

<div class="carousel-feature">
<a href="URL DE SU POST">
<img class="carousel-image" alt="Image Caption" src="http://4.bp.blogspot.com/-6soCBby2pYs/UdBaOR1muOI/AAAAAAAAD54/wrWWgwYb6vs/s1600/iphone+1.JPG" /></a>
<div class="carousel-caption">
<p>DESCRIPCION DE SU POST
</p>
</div>
</div>

<div class="carousel-feature">
<a href="URL DE SU POST">
<img class="carousel-image" alt="Image Caption" src="http://1.bp.blogspot.com/-9KTRfrbV2n0/UdBZOCEbRsI/AAAAAAAAD5g/g9-vglp4N1E/s1600/laptops+4.JPG" /></a>
<div class="carousel-caption">
<p>DESCRIPCION DE SU POST
</p>
</div>
</div>

<div class="carousel-feature">
 <a href="URL DE SU POST">
<img class="carousel-image" alt="Image Caption" src="http://1.bp.blogspot.com/-Ti-JT0LxmCA/UdBZRB-ng0I/AAAAAAAAD5o/IIGQ1YdmzaM/s1600/laptops+5.JPG" /></a>
<div class="carousel-caption">
<p>
DESCRIPCION DE SU POST</p>
</div>
</div>
</div>
 
<div id="carousel-left"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png" /></div>
<div id="carousel-right"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png" /></div>
</div>

Realiza estos cambios de configuración:

He marcado de tres diferentes colores en los cuales tendrás que cambiarlos.

Donde dice URL DE SU POST tienes que poner la dirección URL del artículo de tu blog

Tienes que cambiar los links que están marcados de color rojo http://3.bp.blogspot.com/-8tIYsBlWgKg/UdBZFThP9FI/AAAAAAAAD5I/W9ZtzewoSQc/s1600/laptops+1.JPG, por los links de las imágenes de tu blog

Y por ultimo las letras que están marcadas de color verde DESCRIPCION DE SU POST, cámbialas por una pequeña descripción del articulo que quieras dar a conocer en tu nuevo Slideshow para blogger

Eso es todo, ahora dale un clic en “Guardar” y ubícalo luego de la cabecera principal de tu blog o al final de tu blog.

Fácil verdad!

¿Necesitas ayuda?

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

Saludos.

0 comentarios:

Publicar un comentario en la entrada

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) 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 (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) 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 (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) 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 (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios