O slide que você sempre desejou ter em seu blog agora está em suas mãos.
Hoje trazemos mais uma opção para personalização de seu blog. Dessa vez apresentamos um slideshow que é uma boa maneira para destacar seus melhores posts de uma maneira bem atrativa, funcional e que chamará imediatamente a atenção dos visitantes para os arquivos que você selecionar.
Esse slide tem uma instalação e configuração relativamente simples, mas, requer bastante atenção para que tudo seja feito de maneira perfeita e não aconteça erros. Depois de instalado e configurado, você poderá apreciar a beleza e funcionalidade que combinará perfeitamente com seu blog, pois, o efeito presente nele deixa a imagem "escondida", e ao passar o mouse ela se revela lateralmente por completa juntamente com o título escolhido por você.
Antes de começar, hospede as imagens que farão parte de seu slide (recomendamos que sejam imagens com uma boa definição).
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
Colocando o SlideShow em seu blog
1- Acesse seu blogger, vá em "Modelo" e depois "Editar HTML".
2- Clique no código de seu template, pressione "CTRL+F" e pesquise por </head>
3- Logo ACIMA da tag pesquisada, cole o seguinte código.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
Kwicks for jQuery (version 1.5.1)
Copyright (c) 2008 Jeremy Martin
http://www.jeremymartin.name/projects.php?project=kwicks
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function() {
$('.kwicks').kwicks({
max : 600,
min : 300,
spacing : -4,
duration: 200
});
});
/*]]>*/
</script>
#slidewrap {margin: 0px auto 20px;padding: 0 0 0px 0;position: relative;width: 920px;height: 363px;overflow: hidden;}
.kwicks {/* recommended styles for kwicks ul container */
list-style: none;position: relative;margin: 0;padding: 0;}
.kwicks li{/* these are required, but the values are up to you (must be pixel) */
width: 187.2px;height: 363px;/*do not change these */
display: block;overflow: hidden;padding: 0px;/* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.fadeout {display: block;position: absolute;right: 0px;width: 300px;height: 365px;z-index: 4;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyA5P6n0Z4x_WzNVEZY2IzyAh9eyA-FbZHX61W7npI9MrfXFltZ_IuzSQb7V1TkjCClzSsEk2ka_WLDKvPYCwHlMc5kbsZOji0ifB73fJ3553ZDH70yxqe5x6SE61VVbCfftDl6LuoTLPP/s1600/overlay.png) repeat-y scroll top right;}
.kwicks.horizontal li {/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-right: -4px;/*Set to same as spacing option. */
float: left;}
.kwicks.vertical li{/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-bottom: 5px;/*Set to same as spacing option. */
}
.kwicks .excerpt {background: #182424;color: #fff;opacity: 0.77;filter:alpha(opacity=77);position: absolute;padding: 10px;bottom: 0;}
.excerpt h2 {margin-bottom: 10px;}
.excerpt h2 a, .excerpt h2 a:visited {color: #fff;font-size:16px;text-transform:uppercase;}
.kwicks img {margin: 0;padding:0;}
<!-- Slider -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div id='slidewrap'>
<nav>
<ul class='kwicks horizontal'>
<li>
<span class='fadeout'/>
<div class='excerpt'>
<h2>
<a href='LINK AQUI' rel='bookmark' title='Link Permanente'>Este é o padrão apresentado slide 1 Título 1</a>
</h2>
</div>
<img alt='' height='363' src='http://goswanky.com/wp-content/uploads/2013/03/bbg1.jpg' width='650'/>
</li>
<li>
<span class='fadeout'/>
<div class='excerpt'>
<h2>
<a href='LINK AQUI' rel='bookmark' title='Link Permanente'>Este é o padrão apresentado slide 2 Título 2</a>
</h2>
</div>
<img alt='' height='363' src='http://www.laharitechnologies.info/images/web_design_img.jpg' width='650'/>
</li>
<li>
<span class='fadeout'/>
<div class='excerpt'>
<h2>
<a href='LINK AQUI' rel='bookmark' title='Link Permanente'>Este é o padrão apresentado slide 3 Título 3</a>
</h2>
</div>
<img alt='' height='363' src='http://www.digital.art.br/images/polarambiental.jpg' width='650'/>
</li>
<li>
<span class='fadeout'/>
<div class='excerpt'>
<h2>
<a href='LINK AQUI' rel='bookmark' title='Link Permanente'>Este é o padrão apresentado slide 4 Título 4</a>
</h2>
</div>
<img alt='' height='363' src='http://www.bamwebdesign.co.nz/images/frontpage.jpg' width='650'/>
</li>
<li>
<span class='fadeout'/>
<div class='excerpt'>
<h2>
<a href='LINK AQUI' rel='bookmark' title='Link Permanente'>Este é o padrão apresentado slide 5 Título 5</a>
</h2>
</div>
<img alt='' height='363' src='http://www.laharitechnologies.info/images/web_design_img.jpg' width='650'/>
</li>
</ul>
</nav>
</div>
</b:if></b:if>
* As partes destacadas em VERMELHO, substitua pelos links referentes aos arquivos destacados.
* As partes destacadas em AZUL, substitua pelos títulos referentes aos arquivos.
* As partes destacadas em VERDE, substitua pelas urls das imagens que você hospedou.
7- Logo ABAIXO da tag pesquisada cole o código que você fez as alterações.
8- Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".
9- Veja o resultado em seu blog.
OBSERVAÇÃO: O slide está configurado para aparecer somente na página inicial de seu blog.
Gostou? Comente. O seu comentário é a motivação para nosso trabalho.
Comentários