Slider para blogger en 3D


El slider deslizador para blogger es muy apetecido por todos los bloggeros del mundo, es por eso que les voy a presentar un Slider de uso exclusivo para bogger.  El slider es un plugin de jQuery, el cual hace ver a las imágenes de forma 3D. Lo que va ha realizar este plugin es dar a las imágenes un aspecto único dentro de su blog de blogger. Les recuerdo que si ustedes ya utilizan un Slider en su blog, ya no podrán utilizar este plugin de jQuery, ya que no les aparecería en su blog. Y si usted todavía no utiliza ningún código de jQuery en su blog de blogger, es hora de utilizar este espectacular Slider deslizador en forma de 3D.


Slider para blogger en 3d

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


Luego de ver su demostración vamos a seguir las siguientes instrucciones para obtener este espectacular Slider.

1 Abrir Blogger

2 Nos dirigimos a “Plantilla” y le damos clic en “Edicion de HTML” y luego en continuar

3 Presione “F3” para encontrar los siguientes códigos.

4 Busca este código ]]></b:skin> y arriba de el,  inserta el siguiente código.


/* START
--------------------------------------------------------------------
 Roundabout Content Slider using jQuery for blogger
 By http://www.ayudadeblogger.com by http://www.grupodelecluse.com
--------------------------------------------------------------------
 Roundabout
*/
#featured                            {margin:10px 0 30px 0;}
#folio_scroller_container            {margin-top:35px; margin-bottom:40px; height:auto;}
#folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;}
.roundabout-holder                    {list-style:none; width:400px; height:250px; margin:0px auto;}
.roundabout-moveable-item             {font-size:12px!important;
/* Resize Image*/
height:180px;
width:350px;
/*-------------*/
cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px; -moz-border-radius:5px; background:#f9f9f9;}
.roundabout-moveable-item img         {height:100%; width:100%; background-color:#FFFFFF; margin:0;}
.roundabout-in-focus                 {cursor:auto;}
.roundabout-in-focus:hover            {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;}
.roundabout-holder span                {display:none; font-size:12px;}
.roundabout-in-focus:hover span        {display:inline; position:absolute; bottom:5px; right:5px; padding:8px 20px; background:#f9f9f9; color:#000000; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; }
.roundabout a:active,
.roundabout a:focus,
.roundabout a:visited                {outline:none; text-decoration:none;}
.roundabou li                         {margin:0}
a img                                {border:none; outline:0;}
 
/* END
--------------------------------------------------------------------
 Roundabout Content Slider using jQuery
 By http://www.ayudadeblogger.com by http://www.grupodelecluse.com
--------------------------------------------------------------------
 Roundabout
*/


5 Encuentra este código </body> y enzima de el, inserta el siguiente código.

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src="http://yourjavascript.com/3201154531/jquery.roundabout-1.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 jQuery(document).ready(function($) {
 var interval;
 $('#featured ul')
 .roundabout({
 duration: 600 }
 )
 .hover(
 function() {
 // oh no, it's the cops!
 clearInterval(interval);
 },
 function() {
 // false alarm: PARTY!
 interval = startAutoPlay();
 }
 );
 // let's get this party started
 interval = startAutoPlay();
 });
 function startAutoPlay() {
 return setInterval(function() {
 jQuery('#featured ul').roundabout_animateToNextChild();
 }, 5000);
 }
 </script>


Ahora dale un clic en “Guardar plantilla

6 Abrimos “Diseño” y “Añadir un gadget”, luego buscamos el widget que dice “HTML/javascript” y insertamos el siguiente condigo en su interior.

<script style="text/javascript" src="http://yourjavascript.com/1512308355/galleryposts-roundabout.js"></script><script style="text/javascript">
 var numposts_gal = 12;
 var random_posts = false;
</script>
<script src="http://ayudadeblogger.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

Realice este cambio:

Solo cambia donde dice ayudadeblogger.com por la dirección de tu blog, nada mas, luego dale un clic en guardar y ubícalo en la parte superior de tu blog de blogger. Eso es todo.

¿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



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.

Related post

Comentarios

2 comentarios: