Galería de imágenes para blogger V3
Obtener nuevos e impresionantes trucos
para blogger es darle a nuestro blog de blogger un diseño web profesional.
Ayudadeblogger.com compartirá un tutorial muy interesante sobre como instalar
en nuestro blog de blogger una Galería de imágenes con unos simples pasos. Miles
de páginas web utilizan en sus páginas principales galería de imágenes para
atraer con la vista a sus potenciales usuarios que visitan sus páginas, es por
esto que es necesario tener nuevas formas de implementar nuevos trucos en nuestros blogs de blogger y no quedarnos atrás y hacer de ella un diseño web
profesional. Primero vamos a insertar el código CSS en nuestro Editor HTML de
nuestra plantilla con un script no muy largo, y después pondremos el último código
con nuestras imágenes en un widget en la página de diseño de blogger. La galería de imágenes para
blogger funciona perfectamente en todos los navegadores web como Firefox,
Google Chrome, Internet Explorer etc. No voy hacer muy larga esta introducción,
también les invito a que visiten algunos temas interesantes de slideshow y galería
de imágenes que publique en anteriores publicaciones:
- Como agregar a mi blog de blogger un Slideshow automatico
- Como crear un Slideshow manual para mi blog de blogger
- Como crear una galería de imágenes para Blogger online Gratis
- Como hacer un Slideshow Carrusel basado en etiquetas para blogger
- Galería de imágenes para blogger
- Instalar un Slideshow para blogger con un solo widget
- Mostrar un Slideshow con mis entradas populares para blogger
- Necesito un Slider para mi blog de blogger
- Nuevo estilo de Slideshow para blogger
- SlideShow con control deslizante para blogger
- Slider carrusel para blogger
- Slider para blogger en 3D
- Slideshow con Entradas Populares Nuevo estilo
- Slideshow de Popular post o Entradas polulares para mi blog de blogger
- Slideshow para Blogger
- Slideshow para blogger blogspot con etiquetas
- Slideshow para blogger con un solo widget
- Slideshow para blogger manual nuevo estilo
- Slideshow para blogger nuevo estilo
- Slideshow vertical para usarlo en blogger
- Widget Galería de Imágenes para blogger V2
- Widget Slider galería de imágenes acordeón para blogger
- Widget Slideshow para blogger
- Widget para blogger, Slideshow con Entradas Populares
Les encanto verdad!
Vamos a trabajar
1 Ir a blogger
2 Da un clic en “Plantilla”
3 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.
4 Busca este código
]]></b:skin>
|
Inserta el siguiente código CSS justo
arriba del código que encontraste
/* Start CSS SLIDER ayudadeblogger.com
*/
#slider-wrapper {
background:
url(http://2.bp.blogspot.com/-qhmG6nmVPps/Th4O3pb7e2I/AAAAAAAACaY/hhznlEs-5jY/s1600/bg.png);
height: 300px;
width: 100%;
border-bottom: 1px solid #FFF;
}
.roundabout-example {
float: left;
height: 18em;
padding: 0;
width: 100%;
margin: 0 auto;
}
.roundabout-example ul {
list-style: none;
padding-left: 0;
width: 60%;
margin: 0 auto;
height: 22.5em;
}
.roundabout-example .stage {
padding: 0;
}
.roundabout-moveable-item {
height: 18em;
width: 30em;
cursor: pointer;
box-shadow: 0 2px 10px
rgba(0,0,0,0.5);
overflow: hidden;
border: 4px solid #FFF;
}
.roundabout-in-focus {
cursor: auto;
}
.roundabout-example img {
height: 18em;
width: 30em;
}
.post-body img {max-width:99%
!important;}
|
5 Busca este código
</head>
|
Una vez que hayas encontrado el código, tendrás
que insertar el siguiente código arriba del código que encontraste
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'
type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// t: current time, b: begInnIng
value, c: change In value, d: duration
jQuery.easing['jswing'] =
jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def:
'easeOutQuad',
swing:
function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return
jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad:
function (x, t, b, c, d) {
return
c*(t/=d)*t + b;
},
easeOutQuad:
function (x, t, b, c, d) {
return
-c *(t/=d)*(t-2) + b;
},
easeInOutQuad:
function (x, t, b, c, d) {
if
((t/=d/2) < 1) return c/2*t*t + b;
return
-c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic:
function (x, t, b, c, d) {
return
c*(t/=d)*t*t + b;
},
easeOutCubic:
function (x, t, b, c, d) {
return
c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic:
function (x, t, b, c, d) {
if
((t/=d/2) < 1) return c/2*t*t*t + b;
return
c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart:
function (x, t, b, c, d) {
return
c*(t/=d)*t*t*t + b;
},
easeOutQuart:
function (x, t, b, c, d) {
return
-c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart:
function (x, t, b, c, d) {
if
((t/=d/2) < 1) return c/2*t*t*t*t + b;
return
-c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint:
function (x, t, b, c, d) {
return
c*(t/=d)*t*t*t*t + b;
},
easeOutQuint:
function (x, t, b, c, d) {
return
c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint:
function (x, t, b, c, d) {
if
((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return
c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine:
function (x, t, b, c, d) {
return
-c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine:
function (x, t, b, c, d) {
return
c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine:
function (x, t, b, c, d) {
return
-c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo:
function (x, t, b, c, d) {
return
(t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo:
function (x, t, b, c, d) {
return
(t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo:
function (x, t, b, c, d) {
if
(t==0) return b;
if
(t==d) return b+c;
if
((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return
c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc:
function (x, t, b, c, d) {
return
-c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc:
function (x, t, b, c, d) {
return
c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc:
function (x, t, b, c, d) {
if
((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return
c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic:
function (x, t, b, c, d) {
var
s=1.70158;var p=0;var a=c;
if
(t==0) return b; if ((t/=d)==1) return
b+c; if (!p) p=d*.3;
if
(a < Math.abs(c)) { a=c; var s=p/4; }
else
var s = p/(2*Math.PI) * Math.asin (c/a);
return
-(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic:
function (x, t, b, c, d) {
var
s=1.70158;var p=0;var a=c;
if
(t==0) return b; if ((t/=d)==1) return
b+c; if (!p) p=d*.3;
if
(a < Math.abs(c)) { a=c; var s=p/4; }
else
var s = p/(2*Math.PI) * Math.asin (c/a);
return
a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic:
function (x, t, b, c, d) {
var
s=1.70158;var p=0;var a=c;
if
(t==0) return b; if ((t/=d/2)==2)
return b+c; if (!p) p=d*(.3*1.5);
if
(a < Math.abs(c)) { a=c; var s=p/4; }
else
var s = p/(2*Math.PI) * Math.asin (c/a);
if
(t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin(
(t*d-s)*(2*Math.PI)/p )) + b;
return
a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack:
function (x, t, b, c, d, s) {
if
(s == undefined) s = 1.70158;
return
c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack:
function (x, t, b, c, d, s) {
if
(s == undefined) s = 1.70158;
return
c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack:
function (x, t, b, c, d, s) {
if
(s == undefined) s = 1.70158;
if
((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return
c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce:
function (x, t, b, c, d) {
return
c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce:
function (x, t, b, c, d) {
if
((t/=d) < (1/2.75)) {
return
c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)) {
return
c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)) {
return
c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else {
return
c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce:
function (x, t, b, c, d) {
if
(t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return
jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
</script>
<script
type='text/javascript'>
//<![CDATA[
jQuery.extend({roundabout_shape:{def:'lazySusan',lazySusan:function(r,a,t){return{x:Math.sin(r+a),y:(Math.sin(r+3*Math.PI/2+a)/8)*t,z:(Math.cos(r+a)+1)/2,scale:(Math.sin(r+Math.PI/2+a)/2)+0.5}}}});jQuery.fn.roundabout=function(){var
options=(typeof arguments[0]!='object')?{}:arguments[0];options={bearing:(typeof
options.bearing=='undefined')?0.0:jQuery.roundabout_toFloat(options.bearing%360.0),tilt:(typeof
options.tilt=='undefined')?0.0:jQuery.roundabout_toFloat(options.tilt),minZ:(typeof
options.minZ=='undefined')?100:parseInt(options.minZ,10),maxZ:(typeof
options.maxZ=='undefined')?400:parseInt(options.maxZ,10),minOpacity:(typeof
options.minOpacity=='undefined')?1.00:jQuery.roundabout_toFloat(options.minOpacity),maxOpacity:(typeof
options.maxOpacity=='undefined')?1.00:jQuery.roundabout_toFloat(options.maxOpacity),minScale:(typeof
options.minScale=='undefined')?0.40:jQuery.roundabout_toFloat(options.minScale),maxScale:(typeof
options.maxScale=='undefined')?1.00:jQuery.roundabout_toFloat(options.maxScale),duration:(typeof
options.duration=='undefined')?600:parseInt(options.duration,10),btnNext:options.btnNext||null,btnPrev:options.btnPrev||null,easing:options.easing||'swing',clickToFocus:(options.clickToFocus!==false),focusBearing:(typeof
options.focusBearing=='undefined')?0.0:jQuery.roundabout_toFloat(options.focusBearing%360.0),shape:options.shape||'lazySusan',debug:options.debug||false,childSelector:options.childSelector||'li',startingChild:(typeof
options.startingChild=='undefined')?null:parseInt(options.startingChild,10),reflect:(typeof
options.reflect=='undefined'||options.reflect===false)?false:true};this.each(function(i){var
ref=jQuery(this);var
period=jQuery.roundabout_toFloat(360.0/ref.children(options.childSelector).length);var
startingBearing=(options.startingChild===null)?options.bearing:options.startingChild*period;ref.addClass('roundabout-holder').css('padding',0).css('position','relative').css('z-index',options.minZ);ref.data('roundabout',{'bearing':startingBearing,'tilt':options.tilt,'minZ':options.minZ,'maxZ':options.maxZ,'minOpacity':options.minOpacity,'maxOpacity':options.maxOpacity,'minScale':options.minScale,'maxScale':options.maxScale,'duration':options.duration,'easing':options.easing,'clickToFocus':options.clickToFocus,'focusBearing':options.focusBearing,'animating':0,'childInFocus':-1,'shape':options.shape,'period':period,'debug':options.debug,'childSelector':options.childSelector,'reflect':options.reflect});if(options.clickToFocus===true){ref.children(options.childSelector).each(function(i){jQuery(this).click(function(e){var
degrees=(options.reflect===true)?360.0-(period*i):period*i;degrees=jQuery.roundabout_toFloat(degrees);if(!jQuery.roundabout_isInFocus(ref,degrees)){e.preventDefault();if(ref.data('roundabout').animating===0){ref.roundabout_animateAngleToFocus(degrees)}return
false}})})}if(options.btnNext){jQuery(options.btnNext).bind('click.roundabout',function(e){e.preventDefault();if(ref.data('roundabout').animating===0){ref.roundabout_animateToNextChild()}return
false})}if(options.btnPrev){jQuery(options.btnPrev).bind('click.roundabout',function(e){e.preventDefault();if(ref.data('roundabout').animating===0){ref.roundabout_animateToPreviousChild()}return
false})}});this.roundabout_startChildren();if(typeof
arguments[1]==='function'){var
callback=arguments[1],ref=this;setTimeout(function(){callback(ref)},0)}return
this};jQuery.fn.roundabout_startChildren=function(){this.each(function(i){var
ref=jQuery(this);var data=ref.data('roundabout');var
children=ref.children(data.childSelector);children.each(function(i){var
degrees=(data.reflect===true)?360.0-(data.period*i):data.period*i;jQuery(this).addClass('roundabout-moveable-item').css('position','absolute');jQuery(this).data('roundabout',{'startWidth':jQuery(this).width(),'startHeight':jQuery(this).height(),'startFontSize':parseInt(jQuery(this).css('font-size'),10),'degrees':degrees})});ref.roundabout_updateChildPositions()});return
this};jQuery.fn.roundabout_setTilt=function(newTilt){this.each(function(i){jQuery(this).data('roundabout').tilt=newTilt;jQuery(this).roundabout_updateChildPositions()});if(typeof
arguments[1]==='function'){var
callback=arguments[1],ref=this;setTimeout(function(){callback(ref)},0)}return
this};jQuery.fn.roundabout_setBearing=function(newBearing){this.each(function(i){jQuery(this).data('roundabout').bearing=jQuery.roundabout_toFloat(newBearing%360,2);jQuery(this).roundabout_updateChildPositions()});if(typeof
arguments[1]==='function'){var
callback=arguments[1],ref=this;setTimeout(function(){callback(ref)},0)}return
this};jQuery.fn.roundabout_adjustBearing=function(delta){delta=jQuery.roundabout_toFloat(delta);if(delta!==0){this.each(function(i){jQuery(this).data('roundabout').bearing=jQuery.roundabout_getBearing(jQuery(this))+delta;jQuery(this).roundabout_updateChildPositions()})}if(typeof
arguments[1]==='function'){var
callback=arguments[1],ref=this;setTimeout(function(){callback(ref)},0)}return
this};jQuery.fn.roundabout_adjustTilt=function(delta){delta=jQuery.roundabout_toFloat(delta);if(delta!==0){this.each(function(i){jQuery(this).data('roundabout').tilt=jQuery.roundabout_toFloat(jQuery(this).roundabout_get('tilt')+delta);jQuery(this).roundabout_updateChildPositions()})}if(typeof
arguments[1]==='function'){var
callback=arguments[1],ref=this;setTimeout(function(){callback(ref)},0)}return
this};jQuery.fn.roundabout_animateToBearing=function(bearing){bearing=jQuery.roundabout_toFloat(bearing);var
currentTime=new Date();var duration=(typeof
arguments[1]=='undefined')?null:arguments[1];var easingType=(typeof
arguments[2]=='undefined')?null:arguments[2];var passedData=(typeof
arguments[3]!=='object')?null:arguments[3];this.each(function(i){var
ref=jQuery(this),data=ref.data('roundabout'),timer,easingFn,newBearing;var
thisDuration=(duration===null)?data.duration:duration;var thisEasingType=(easingType!==null)?easingType:data.easing||'swing';if(passedData===null){passedData={timerStart:currentTime,start:jQuery.roundabout_getBearing(ref),totalTime:thisDuration}}timer=currentTime-passedData.timerStart;if(timer<thisDuration){data.animating=1;if(typeof
jQuery.easing.def=='string'){easingFn=jQuery.easing[thisEasingType]||jQuery.easing[jQuery.easing.def];newBearing=easingFn(null,timer,passedData.start,bearing-passedData.start,passedData.totalTime)}else{newBearing=jQuery.easing[thisEasingType]((timer/passedData.totalTime),timer,passedData.start,bearing-passedData.start,passedData.totalTime)}ref.roundabout_setBearing(newBearing,function(){ref.roundabout_animateToBearing(bearing,thisDuration,thisEasingType,passedData)})}else{bearing=(bearing<0)?bearing+360:bearing%360;data.animating=0;ref.roundabout_setBearing(bearing)}});return
this};jQuery.fn.roundabout_animateToDelta=function(delta){var
duration=arguments[1],easing=arguments[2];this.each(function(i){delta=jQuery.roundabout_getBearing(jQuery(this))+jQuery.roundabout_toFloat(delta);jQuery(this).roundabout_animateToBearing(delta,duration,easing)});return
this};jQuery.fn.roundabout_animateToChild=function(childPos){var
duration=arguments[1],easing=arguments[2];this.each(function(i){var ref=jQuery(this),data=ref.data('roundabout');if(data.childInFocus!==childPos&&data.animating===0){var
child=jQuery(ref.children(data.childSelector)[childPos]);ref.roundabout_animateAngleToFocus(child.data('roundabout').degrees,duration,easing)}});return
this};jQuery.fn.roundabout_animateToNearbyChild=function(passedArgs,which){var
duration=passedArgs[0],easing=passedArgs[1];this.each(function(i){var
data=jQuery(this).data('roundabout');var
bearing=jQuery.roundabout_toFloat(360.0-jQuery.roundabout_getBearing(jQuery(this)));var
period=data.period,j=0,range;var reflect=data.reflect;var
length=jQuery(this).children(data.childSelector).length;bearing=(reflect===true)?bearing%360.0:bearing;if(data.animating===0){if((reflect===false&&which==='next')||(reflect===true&&which!=='next')){bearing=(bearing===0)?360:bearing;while(true&&j<length){range={lower:jQuery.roundabout_toFloat(period*j),upper:jQuery.roundabout_toFloat(period*(j+1))};range.upper=(j==length-1)?360.0:range.upper;if(bearing<=range.upper&&bearing>range.lower){jQuery(this).roundabout_animateToDelta(bearing-range.lower,duration,easing);break}j++}}else{while(true){range={lower:jQuery.roundabout_toFloat(period*j),upper:jQuery.roundabout_toFloat(period*(j+1))};range.upper=(j==length-1)?360.0:range.upper;if(bearing>=range.lower&&bearing<range.upper){jQuery(this).roundabout_animateToDelta(bearing-range.upper,duration,easing);break}j++}}}});return
this};jQuery.fn.roundabout_animateToNextChild=function(){return
this.roundabout_animateToNearbyChild(arguments,'next')};jQuery.fn.roundabout_animateToPreviousChild=function(){return
this.roundabout_animateToNearbyChild(arguments,'previous')};jQuery.fn.roundabout_animateAngleToFocus=function(target){var
duration=arguments[1],easing=arguments[2];this.each(function(i){var delta=jQuery.roundabout_getBearing(jQuery(this))-target;delta=(Math.abs(360.0-delta)<Math.abs(0.0-delta))?360.0-delta:0.0-delta;delta=(delta>180)?-(360.0-delta):delta;if(delta!==0){jQuery(this).roundabout_animateToDelta(delta,duration,easing)}});return
this};jQuery.fn.roundabout_updateChildPositions=function(){this.each(function(i){var
ref=jQuery(this),data=ref.data('roundabout');var inFocus=-1;var
info={bearing:jQuery.roundabout_getBearing(ref),tilt:data.tilt,stage:{width:Math.floor(ref.width()*0.9),height:Math.floor(ref.height()*0.9)},animating:data.animating,inFocus:data.childInFocus,focusBearingRad:jQuery.roundabout_degToRad(data.focusBearing),shape:jQuery.roundabout_shape[data.shape]||jQuery.roundabout_shape[jQuery.roundabout_shape.def]};info.midStage={width:info.stage.width/2,height:info.stage.height/2};info.nudge={width:info.midStage.width+info.stage.width*0.05,height:info.midStage.height+info.stage.height*0.05};info.zValues={min:data.minZ,max:data.maxZ,diff:data.maxZ-data.minZ};info.opacity={min:data.minOpacity,max:data.maxOpacity,diff:data.maxOpacity-data.minOpacity};info.scale={min:data.minScale,max:data.maxScale,diff:data.maxScale-data.minScale};ref.children(data.childSelector).each(function(i){if(jQuery.roundabout_updateChildPosition(jQuery(this),ref,info,i)&&info.animating===0){inFocus=i;jQuery(this).addClass('roundabout-in-focus')}else{jQuery(this).removeClass('roundabout-in-focus')}});if(inFocus!==info.inFocus){jQuery.roundabout_triggerEvent(ref,info.inFocus,'blur');if(inFocus!==-1){jQuery.roundabout_triggerEvent(ref,inFocus,'focus')}data.childInFocus=inFocus}});return
this};jQuery.roundabout_getBearing=function(el){return
jQuery.roundabout_toFloat(el.data('roundabout').bearing)%360};jQuery.roundabout_degToRad=function(degrees){return(degrees%360.0)*Math.PI/180.0};jQuery.roundabout_isInFocus=function(el,target){return(jQuery.roundabout_getBearing(el)%360===(target%360))};jQuery.roundabout_triggerEvent=function(el,child,eventType){return(child<0)?this:jQuery(el.children(el.data('roundabout').childSelector)[child]).trigger(eventType)};jQuery.roundabout_toFloat=function(number){number=Math.round(parseFloat(number)*1000)/1000;return
parseFloat(number.toFixed(2))};jQuery.roundabout_updateChildPosition=function(child,container,info,childPos){var
ref=jQuery(child),data=ref.data('roundabout'),out=[];var
rad=jQuery.roundabout_degToRad((360.0-ref.data('roundabout').degrees)+info.bearing);while(rad<0){rad=rad+Math.PI*2}while(rad>Math.PI*2){rad=rad-Math.PI*2}var
factors=info.shape(rad,info.focusBearingRad,info.tilt);factors.scale=(factors.scale>1)?1:factors.scale;factors.adjustedScale=(info.scale.min+(info.scale.diff*factors.scale)).toFixed(4);factors.width=(factors.adjustedScale*data.startWidth).toFixed(4);factors.height=(factors.adjustedScale*data.startHeight).toFixed(4);ref.css('left',((factors.x*info.midStage.width+info.nudge.width)-factors.width/2.0).toFixed(1)+'px').css('top',((factors.y*info.midStage.height+info.nudge.height)-factors.height/2.0).toFixed(1)+'px').css('width',factors.width+'px').css('height',factors.height+'px').css('opacity',(info.opacity.min+(info.opacity.diff*factors.scale)).toFixed(2)).css('z-index',Math.round(info.zValues.min+(info.zValues.diff*factors.z))).css('font-size',(factors.adjustedScale*data.startFontSize).toFixed(2)+'px').attr('current-scale',factors.adjustedScale);if(container.data('roundabout').debug===true){out.push('<div
style="font-weight: normal; font-size: 10px; padding: 2px; width:
'+ref.css('width')+'; background-color:
#ffc;">');out.push('<strong style="font-size: 12px; white-space:
nowrap;">Child '+childPos+'</strong><br
/>');out.push('<strong>left:</strong>
'+ref.css('left')+'<br /><strong>top:</strong>
'+ref.css('top')+'<br />');out.push('<strong>width:</strong>
'+ref.css('width')+'<br /><strong>opacity:</strong>
'+ref.css('opacity')+'<br
/>');out.push('<strong>z-index:</strong>
'+ref.css('z-index')+'<br /><strong>font-size:</strong>
'+ref.css('font-size')+'<br
/>');out.push('<strong>scale:</strong> '+ref.attr('current-scale'));out.push('</div>');ref.html(out.join(''))}return
jQuery.roundabout_isInFocus(container,ref.data('roundabout').degrees)};
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
//
top example
$('.roundabout-example
ul').roundabout({
'easing':
'easeOutExpo',
'duration':
500,
'btnNext':
'.next',
'btnPrev':
'.previous'
});
$(window).resize(function()
{
$('.roundabout-example
ul').roundabout_animateToBearing($.roundabout_getBearing($('.roundabout-example
ul')));
})
});
</script>
|
Nota: Si ya utilizas un código jQuery como
el siguiente http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js ya
no tendrás que poner solo ese código, y si no utilizas ningún código jQuery en
tu plantilla, entonces inserta todo el código tal como está en este tutorial.
Es momento de dar un clic en “Guardar
plantilla”
6 Da un clic en “Diseño”
7 Abre un gadget “Añadir un gadget”
8 Busca el widget que dice “HTML/Javascript”,
ábrelo e inserta las siguientes líneas de código en su interior.
<div id='slider-wrapper'>
<div class='slider-container'>
<div class='roundabout-example'>
<ul>
<li class='back'><img src='http://1.bp.blogspot.com/-c5moFpYqcec/Uhwvnt8ytaI/AAAAAAAAEfU/99FZl5c_EdU/s1600/galeria+de+imagenes+para+blogger.JPG'/></li>
<li class='back'><img src='http://3.bp.blogspot.com/-NX8_9BJoY5I/UhwwaPQbZ8I/AAAAAAAAEfc/dphKrgx7SuQ/s1600/galeria+de+imagenes+para+blogger.JPG'/></li>
<li class='back'><img src='http://1.bp.blogspot.com/-L4T2MV__BQs/UhwwpLRij2I/AAAAAAAAEfk/Kh3hCEJnot4/s1600/galeria+de+imagenes+para+blogger.JPG'/></li>
<li class='back'><img src='http://1.bp.blogspot.com/-4QTirPA92v8/UhwxJMs-sDI/AAAAAAAAEfs/JQBecy882OM/s1600/galeria+de+imagenes+para+blogger.JPG'/></li>
<li><img src='http://2.bp.blogspot.com/-9XrxXGfxwag/UhwxSCSaWLI/AAAAAAAAEf0/t1ID6tNvAxU/s1600/galeria+de+imagenes+para+blogger.JPG'/></li>
</ul>
</div>
</div>
</div>
|
Realiza estos cambios:
Existen 5 URLs que están marcadas de
color rojo, estas son las URLs de las imágenes que quiero mostrar en mi galería
de imágenes, ahora ustedes tendrán que poner ahí las URLs de las imágenes que
quieran mostrar en esta galería, les recuerdo que el tamaño de la imagen debe
tener 450x250 pixeles.
Eso es todo, ahora dale un clic en “Guardar”
y ubica tu widget debajo de la cabecera principal de tu blog de blogger.
Si quieren aumentar más imágenes en su
nueva galería de imágenes, basta con poner el siguiente código justo arriba del
código que está marcado de color amarillo </ul>
<li class='back'><img src='http://1.bp.blogspot.com/-c5moFpYqcec/Uhwvnt8ytaI/AAAAAAAAEfU/99FZl5c_EdU/s1600/galeria+de+imagenes+para+blogger.JPG'/></li>
|
Fácil verdad!
Visita tu blog y mira tus nuevos cambios
¿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
a mi no me funciona :(
ResponderEliminarLa galeria de imagenes funciona perfectamente algo debes de estar haciendo mal,
EliminarSaludos.