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.

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”

3 Abre un gadget “Añadir un gadget”

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

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

5 Ahora da un clic en “Plantilla”

6 Un clic en “Editar HTML”

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

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.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcJTP3mjM-ryoTZv2sOp722s_8LEPJs90t4gortjE4NBjmBN6ARELGO084Zh7cJi7d_M4VNlElaE6O7UrHg_1afi1uHhqg8H-IYaT0qk9U7Mvms86EkVzUHbcDdTVBOZg6DHxnJS-QyUe/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: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZ9rSpX5rCUTtwvvE3nxiT06Wl4p-OafIqCe5WXd0QH4-Cn30as1UeeYQB7rzDbCRiSlKfwGB4n6Ga7xpQkPOJt-dMNFuKdGt_fNlZLbsKyPRIcegtKZPr4KQQK9oGFxy22hzzYn-G2g7/s1600/ayudadeblogger.PNG", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUszqVDqC73WsaEb7v2COy4RV4pM0UjUNqdgQlQEQ3lVCIfQoZLyAKtpq7KszKsfysDZ1zrDXTZ6ISt5tP6jSmjx6Q8oXG1bwZlDxvGIHZJqpujSPKD8Fg1BMavJ25EFMldmgal0_QakGN/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”

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

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.

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEfz1QcSMpn-pQBwqXg5WwgUxbGXl0nyJUDPckx6n2rJNnBHyvdTssQ5kAiFGaXivT_XwCzsB1xLEikHPN3ndTb5qwkE1bzGtMQ_bmF5a_Yf8tFCK1xzVQtDM9IPjJiBQsVgBPX976LoKP/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

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Slider Carrusel

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.