add

Slider carrusel para blogger


Ayudadeblogger.com les presenta un nuevo slider carrusel para blogger, el cual lo podrán usar en las entradas de su blog de blogger. Tener espectaculares trucos para blogger y así mejorar su blog de blogger es lo que aprenderán el día de hoy. Este nuevo slider carrusel para blogger funciona en cada entrada de su blog. Lo que vamos hacer es cambiar nuestras Entradas populares de blogger por un slider carrusel. El slider carrusel funciona con las Entradas populares de blogger, muestra 5 imágenes, luego ira recorriendo hasta llegar al final de sus Entradas populares hasta el puesto 10.  La inserción del código es muy fácil de realizarlo, tendrán que seguir mis instrucciones al pie de este post y no confundir ningún paso. Vamos a insertar el código en el Editor HTML de nuestra plantilla, así que si algo les sale mal no se olviden de hacer una copia de seguridad de su plantilla.

Slider carrusel para blogger

Si buscan más Slideshow para blogger, les voy a dejar algunos post que publique anteriormente

  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
  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. Nuevo estilo de Slideshow para blogger
  9. SlideShow con control deslizante para blogger
  10. Slider para blogger en 3D
  11. Slideshow con Entradas Populares Nuevo estilo
  12. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  13. Slideshow para Blogger
  14. Slideshow para blogger blogspot con etiquetas
  15. Slideshow para blogger con un solo widget
  16. Slideshow para blogger manual nuevo estilo
  17. Slideshow para blogger nuevo estilo
  18. Slideshow vertical para usarlo en blogger
  19. Widget Slider galería de imágenes acordeón para blogger
  20. Widget Slideshow para blogger
  21. Widget para blogger, Slideshow con Entradas Populares

A continuación mire su demostración en mi blog de demos, el slider carrusel esta ubicado arriba del articulo de mi blog de demos.


Te gusto!

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Diseño

Slider carrusel para blogger

3 Abre un gadget “Añadir un gadget

Slider carrusel para blogger

4 Busca el widget que tiene como nombre “Entradas populares”, habilítalo y déjalo tal como te muestro en la siguiente imagen

Slider carrusel para blogger
Slider carrusel para blogger

Luego le das un clic en “Guardar” y ubica tu Entrada popular arriba de la Entrada de tu blog, si no sabes como mira la imagen

Slider carrusel para blogger

5 Ahora da un clic en “Plantilla

Slider carrusel para blogger

6 Un clic en “Editar HTML

Slider carrusel para blogger

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

Slider carrusel 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.

Slider carrusel para blogger

7 Busca este código

]]></b:skin>

Inserta el siguiente código justo arriba del código que encontraste

#gallery{position:relative;margin:0 35px 20px;width:540px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(http://3.bp.blogspot.com/-ZYrUIKPpQOA/UgKs2Cpdv-I/AAAAAAAAEM0/H8ueqA5v8nY/s1600/ayudadeblogger.PNG) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}#navbar-iframe {display: none !important;}body .navbar {
height:0px;
}

8 Busca este otro código

</head>

Inserta las siguientes líneas de código arriba del código que encontraste

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/921818833/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["http://2.bp.blogspot.com/-V5yOKTJmtEk/UgKtQymrrbI/AAAAAAAAEM8/GiUwE1SKfb4/s1600/ayudadeblogger.PNG", -40, 36], rightnav: ["http://1.bp.blogspot.com/-jgajTCZYIEk/UgKtcLvRAqI/AAAAAAAAENE/k4_NHzkLzFU/s1600/ayudadeblogger.PNG", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Con cuidado dirígete a una de las pestañas del Editor HTML de tu plantilla, da un clic en la pestaña que dice “Ir al widget

Slider carrusel para blogger

En este punto te mostrara los widgets que tienes en tu blog.

Slider carrusel para blogger

Tendrás que buscar el widget que tiene como nombre “PopularPost1” o “EntradasPopulares1” y darle un clic para que te lleve hacia el código de tu PopularPost1, mira la imagen.

Slider carrusel para blogger

Cuando hayas abierto todo el código de tu “PopularPost1” o “EntradasPopulares1” te mostrara un código como el siguiente:

<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'>
            <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
          </b:widget>


Borra todo ese código y remplaza todo el código por las siguientes líneas de código

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
            <b:includable id='main'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='http://2.bp.blogspot.com/-44L5iVbJtwA/UgKuiP7oKyI/AAAAAAAAENU/uU2T9rnzzZo/s1600/ayudadeblogger.PNG'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div>
</b:includable>
          </b:widget>

Eso es todo ahora dale un clic en “Guardar plantilla

Mira los cambios en tu blog en una entrada.

Fácil verdad!

¿Necesitas ayuda?

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

Saludos

emailEnviar por correo

6 comentarios:

  1. HOLA AMIGO LUIS SALUDOS DESDE COLOMBIA TE QUERÍA PREGUNTAR COMO HACER PARA REDUCIR LAS ENTRADAS

    ResponderEliminar
    Respuestas
    1. Hola, publicare ese tutorial mantente atento,
      Saludos,

      Eliminar
  2. Luis esta muy bien la idea, pero si yo quiero que las imagenes presente el titulo del contenido y ademas que no sea de las entradas populares sino que funciones con una etiqueta en especifico. Como lo haria? . Disculpa si estoy siendo muy exigente.

    ResponderEliminar
    Respuestas
    1. Puedes realizar el siguiente tutorial basado en etiquetas:
      http://www.ayudadeblogger.com/2012/11/como-hacer-un-slideshow-carrusel-basado-en-etiquetas-para-blogger.html
      Saludos

      Eliminar
  3. hola! luis... mira hice todos los pasos y cuando le di a vista previa los post estaban en una lista normal...sera que me ayudas ya que la verdad esta es la opción que quiero en mi blog http://elhadadeloslibross.blogspot.com/

    ResponderEliminar
  4. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

Discusión

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 (33) 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 (11) 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