add

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.
emailEnviar por correo

2 comentarios:

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