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.
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/ <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/
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
2 comentarios: