Sobre temas más específicos como agregar gadgets para poner banners por ejemplo HTML, pero no explicarlos a fondo, sino dejar como una plantilla para que puedan tomarla y a partir de ellas agregar más cosas.
En este apartado quiero mostrarles como crear Sliders (fotos deslizables) como los que tengo arriba en mi blog, al principio me costó entender como usar el código HTML, después me acostrumbré.
Lo que quiero es dejarles una especie de plantilla HTML y por medio de ésta que ustedes vayan agregando más fotos.
 |
| Ejemplo de una foto puesta en un Slider |
Lo primero que tenemos que hacer es copiar unos códigos (esto se hace solo 1 vez) Vamos a usar el Slider de Orbit.
Vamos a Tema, (Siempre hacer una copia de seguridad) -> Editar HTML y antes de </head> pegamos lo siguiente: pulsando CTRL + F (nos abre el cuadro de búsqueda) y ahí ponemos </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 5000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>
Fijense que en el código de arriba señale algo en Rojo: es la velocidad en que va a cambiar cada foto 5000 sería 5 segundos. Eso lo determinan ustedes.
Luego buscamos en el código HTML (ctrl + f) ]]></b:skin> y pegamos antes de ello el siguiente código:
/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN1X3hk53oN6zJpvRmeeM1N_07QfKMkn-7thVEVc3ld8f7d30f6hcCRDjPrMMOFDkd-viF_MCMgVLCY8PsTe5XgLBiknjulNbovOGK1uZGLlPktPuYWUMIN3azhDcHQwCaEZ0qpoM-PQZ6/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh76Ez9_7xfW01QxeVpr62d5KY-P2bMpfThKMVyglhOSKRxLPbeyvF9uIpIJJ72FCweqtmzbAXrN66L_xR8pCrKjb7OTCqJvEfPZEcMoIzB9O9T1d6c3x5HS0r1ajOXWqkgWhpnhkcpiqk8/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjV6d-ln5cKPIluQVaBjop5M1G3-g8dn6FI2_DElQLVE_QaO8EATYYZfb2NKykv5TiItht-vZeza6X2VK1ORxQM_XD11BG6KMUFWaTpC9w8avvsFzU4kSw1LbArpP0YgraSBcNadpX9MRu/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3FGVNwFtgcUIenLdCfznWzhUgGHKmy_cYVs2btuFAYkIIWJs3E9aG7WXNejuisdhZ7xSA7p-kYlLPr5ETDggwSPou47pGw8LP7DRndffPS96OW4qKPJ7W7Lact5wcLq2ye92Oi3lJEO_1/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_PObLljDl23nbuvwR-xo5RZ7XCoaSMnGRmMGc7iLoK5VyqEbmi25eMxGEhYWSByfxdteLOZ4tmPbhNbtPlRaPhnqjdy1dm3zCxscB3g3V6ZNhO1yspGodK4jo7ZWzTvYTYQtBIyZ8tvHq/s1600/left-arrow.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKSHGxogjuIBLVRbn8F0I3Pir8FlBlNLJCwnbP6gBiolqolxSqEhs3ezYi5IX-letM8KFVFxhgp5LyOpQbkfO0D043KqC2pJsvjdSet2zr_ZMicULFoiYxhevRIuUvTw3QaGQZqA-ubFzG/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }
Guardamos cambios y terminamos con ese tema.
Ahora vamos a ver la plantilla donde vamos a poner las fotos que queremos.
PLANTILLA INICIAL
<div id='featured'>
<a href="https://ganadineromirandopublicidad.blogspot.com.ar/2018/03/adzbazar-gran-pagina-para-empezar-ganar.html"><img rel='foto3' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUZPzDSNOcC807xfc4HTeuM_H6L99dq2QdgtmL-hfrZfFmNbt4egAWBePTFQ9Ou1BvPW5OFNB_7kZuN-jRns5RgmAUOhJzeYH0MD_mVw-tit6Joysymn12apIcffsp9a82lWw4yw2AKTc/s1600/BIENVENIDA.png" style='width:800px; height:300px;'/></a>
<span class='orbit-caption' id='foto3' style='text-align:center;'> ADZBAZAR</span>
</div>
Les explico cada parte y luego como deben insertarlo en su blog en Blogger.
- Lo que está en ROJO: es la dirección de internet o link que al apretar en la foto nos va a llevar a esa página. Fijarse que va entre "".
- Lo que está en VERDE: es el link o dirección de la foto que va a aparecer en el Slider. Fijarse que va entre "".
- Lo que está en VIOLETA: es el título que va a aparecer debajo de la foto.
- Lo que está en NARANJA: Es lo que tenemos que cambiar cada vez que agreguemos otra foto, es la identificación de la foto dentro de Blogger.
- Lo que está en AZUL: es el ancho (width) y el alto (height) del slider. Por cada foto se puede cambiar el tamaño, pero no quedaría muy estético.
Entendiendo esto paso a detallarles los pasos para poner las fotos.
Vamos a Diseño, y luego cliqueamos en agregar un Gadget:
Se abre esta ventana:
Cliqueamos en HTML/JavaScript,
En título para saber de que se trata y en contenido copiar la plantilla que dejé. Sólo deben cambiar lo que marqué en colores con los links y los nombres que ustedes deseen poner.
Para seguir poniendo más fotos deben copiar desde <a href................... hasta </span>. Lo tienen que poner antes de </div>
Le dan a guardar y va a aparecer el gadget
Pueden mover el slider de lugar, creo que al costado de la página no quedaría muy bien. De todas formas podemos verlo y si no nos gusta cambiarlo de lugar. Además hay que tener en cuenta el ancho y el alto.
Este es un ejemplo en mi blog puesto en el costado como tiene 800 x 300 sobresale mucho.
Pero si lo movemos arriba. (En Diseño, mantenemos el mouse en el gadget en la barrita de color gris y podemos moverlo a donde queramos)
Fijense que ahora lo puse arriba, que es donde siempre lo uso, ustedes lo pueden poner donde quieran, siempre teniendo en cuenta el ancho y alto.
Si en el futuro quieren agregar más fotos solo van al gadget de Slider y cliquean en editar, y siguen el mismo proceso de copiado y pegado que mencione arriba.
