Slideshow para blogger nuevo estilo
Disponer de un Slideshow para blogger es
algo que no puedes dejar pasar por alto. Ayudadeblogger.com te ayudara a
implementar este nuevo slideshow para que lo utilices en tu blog de blogger. En
este tutorial de slideshow para blogger voy hacer lo mas explicativo posible,
la instalación de los códigos es muy simple solo tienes que seguir mis
instrucciones y tendrás como resultado este nuevo y sorprendente slideshow en
tu blog de blogger. Las características principales de este slideshow es muy
sencillo, muestra 4 imágenes incluyendo 4 imágenes pequeñas utilizando los
estilos de thumbnail que le da una imagen en miniatura con un estilo hermoso,
al presionar la imagen se dirigirá al post o articulo destacado que quiera dar
a conocer, la inserción de las imágenes es de forma manual y usted podrá escoger
cual imagen quiere que se muestre, al igual que los links y así podrás obtener
mas vistas en tus artículos destacados.
Anteriormente publique algunos tipos de
slideshow que también lo podrás obtener en esta pagina web, de los cuales te
voy a dejar los enlaces.
A continuación mire su demostración en mi blog de demos
No voy hacer muy largo este artículo
sobre como instalar este nuevo slideshow, y nos vamos directamente a
implementar este slideshow en nuestro blog de blogger.
1 Ir a blogger
2 Da un clic en “Plantilla”
3 Da otro 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> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste
/* Slideshow star
ayudadeblogger.com -------------*/
#showcase {
overflow: hidden;
height: 395px;
margin: 5px;
}
#awOnePageButton
.view-slide
{
display: none;
}
/* This class is removed
after the showcase is loaded */
/* Assign the correct
showcase height to prevent loading jumps in IE */
.showcase-load
{
height: 470px; /* Same as
showcase javascript option */
overflow: hidden;
}
/* Container when content
is shown as one page */
.showcase-onepage
{
/**/
}
/* Container when content
is shown in slider */
.showcase
{
position: relative;
margin: auto;
background: #f1f1f1;
border: 1px solid #d2d2d2;
padding: 0px 0px 9px;
box-shadow: 0 2px 7px
#dddddd;
}
.showcase-content-container
{
background-color: #000;
}
/* Navigation arrows */
.showcase-arrow-previous,
.showcase-arrow-next
{
position: absolute;
background:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSqyAe7u_gE8Uh7N3AYu0DQMEkOp7aPxphpdRQV6XtAFeOr1_FG1r2Xdn33IGw_PgihmWMRscyqgE6x-tWuFluNU3xsZPXVmO8_z2w1DwjocOjcFYTVNO_lFBRM-tcdVKCPSL1G_eKzh-3/s1600/arrows.png');
width: 35px;
height: 31px;
top: 220px;
cursor: pointer;
z-index: 99999;
opacity: 0.95;
}
.showcase-arrow-previous
{
right: 35px;
background-position: 0 0;
top: 274px;
}
.showcase-arrow-next
{
right: 0px;
top: 274px;
background-position: -34px
0;
}
/* Content */
.showcase-content
{
background-color: #000;
text-align: center;
}
.showcase-content-wrapper
{
text-align: center;
height: 470px;
width: 700px;
display: table-cell;
vertical-align: middle;
}
/* Styling the tooltips */
.showcase-plus-anchor
{
background-image: url('');
background-repeat:
no-repeat;
}
.showcase-plus-anchor:hover
{
background-position: -32px
0;
}
div.showcase-tooltip
{
background-color: #fff;
color: #000;
text-align: left;
padding: 5px 8px;
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCEPTME3Xt_NEFrFNLP8RVe5Ko-m58vk4MhQfmsldnaPdAjyG-MINaFlL-w8T6U4v2RPMa4JNIrfbN3NcCzbJ35wzFRyw6FJYO108dCrYx5FUL5zRLnFyVvJZ4quDHH5vFDTkCsvvme916/s1600/white-opacity-80.png);
}
/* Styling the caption */
.showcase-caption
{
color: #000;
padding: 10px;
width: 323px;
text-align: left;
position: absolute;
bottom: 0px; left: 0px;
display: none;
background: #282828
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3hG9pMYekk4C6YyARillBknUUoPJZqqFEB7WgEyxpQkIcC_w7sTZA4w-orm6zJ-SELT_c70-rdZ6cHm5BULAJcOMQ-oGsk3uINH7bJMZAo6krp6lO0M7JbhtX8QnmW1LnrXqVOQJZESV1/s1600/caption.jpg)
repeat-x;
border: 1px solid #000000;
opacity: 0.95;
}
h2.stitle a, h2.stitle
a:visited {
color: #fff;
text-shadow: 1px 0 1px
#000;
font-size: 16px;
text-transform: uppercase;
display: inline-block;
margin: 5px 0 8px 0;
}
.showcase-caption p {
color: #757575;
font-size: 12px;
}
.showcase-onepage
.showcase-content
{
margin-bottom: 10px;
}
/* Button Wrapper */
.showcase-button-wrapper
{
clear: both;
margin-top: 10px;
text-align: center;
}
.showcase-button-wrapper
span
{
margin-right: 3px;
padding: 2px 5px 0px 5px;
cursor: pointer;
font-size: 12px;
color: #444444;
}
.showcase-button-wrapper
span.active
{
color: #fff;
}
/* Thumbnails */
.showcase-thumbnail-container
/* Used for backgrounds, no other styling!!! */
{
}
.showcase-thumbnail-wrapper
{
overflow:
hidden;
}
.showcase-thumbnail
{
width: 140px;
height: 75px;
cursor: pointer;
border: solid 1px #d2d2d2;
position: relative;
}
.showcase-thumbnail-caption
{
position: absolute;
bottom: 2px;
padding-left: 10px;
padding-bottom: 5px;
}
.showcase-thumbnail-content
{
padding: 10px;
text-align: center;
padding-top: 25px;
}
.showcase-thumbnail-cover
{
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ19BVS6j9XHA2_FjXCqj-8FZUzrRocySkgDInT_HwR3LMV7wAfylCJHC30tbAOVffX1q-vgfufLnQ2vmbcsKsn6TZeaTOeSaf36-hrSBzSa608SdeRtSrFhWQwKeFk9QxlyZOs1HkxagN/s1600/black-opacity-40.png);
position: absolute;
top: 0; bottom: 0; left:
0; right: 0;
}
.showcase-thumbnail:hover
{
border: solid 1px #000;
}
.showcase-thumbnail:hover
.showcase-thumbnail-cover
{
display: none;
}
.showcase-thumbnail.active
{
border: solid 1px #000;
}
.showcase-thumbnail.active
.showcase-thumbnail-cover
{
display: none;
}
.showcase-thumbnail-wrapper-horizontal
{
padding: 10px 10px 0;
}
.showcase-thumbnail-wrapper-horizontal
.showcase-thumbnail
{
margin-right: 16px;
width: 140px;
}
.showcase-thumbnail-wrapper-vertical
{
padding: 10px;
}
.showcase-thumbnail-wrapper-vertical
.showcase-thumbnail
{
margin-bottom: 10px;
}
.showcase-thumbnail-button-backward,
.showcase-thumbnail-button-forward
{
padding: 7px;
cursor: pointer;
}
.showcase-thumbnail-button-backward
{
padding-bottom: 0px;
padding-right: 0px;
}
.showcase-thumbnail-button-backward
.showcase-thumbnail-vertical,
.showcase-thumbnail-button-forward
.showcase-thumbnail-vertical,
.showcase-thumbnail-button-forward
.showcase-thumbnail-horizontal,
.showcase-thumbnail-button-backward
.showcase-thumbnail-horizontal
{
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGc_Df3cMoXbjp9KkNlP_1ht7cdkwSdeA3ysUd6jCm8rDH6Jr_R3gKd5TylYrDbgLm362Cewo1pjlVGxR6fYHDNbygMaOCLID4d4oyDHS3PKTGN8wflySK1XRbCiCwJIlGfzhHHKTIfibN/s1600/arrows-small.png);
background-repeat:
no-repeat;
display: none;
width: 17px;
height: 17px;
}
.showcase-thumbnail-button-backward
.showcase-thumbnail-vertical
{
background-position: 0
-51px;
margin-left: 55px;
}
.showcase-thumbnail-button-backward:hover
.showcase-thumbnail-vertical
{
background-position: -17px
-51px;
}
.showcase-thumbnail-button-forward
.showcase-thumbnail-vertical
{
background-position: 0
-34px;
margin-left: 55px;
}
.showcase-thumbnail-button-forward:hover
.showcase-thumbnail-vertical
{
background-position: -17px
-34px;
}
.showcase-thumbnail-button-backward
.showcase-thumbnail-horizontal
{
background-position: 0
-17px;
margin-top: 40px;
margin-bottom: 40px;
}
.showcase-thumbnail-button-backward:hover
.showcase-thumbnail-horizontal
{
background-position: -17px
-17px;
}
.showcase-thumbnail-button-forward
.showcase-thumbnail-horizontal
{
background-position: 0 0;
margin-top: 40px;
margin-bottom: 40px;
}
.showcase-thumbnail-button-forward:hover
.showcase-thumbnail-horizontal
{
background-position:
-17px 0;
}
/* Hide button text */
.showcase-thumbnail-button-forward
span span,
.showcase-thumbnail-button-backward
span span
{
display: none;
}
/* Clear (used for
horizontal thumbnails)by www.ayudadeblogger.com
-------------------------------------------*/
.clear
{
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height:
0;
float:
none;
}
banner2k
{
background:
#ffffff;
)
|
5 Todavía no guardes la plantilla, también
tendrás que buscar este código </head> y arriba del código
que encontraste inserte el siguiente código
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'
type='text/javascript'/>
<script
type='text/javascript'>
(function(jQuery){jQuery.fn.awShowcase=function(options){var
defaults={content_width:700,content_height:470,fit_to_parent:false,auto:false,interval:3000,continuous:false,loading:true,tooltip_width:200,tooltip_icon_width:32,tooltip_icon_height:32,tooltip_offsetx:18,tooltip_offsety:0,arrows:true,buttons:true,btn_numbers:false,keybord_keys:false,mousetrace:false,pauseonover:true,stoponclick:true,transition:'hslide',transition_delay:300,transition_speed:500,show_caption:'onload',thumbnails:false,thumbnails_position:'outside-last',thumbnails_direction:'vertical',thumbnails_slidex:0,dynamic_height:false,speed_change:false,viewline:false,fullscreen_width_x:15,custom_function:null};options=jQuery.extend(defaults,options);var
current_id=0;var previous_id=0;var break_loop=false;var pause_loop=false;var
myInterval=null;var showcase=jQuery(this);var
showcase_width=options.content_width;var animating=false;var
content_viewline_width=10000;var animation_distance=0;var
old_animation_distance=0;var remaining_width=0;var
content_container=jQuery(document.createElement('div')).css('overflow','hidden').css('position','relative').addClass('showcase-content-container').prependTo(showcase);if(options.fit_to_parent){showcase_width=jQuery(showcase).width()+options.fullscreen_width_x}if(options.viewline){options.thumbnails=false;options.dynamic_height=false;content_container.css('width',content_viewline_width);showcase.css('overflow','hidden');$('.showcase-arrow-previous').hide()}var
contentArray=[];var thumbnailArray=[];var content_count=0;showcase.children('.showcase-slide').each(function(){var
object=jQuery(this);content_count++;if(options.thumbnails){var
thumb=object.find('.showcase-thumbnail');thumbnailArray.push(thumb);thumb.remove()}var
object_width=object.find('.showcase-content').children().width();var
object_height=object.find('.showcase-content').children().height();contentArray.push(object.html());object.remove();var
new_object=getContent(content_count-1);if(options.viewline||content_count===1){content_container.append(new_object)}if(options.viewline){new_object.css('position','relative');new_object.css('float','left');new_object.css('width',object_width)}if(options.dynamic_height){new_object.css('height',object_height);if(content_count===1){content_container.css('height',object_height)}}else{new_object.css('height',options.content_height);if(content_count===1){content_container.css('height',options.content_height)}}if(options.viewline||content_count===1){displayAnchors(new_object);displayCaption(new_object);if(options.show_caption==='show'){jQuery(new_object).find('.showcase-caption').show()}}});var
thumb_wrapper;var thumbnailStretch=0;var thumbnailsPerPage=0;if(options.thumbnails){thumb_container=jQuery('<div
/>');thumb_restriction=jQuery('<div
/>');thumb_wrapper=jQuery('<div
/>');for(i=thumbnailArray.length-1;i>=0;--i){var
thumbnail=jQuery(thumbnailArray[i]).css({'overflow':'hidden'});thumbnail.attr('id','showcase-thumbnail-'+i);thumbnail.addClass((i===0)?'active':'');thumbnail.click(function(a,b){return
function(){if(myInterval){pause_loop=true;clearInterval(myInterval)}changeContent(a,b)}}(i,''));thumb_wrapper.prepend(thumbnail)}if(options.thumbnails_position==='outside-first'||options.thumbnails_position==='outside-last'){if(options.thumbnails_direction!=='horizontal'){content_container.css('float','left');content_container.css('width',options.content_width);thumb_container.css('float','left');thumb_container.css('height',options.content_height)}else{jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float','left')}if(options.thumbnails_position==='outside-last'){showcase.append(thumb_container);if(options.thumbnails_direction!=='horizontal'){showcase.append(jQuery('<div
/>').addClass('clear'))}}else{showcase.prepend(thumb_container);if(options.thumbnails_direction!=='horizontal'){showcase.append(jQuery('<div
/>').addClass('clear'))}}}else{thumb_container.css({'position':'absolute','z-index':20});if(options.thumbnails_direction==='horizontal'){thumb_container.css({'left':0,'right':0});jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float','left');jQuery(thumb_wrapper).append(jQuery('<div
/>').addClass('clear'));if(options.thumbnails_position==='inside-first'){thumb_container.css('top',0)}else{thumb_container.css('bottom',0)}}else{thumb_container.css({'top':0,'bottom':0});if(options.thumbnails_position==='inside-first'){thumb_container.css('left',0)}else{thumb_container.css('right',0)}}content_container.prepend(thumb_container)}thumb_container.addClass('showcase-thumbnail-container');thumb_container.css('overflow','hidden');thumb_restriction.addClass('showcase-thumbnail-restriction');thumb_restriction.css({'overflow':'hidden','position':'relative'});if(options.thumbnails_direction==='horizontal'){thumb_restriction.css({'float':'left'})}thumb_wrapper.addClass('showcase-thumbnail-wrapper');if(options.thumbnails_direction==='horizontal'){thumb_wrapper.addClass('showcase-thumbnail-wrapper-horizontal')}else{thumb_wrapper.addClass('showcase-thumbnail-wrapper-vertical')}thumb_wrapper.css('position','relative');thumb_restriction.append(thumb_wrapper);thumb_container.append(thumb_restriction);var
buttonBackward=jQuery('<div
class="showcase-thumbnail-button-backward"
/>');if(options.thumbnails_direction!=='horizontal'){buttonBackward.html('<span
class="showcase-thumbnail-vertical"><span>Up</span></span>')}else{buttonBackward.css({'float':'left'});buttonBackward.html('<span
class="showcase-thumbnail-horizontal"><span>Left</span></span>')}buttonBackward.click(function(){slideThumbnailWrapper('backward',false,true)});thumb_container.prepend(buttonBackward);var
buttonForward=jQuery('<div
class="showcase-thumbnail-button-forward"
/>');if(options.thumbnails_direction!=='horizontal'){buttonForward.html('<span
class="showcase-thumbnail-vertical"><span>Down</span></span>')}else{buttonForward.css({'float':'left'});buttonForward.html('<span
class="showcase-thumbnail-horizontal"><span>Right</span></span>')}buttonForward.click(function(){slideThumbnailWrapper('forward',false,true)});thumb_container.append(buttonForward);var
thumbnailVisibleStretch=0;if(options.thumbnails_direction!=='horizontal'){thumbnailVisibleStretch=getElementHeight(thumb_wrapper,false);thumbnailVisibleStretch+=(getElementHeight(buttonBackward))+(getElementHeight(buttonForward));while(thumbnailVisibleStretch<options.content_height){thumbnailVisibleStretch+=getElementHeight(jQuery(thumbnailArray[0]));thumbnailsPerPage++}}else{thumbnailVisibleStretch=getElementWidth(thumb_wrapper,false);thumbnailVisibleStretch+=(getElementWidth(buttonBackward))+(getElementWidth(buttonForward));while(thumbnailVisibleStretch<showcase_width){thumbnailVisibleStretch+=getElementWidth(jQuery(thumbnailArray[0]));thumbnailsPerPage++}}if(thumbnailsPerPage+1>thumbnailArray.length){if(options.thumbnails_direction!=='horizontal'){thumb_restriction.css('margin-top',getElementHeight(buttonBackward))}else{thumb_restriction.css('margin-left',getElementWidth(buttonBackward))}buttonBackward.hide();buttonForward.hide()}if(options.thumbnails_direction!=='horizontal'){var
buttonsHeight=(getElementHeight(buttonBackward))+(getElementHeight(buttonForward));thumb_restriction.css('height',options.content_height-buttonsHeight)}else{var
buttonsWidth=(getElementWidth(buttonBackward))+(getElementWidth(buttonForward));thumb_restriction.css('width',showcase_width-buttonsWidth)}if(options.thumbnails_direction==='horizontal'){jQuery('.showcase-thumbnail').each(function(){thumbnailStretch+=getElementWidth(jQuery(this))});thumb_wrapper.css('width',thumbnailStretch)}else{jQuery('.showcase-thumbnail').each(function(){thumbnailStretch+=getElementHeight(jQuery(this))})}}if(options.thumbnails&&options.thumbnails_position.indexOf("outside")!==-1&&options.thumbnails_direction!=='horizontal'&&!options.viewline){showcase.css('width',showcase_width+getElementWidth(thumb_wrapper,true,false))}else
if(!options.fit_to_parent){showcase.css('width',showcase_width)}if(content_count>1&&options.auto){myInterval=window.setInterval(autoChange,options.interval)}if(options.auto&&options.pauseonover){showcase.mouseenter(function(){break_loop=true;clearInterval(myInterval)});showcase.mouseleave(function(){if(!pause_loop){break_loop=false;myInterval=window.setInterval(autoChange,options.interval)}})}if(options.arrows&&content_count>1){jQuery(document.createElement('div')).addClass('showcase-arrow-previous').prependTo(showcase).click(function(){if(myInterval){if(options.stoponclick){pause_loop=true}clearInterval(myInterval)}changeContent((current_id===0)?content_count-1:parseInt(current_id)-1,'previous')});jQuery(document.createElement('div')).addClass('showcase-arrow-next').prependTo(showcase).click(function(){if(myInterval){if(options.stoponclick){pause_loop=true}clearInterval(myInterval)}changeContent(current_id+1,'next')});if(options.viewline){$('.showcase-arrow-previous').hide()}}if(options.buttons&&content_count>1){jQuery(document.createElement('div')).css('clear','both').addClass('showcase-button-wrapper').appendTo(showcase);i=0;while(i<content_count){jQuery(document.createElement('span')).attr('id','showcase-navigation-button-'+i).addClass((i===0)?'active':'').html((options.btn_numbers)?parseInt(i)+1:'&#9679;').click(function(a,b){return
function(){if(myInterval){if(options.stoponclick){pause_loop=true}clearInterval(myInterval)}changeContent(a,b)}}(i,'')).appendTo(jQuery(showcase).find('.showcase-button-wrapper'));i++}}if(options.keybord_keys){jQuery(document).keydown(function(e){if(options.stoponclick){pause_loop=true}if(myInterval)clearInterval(myInterval);if(e.keyCode===37){changeContent((current_id===0)?content_count-1:parseInt(current_id)-1,'previous')}if(e.keyCode===39){changeContent((current_id===content_count-1)?0:parseInt(current_id)+1,'next')}})}function
getContent(id){var new_content=jQuery(document.createElement('div')).attr('id','showcase-content-'+id).css('overflow','hidden').css('position','absolute').addClass('showcase-content').html(contentArray[id]);if(!options.viewline){new_content.css('width',options.content_width)}if(options.fit_to_parent&&!options.viewline){new_content.css('left',(showcase_width/2)-options.content_width/2)}return
new_content}function autoChange(){var
nextID=parseInt(current_id)+1;if(nextID===content_count&&options.continuous){nextID=0}else
if(nextID===content_count&&!options.continuous){break_loop=true;clearInterval(myInterval)}if(!break_loop){changeContent(nextID,'next')}}function
changeContent(id,direction){if(current_id!==id&&!animating){var
obj;var obj2;var delay=0;var i;var
lrpos=(options.fit_to_parent)?(showcase_width/2)-(options.content_width/2):0;if((id>current_id&&direction!=='previous')||direction==='next'){if(options.viewline){if(current_id<content_count-1){if(!options.speed_change){animating=true}updateContentViewlineWidth();if(options.pauseonover){window.clearInterval(myInterval)}remaining_width=0;for(i=current_id+1,len=content_count;i<len;++i){obj=addedContentArray[i];remaining_width+=obj.find('.showcase-content').children().width()}if(remaining_width>showcase_width){old_animation_distance=animation_distance;animation_distance-=addedContentArray[current_id].find('.showcase-content').children().width()}else
if($('.showcase-arrow-next').is(':visible')){old_animation_distance=animation_distance;animation_distance=-(content_viewline_width-(remaining_width+(showcase_width-remaining_width)));$('.showcase-arrow-next').fadeOut(300)}content_container.animate({left:animation_distance+'px'},options.transition_speed,function(){animating=false});if($('.showcase-arrow-next').is(':visible')){current_id++}$('.showcase-arrow-previous').fadeIn(300)}}else{if(!options.speed_change){animating=true}obj=jQuery(showcase).find('#showcase-content-'+parseInt(current_id));obj2=getContent(id);content_container.append(obj2);if(options.dynamic_height){obj2.css('height',obj2.find('.showcase-content').children().height())}else{obj2.css('height',options.content_height)}if(obj.find('.showcase-content').children().height()>obj2.find('.showcase-content').children().height()&&options.dynamic_height){content_container.stop(true,true).animate({height:obj2.find('.showcase-content').children().height()},200);delay=100}if(options.transition==='hslide'){jQuery(obj).delay(delay).animate({left:-(options.content_width)},options.transition_speed+options.transition_delay,function(){obj.remove()})}else
if(options.transition==='vslide'){jQuery(obj).delay(delay).animate({top:-(options.content_height)},options.transition_speed+options.transition_delay,function(){obj.remove()})}else{jQuery(obj).delay(delay).fadeOut(options.transition_speed,function(){obj.remove()})}displayAnchors(obj,true);displayCaption(obj,true);if(options.transition==='hslide'){obj2.css('left',showcase_width);jQuery(obj2).delay(delay).animate({left:lrpos},options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}else
if(options.transition==='vslide'){obj2.css('top',showcase.height());jQuery(obj2).delay(delay).animate({top:'0px'},options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}else{obj2.css('left',lrpos);obj2.css('display','none');jQuery(obj2).delay(delay).fadeIn(options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}}}else
if(id<current_id||direction==='previous'){if(options.viewline){if(current_id!==0){if(!options.speed_change){animating=true}updateContentViewlineWidth();if(options.pauseonover){window.clearInterval(myInterval)}content_container.animate({left:old_animation_distance+'px'},options.transition_speed,function(){animating=false});animation_distance=old_animation_distance;current_id--;if(current_id===0){$('.showcase-arrow-previous').fadeOut(300)}old_id=current_id-1;sub_width=jQuery(addedContentArray[old_id]).width();old_animation_distance=old_animation_distance+sub_width}$('.showcase-arrow-next').fadeIn(300)}else{if(!options.speed_change){animating=true}obj=jQuery(showcase).find('#showcase-content-'+parseInt(current_id));obj2=getContent(id);content_container.append(obj2);if(options.dynamic_height){obj2.css('height',obj2.find('.showcase-content').children().height())}else{obj2.css('height',options.content_height)}if(obj.find('.showcase-content').children().height()>obj2.find('.showcase-content').children().height()&&options.dynamic_height){content_container.stop(true,true).animate({height:obj2.find('.showcase-content').children().height()},200);delay=100}if(options.transition==='hslide'){jQuery(obj).delay(delay).animate({left:(showcase_width)+'px'},options.transition_speed+options.transition_delay,function(){displayAnchors(obj,true);displayCaption(obj,true);obj.remove()})}else
if(options.transition==='vslide'){jQuery(obj).delay(delay).animate({top:(options.content_height)+'px'},options.transition_speed+options.transition_delay,function(){displayAnchors(obj,true);displayCaption(obj,true);obj.remove()})}else{jQuery(obj).delay(delay).fadeOut(options.transition_speed,function(){displayAnchors(obj,true);displayCaption(obj,true);obj.remove()})}if(options.transition==='hslide'){obj2.css('left','-'+options.content_width+'px');jQuery(obj2).delay(delay).animate({left:lrpos},options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}else
if(options.transition==='vslide'){obj2.css('top','-'+showcase.height()+'px');jQuery(obj2).delay(delay).animate({top:'0px'},options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}else{obj2.css('left',lrpos);obj2.css('display','none');jQuery(obj2).delay(delay).fadeIn(options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}content_container.append(obj2)}}if(!options.viewline){previous_id=current_id;current_id=id;if(options.thumbnails){if((current_id>previous_id&&direction!=='previous')||direction==='next'){slideThumbnailWrapper('forward',true)}else
if(current_id<previous_id||direction==='previous'){slideThumbnailWrapper('backward',true)}}if(options.arrows){jQuery(showcase).find('.showcase-arrow-previous').unbind('click').click(function(){if(myInterval){if(options.stoponclick){pause_loop=true}clearInterval(myInterval)}changeContent((current_id===0)?content_count-1:parseInt(current_id)-1,'previous')});jQuery(showcase).find('.showcase-arrow-next').unbind('click').click(function(){if(myInterval){if(options.stoponclick){pause_loop=true}clearInterval(myInterval)}changeContent((current_id===content_count-1)?0:parseInt(current_id)+1,'next')})}if(options.thumbnails){i=0;showcase.find('.showcase-thumbnail').each(function(){var
object=jQuery(this);object.removeClass('active');if(i===current_id){object.addClass('active')}i++})}if(options.show_caption==='show'){jQuery(obj2).find('.showcase-caption').show()}}if(options.buttons){i=0;showcase.find('.showcase-button-wrapper
span').each(function(){var
object=jQuery(this);object.removeClass('active');if(i===current_id){object.addClass('active')}i++})}if(typeof
options.custom_function=='function'){options.custom_function()}}}function
afterAnimation(obj){if(options.dynamic_height){content_container.stop(true,true).animate({height:obj.find('.showcase-content').children().height()},200)}animating=false}var
thumbnailSlidePosition=0;function
slideThumbnailWrapper(direction,check,backwardforward){var
doTheSlide=true;var
thumbnailHeightOrWidth=getElementHeight(jQuery(thumb_wrapper).find('.showcase-thumbnail'));if(options.thumbnails_direction==='horizontal'){thumbnailHeightOrWidth=getElementWidth(jQuery(thumb_wrapper).find('.showcase-thumbnail'))}var
multiplySlidePosition=1;if(options.thumbnails_slidex===0){options.thumbnails_slidex=thumbnailsPerPage}if(check){var
thumbnailSlidePositionCopy=thumbnailSlidePosition;var
thumbnailsScrolled=0;while(thumbnailSlidePositionCopy<0){if(options.thumbnails_direction==='horizontal'){thumbnailSlidePositionCopy+=getElementWidth(jQuery(thumbnailArray[0]))}else{thumbnailSlidePositionCopy+=getElementHeight(jQuery(thumbnailArray[0]))}thumbnailsScrolled++}var
firstVisible=thumbnailsScrolled;var
lastVisible=thumbnailsPerPage+thumbnailsScrolled-1;if(current_id>=firstVisible&&current_id<=lastVisible){doTheSlide=false}var
distance;if((current_id-lastVisible)>options.thumbnails_slidex){distance=current_id-lastVisible;while(distance>options.thumbnails_slidex){distance-=options.thumbnails_slidex;multiplySlidePosition++}}else
if((firstVisible-current_id)>options.thumbnails_slidex){distance=firstVisible-current_id;while(distance>options.thumbnails_slidex){distance-=options.thumbnails_slidex;multiplySlidePosition++}}else{multiplySlidePosition=1}}if(direction==='forward'&&doTheSlide){if(options.thumbnails_direction==='vertical'&&options.content_height<(thumbnailStretch+thumbnailSlidePosition)){thumbnailSlidePosition-=thumbnailHeightOrWidth*(options.thumbnails_slidex*multiplySlidePosition)}else
if(options.thumbnails_direction==='horizontal'&&options.content_width<(thumbnailStretch+thumbnailSlidePosition)){thumbnailSlidePosition-=thumbnailHeightOrWidth*(options.thumbnails_slidex*multiplySlidePosition)}else
if(current_id===0){if(!backwardforward){thumbnailSlidePosition=0}}if(options.thumbnails_direction==='horizontal'){thumb_wrapper.animate({left:thumbnailSlidePosition},300)}else{thumb_wrapper.animate({top:thumbnailSlidePosition},300)}}else
if(doTheSlide){if(thumbnailSlidePosition<0){thumbnailSlidePosition+=thumbnailHeightOrWidth*(options.thumbnails_slidex*multiplySlidePosition)}else
if(current_id===content_count-1){if(!backwardforward){thumbnailSlidePosition-=thumbnailHeightOrWidth*(options.thumbnails_slidex*multiplySlidePosition)}}else{thumbnailSlidePosition=0}if(options.thumbnails_direction==='horizontal'){thumb_wrapper.animate({left:thumbnailSlidePosition},300)}else{thumb_wrapper.animate({top:thumbnailSlidePosition},300)}}}function
displayCaption(container,fadeOut){var
caption=container.find('.showcase-caption');if(!fadeOut){if(options.show_caption==='onload'){caption.fadeIn(300)}else
if(options.show_caption==='onhover'){jQuery(container).mouseenter(function(){caption.fadeIn(300)});jQuery(container).mouseleave(function(){caption.stop(true,true).fadeOut(100)})}}else{caption.stop(true,true).fadeOut(300)}}function
displayAnchors(container,fadeOut){container.find('.showcase-tooltips
a').each(function(){if(!fadeOut){var
coords=jQuery(this).attr('coords');coords=coords.split(',');jQuery(this).addClass('showcase-plus-anchor');jQuery(this).css('position','absolute');jQuery(this).css('display','none');jQuery(this).css('width',options.tooltip_icon_width);jQuery(this).css('height',options.tooltip_icon_height);jQuery(this).css('left',parseInt(coords[0])-(parseInt(options.tooltip_icon_width)/2));jQuery(this).css('top',parseInt(coords[1])-(parseInt(options.tooltip_icon_height)/2));var
content=jQuery(this).html();jQuery(this).mouseenter(function(){animateTooltip(container,coords[0],coords[1],content)});jQuery(this).mouseleave(function(){animateTooltip(container,coords[0],coords[1],content)});jQuery(this).html('');jQuery(this).fadeIn(300)}else{jQuery(this).stop(true,true).fadeOut(300)}})}var
tooltip=null;function
animateTooltip(container,x,y,content){if(tooltip===null){tooltip=jQuery(document.createElement('div')).addClass('showcase-tooltip').css('display','none').css('position','absolute').css('max-width',options.tooltip_width).html(content);container.append(tooltip);var
tooltip_paddingx=parseInt(tooltip.css('padding-right'))*2+parseInt(tooltip.css('border-right-width'))*2;var
tooltip_paddingy=parseInt(tooltip.css('padding-bottom'))*2+parseInt(tooltip.css('border-bottom-width'))*2;lastx=parseInt(x)+tooltip.width()+tooltip_paddingx;lasty=parseInt(y)+tooltip.height()+tooltip_paddingy;if(lastx<options.content_width){tooltip.css('left',parseInt(x)+parseInt(options.tooltip_offsetx))}else{tooltip.css('left',(parseInt(x)-parseInt(options.tooltip_offsetx))-(parseInt(tooltip.width())+parseInt(options.tooltip_offsetx)))}if(lasty<options.content_height){tooltip.css('top',parseInt(y)+parseInt(options.tooltip_offsety))}else{tooltip.css('top',(parseInt(y)-parseInt(options.tooltip_offsety))-(parseInt(tooltip.height())+parseInt(tooltip_paddingy)))}tooltip.fadeIn(400)}else{tooltip.fadeOut(400);tooltip.remove();tooltip=null}}function
getElementHeight(el,incHeight,incMargin,incPadding,incBorders){incHeight=typeof(incHeight)!=='undefined'?incHeight:true;incMargin=typeof(incMargin)!=='undefined'?incMargin:true;incPadding=typeof(incPadding)!=='undefined'?incPadding:true;incBorders=typeof(incBorders)!=='undefined'?incBorders:true;var
elHeight=(incHeight)?jQuery((el)).height():0;var
elMargin=(incMargin)?parseFloat(jQuery((el)).css('margin-top'))+parseFloat(jQuery(el).css('margin-bottom')):0;var
elPadding=(incPadding)?parseFloat(jQuery((el)).css('padding-top'))+parseFloat(jQuery(el).css('padding-bottom')):0;var
elBorder=(incBorders)?parseFloat(jQuery((el)).css('border-top-width'))+parseFloat(jQuery((el)).css('border-bottom-width')):0;elHeight+=elMargin+elPadding+elBorder;return
elHeight}function
getElementWidth(el,incWidth,incMargin,incPadding,incBorders){incWidth=typeof(incWidth)!=='undefined'?incWidth:true;incMargin=typeof(incMargin)!=='undefined'?incMargin:true;incPadding=typeof(incPadding)!=='undefined'?incPadding:true;incBorders=typeof(incBorders)!=='undefined'?incBorders:true;var
elWidth=(incWidth)?jQuery((el)).width():0;var
elMargin=(incMargin)?parseFloat(jQuery((el)).css('margin-left'))+parseFloat(jQuery(el).css('margin-right')):0;var
elPadding=(incPadding)?parseFloat(jQuery((el)).css('padding-left'))+parseFloat(jQuery((el)).css('padding-right')):0;var
elBorder=(incBorders)?parseFloat(jQuery((el)).css('border-left-width'))+parseFloat(jQuery((el)).css('border-right-width')):0;elWidth+=elMargin+elPadding+elBorder;return
elWidth}if(options.mousetrace){var
mousetrace=jQuery(document.createElement('div')).css('position','absolute').css('top','0').css('background-color','#fff').css('color','#000').css('padding','3px
5px').css('x-index','30').html('X:
0 Y: 0');showcase.append(mousetrace);var
offset=showcase.offset();content_container.mousemove(function(e){mousetrace.html('X:
'+(e.pageX-offset.left)+' Y:
'+(e.pageY-offset.top))})}$('#awOnePageButton').click(function
showInOnePage(){if($('.view-page').is(':visible')){var
temp_container=jQuery(document.createElement('div'));temp_container.addClass('showcase-onepage');showcase.before(temp_container);if(myInterval){pause_loop=true;clearInterval(myInterval)}$(this).find('.view-page').hide();$(this).find('.view-slide').show();showcase.hide();$.each(contentArray,function(index,value){obj=getContent(index);obj.css('position','relative');temp_container.append(obj);displayAnchors(obj);displayCaption(obj);if(options.dynamic_height){obj.css('height',obj.find('.showcase-content').children().height())}else{obj.css('height',options.content_height)}});var
clear=jQuery(document.createElement('div'));clear.addClass('clear');temp_container.append(clear)}else{$('.showcase-onepage').remove();$(this).find('.view-page').show();$(this).find('.view-slide').hide();showcase.show()}return
false});var addedContentArray=[];function updateContentViewlineWidth(){content_viewline_width=0;content_container.children('div').each(function(){content_viewline_width+=$(this).find('.showcase-content').children().width();addedContentArray.push($(this))})}showcase.removeClass('showcase-load')}})(jQuery);
</script>
<script
type='text/javascript'>
$(document).ready(function()
{
$("#showcase").awShowcase(
{
content_width: 650,
content_height: 305,
fit_to_parent: false,
auto: true,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: false,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /*
Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition:
'hslide', /* hslide/vslide/fade */
transition_delay: 300,
transition_speed: 500,
show_caption:
'onload', /* onload/onhover/show */
thumbnails: true,
thumbnails_position:
'outside-last', /*
outside-last/outside-first/inside-last/inside-first */
thumbnails_direction:
'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0
= auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /*
For dynamic height to work in webkit you need to set the width and height of
images in the source. Usually works to only set the dimension of the first
slide in the showcase. */
speed_change: false, /*
Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set
to true content_width, thumbnails, transition and dynamic_height will be
disabled. As for dynamic height you need to set the width and height of
images in the source. */
});
});
</script>
|
Si quieres cambiar el tamaño de tu
slideshow solo basta con cambiar los valores en este punto
content_width: 650,
content_height: 305,
6 Ahora si da un clic en “Guardar
plantilla”
7 Da un clic en “Diseño”
8 Abre un nuevo gadget donde dice “Añadir
un gadget”
9 Se te abrirá una nueva ventana en la
cual tendrás que buscar el widget que dice “HTML/Javascript” e inserta las
siguientes líneas de código en su interior
<div
id="showcase" class="showcase">
<div
class="showcase-slide">
<div
class="showcase-content">
<a href='http://www.ecuador-turistico.com/'target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2YlMP1oX8NyHIlQgOUtiqACc9r-9wOwhqf-1U2RuJ_Ro8LKUOq0Cc5-XqHAZVNq2jMBGMLUmlCYxzLZmJFr1eFEPnmsKHsgMyelCgq6rG0SOK37R82Pp8b7o3FzEA49bmeQ7w54i9TCU/s640/ayudadeblogger.JPG"
alt="Ecuador" class="slimage full noalign"
width="650" height="305" /> </a></div>
<div
class="showcase-caption">
<p>Conoce los lugares turísticos de
Ecuador...</p>
</div>
<div
class="showcase-thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2YlMP1oX8NyHIlQgOUtiqACc9r-9wOwhqf-1U2RuJ_Ro8LKUOq0Cc5-XqHAZVNq2jMBGMLUmlCYxzLZmJFr1eFEPnmsKHsgMyelCgq6rG0SOK37R82Pp8b7o3FzEA49bmeQ7w54i9TCU/s640/ayudadeblogger.JPG"
alt="Ecuador" class="slimage full noalign"
width="140" height="75" /> </div>
</div>
<div
class="showcase-slide">
<div
class="showcase-content">
<a href='http://www.ecuador-turistico.com/'target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8n0ziQ-GQLNgX4GRUuhqx6aeIn86L1iDN76shftVjaXIsTOpyntG4Q_PBbsRDMNA4TXh6xbE1jYzdxCedwUyLKIPaQZyv3B9-t7ZAL89nQmxCTuY2d14xYfXmeziYIS0ihEOEyUjEDeM/s640/ayudadeblogger.JPG"
alt="Ecuador" class="slimage full noalign"
width="650" height="305" /> </a></div>
<div
class="showcase-caption">
<p>Conoce
los lugares turísticos de Ecuador...</p>
</div>
<div
class="showcase-thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8n0ziQ-GQLNgX4GRUuhqx6aeIn86L1iDN76shftVjaXIsTOpyntG4Q_PBbsRDMNA4TXh6xbE1jYzdxCedwUyLKIPaQZyv3B9-t7ZAL89nQmxCTuY2d14xYfXmeziYIS0ihEOEyUjEDeM/s640/ayudadeblogger.JPG"
alt="Ecuador" class="slimage full noalign"
width="140" height="75" /> </div>
</div>
<div
class="showcase-slide">
<div
class="showcase-content">
<a href='http://www.ecuador-turistico.com/'target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaWAwZoY2LGuIEO9cYWp3aTUDoV1Mq9c2OcFFNF7RMWhr9I_R5CiOTMZOO_UKrw_T37mJk95O5wUij2f5RI-ZFFgT_8cU8j19EbBXNrs86YWN8cAf2JguFJm2PuOjyBS-M8JETSNWFey4/s640/ayudadeblogger.JPG"
alt="Ecuador" class="slimage full noalign"
width="650" height="305" /> </a></div>
<div
class="showcase-caption">
<p>Conoce
los lugares turísticos de Ecuador...</p>
</div>
<div
class="showcase-thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaWAwZoY2LGuIEO9cYWp3aTUDoV1Mq9c2OcFFNF7RMWhr9I_R5CiOTMZOO_UKrw_T37mJk95O5wUij2f5RI-ZFFgT_8cU8j19EbBXNrs86YWN8cAf2JguFJm2PuOjyBS-M8JETSNWFey4/s640/ayudadeblogger.JPG"
alt="Ecuador" class="slimage full noalign"
width="140" height="75" /> </div>
</div>
<div
class="showcase-slide">
<div
class="showcase-content">
<a href='http://www.ecuador-turistico.com/'target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1GsdgQFC6lhe6G5x8ikRIql0Y6kkdSq24fviQaxRGwwegr2H_4Eb9OL1wjjFxcw0io4LExjknXqIPO4W9ggaIE0zb_cMUbawV90NQVRcE65NJdUxOseO8IbF0pHfqO4deK_3GEp0quqQ/s640/ayudadeblogger.JPG"
alt="Ecuador" class="slimage full noalign"
width="650" height="305" /> </a></div>
<div
class="showcase-caption">
<p>Conoce
los lugares turísticos de Ecuador...</p>
</div>
<div
class="showcase-thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1GsdgQFC6lhe6G5x8ikRIql0Y6kkdSq24fviQaxRGwwegr2H_4Eb9OL1wjjFxcw0io4LExjknXqIPO4W9ggaIE0zb_cMUbawV90NQVRcE65NJdUxOseO8IbF0pHfqO4deK_3GEp0quqQ/s640/ayudadeblogger.JPG"
alt="Ecuador" class="slimage full noalign"
width="140" height="75" /> </div>
</div>
</div>
<div
style="clear:both; margin-bottom: 20px;"></div>
|
Realiza estos cambios:
El link que esta marcado de color azul http://www.ecuador-turistico.com/ deberás
remplazarlo por el link de tu post articulo que quieras dar a conocer, cuando
den un clic en la imagen se abrirá una nueva ventana en la cual mostrara el
post que distes a conocer
Cambia los links de las imágenes que están
marcadas de diferentes colores por los links de las imágenes de tus artículos
que quieras mostrar en tun slideshow
Por último pon una pequeña descripción donde
dice “Conoce los lugares turísticos de
Ecuador...” podrás borrarlo y poner el titulo o descripción que tú quieras.
Ahora si dale un clic en “Guardar” y
ubica tu nuevo widget slideshow en la cabecera principal de tu blog.
¿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
1 comentario: