Coloque em seu blog um slide profissional que deixará seus melhores posts em destaque absoluto.
Dar um destaque aos nossos melhores artigos, é que nós blogueiros buscamos a cada dia. Tentamos de todos os jeitos, buscamos os melhores widgets, usamos vários efeitos em CSS e tudo que possamos “apelar” para que aqueles posts possam ser vistos pelos visitantes de nosso blog. E sempre deparamos com uma das opções mais usadas que são os slides.
Encontramos slides aos montes na web, mas, nem sempre é do jeito que queremos. Às vezes os conflitos com outros scripts, outras o tamanho que não se ajusta e em alguns casos o design. Muitos veem templates com slides espetaculares, efeitos “de cair o queixo” e sonham em ter um daqueles em seu blog.
Apresentamos hoje uma opção que pode saciar alguns de seus desejos de blogueiro. Esse slide profissional não deixa a desejar com relação a funcionalidade, pois, realiza o que é determinado com facilidade. Seu design é um dos pontos fortes e alia fundo para o título transparente, setas laterais para navegação e numeração para marcação do destaque atual e tudo isso juntamente com especiais efeitos de transição.
Se você gostou e quer ter certeza de que é esse que esperava para ter em seu blog, veja a seguir como é simples de instalar e configurar.
Observações:
* Hospede imagens com uma boa definição;
* Este slide aparecerá somente na página inicial de seu blog.
* Hospede imagens com uma boa definição;
* Este slide aparecerá somente na página inicial de seu blog.
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.
Instalando em seu blog
>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
>> Clique no código do template, pressione "CTRL+F" e pesquise por </head>
>> Logo ACIMA da tag encontrada cole o seguinte código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/>>> Pesquise agora por ]]></b:skin>
<script type='text/javascript'>
//<![CDATA[
/* jQuery Nivo Slider v2.7.1
* http://nivo.dev7studios.com
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* March 2010
*/
(function(b){var a=function(m,s){var j=b.extend({},b.fn.nivoSlider.defaults,s);var p={currentSlide:0,currentImage:"",totalSlides:0,running:false,paused:false,stop:false};var d=b(m);d.data("nivo:vars",p);d.css("position","relative");d.addClass("nivoSlider");var e=d.children();e.each(function(){var v=b(this);var u="";if(!v.is("img")){if(v.is("a")){v.addClass("nivo-imageLink");u=v}v=v.find("img:first")}var t=v.width();if(t==0){t=v.attr("width")}var i=v.height();if(i==0){i=v.attr("height")}if(t>d.width()){d.width(t)}if(i>d.height()){d.height(i)}if(u!=""){u.css("display","none")}v.css("display","none");p.totalSlides++});if(j.randomStart){j.startSlide=Math.floor(Math.random()*p.totalSlides)}if(j.startSlide>0){if(j.startSlide>=p.totalSlides){j.startSlide=p.totalSlides-1}p.currentSlide=j.startSlide}if(b(e[p.currentSlide]).is("img")){p.currentImage=b(e[p.currentSlide])}else{p.currentImage=b(e[p.currentSlide]).find("img:first")}if(b(e[p.currentSlide]).is("a")){b(e[p.currentSlide]).css("display","block")}d.css("background",'url("'+p.currentImage.attr("src")+'") no-repeat');d.append(b('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:j.captionOpacity}));b(".nivo-caption",d).css("opacity",0);var q=function(i){var u=b(".nivo-caption",d);if(p.currentImage.attr("title")!=""&&p.currentImage.attr("title")!=undefined){var t=p.currentImage.attr("title");if(t.substr(0,1)=="#"){t=b(t).html()}if(u.css("opacity")!=0){u.find("p").stop().fadeTo(i.animSpeed,0,function(){b(this).html(t);b(this).stop().fadeTo(i.animSpeed,1)})}else{u.find("p").html(t)}u.stop().fadeTo(i.animSpeed,i.captionOpacity)}else{u.stop().fadeTo(i.animSpeed,0)}};q(j);var c=0;if(!j.manualAdvance&&e.length>1){c=setInterval(function(){r(d,e,j,false)},j.pauseTime)}if(j.directionNav){d.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+j.prevText+'</a><a class="nivo-nextNav">'+j.nextText+"</a></div>");if(j.directionNavHide){b(".nivo-directionNav",d).hide();d.hover(function(){b(".nivo-directionNav",d).show()},function(){b(".nivo-directionNav",d).hide()})}b("a.nivo-prevNav",d).live("click",function(){if(p.running){return false}clearInterval(c);c="";p.currentSlide-=2;r(d,e,j,"prev")});b("a.nivo-nextNav",d).live("click",function(){if(p.running){return false}clearInterval(c);c="";r(d,e,j,"next")})}if(j.controlNav){var n=b('<div class="nivo-controlNav"></div>');d.append(n);for(var l=0;l<e.length;l++){if(j.controlNavThumbs){var f=e.eq(l);if(!f.is("img")){f=f.find("img:first")}if(j.controlNavThumbsFromRel){n.append('<a class="nivo-control" rel="'+l+'"><img src="'+f.attr("rel")+'" alt="" /></a>')}else{n.append('<a class="nivo-control" rel="'+l+'"><img src="'+f.attr("src").replace(j.controlNavThumbsSearch,j.controlNavThumbsReplace)+'" alt="" /></a>')}}else{n.append('<a class="nivo-control" rel="'+l+'">'+(l+1)+"</a>")}}b(".nivo-controlNav a:eq("+p.currentSlide+")",d).addClass("active");b(".nivo-controlNav a",d).live("click",function(){if(p.running){return false}if(b(this).hasClass("active")){return false}clearInterval(c);c="";d.css("background",'url("'+p.currentImage.attr("src")+'") no-repeat');p.currentSlide=b(this).attr("rel")-1;r(d,e,j,"control")})}if(j.keyboardNav){b(window).keypress(function(i){if(i.keyCode=="37"){if(p.running){return false}clearInterval(c);c="";p.currentSlide-=2;r(d,e,j,"prev")}if(i.keyCode=="39"){if(p.running){return false}clearInterval(c);c="";r(d,e,j,"next")}})}if(j.pauseOnHover){d.hover(function(){p.paused=true;clearInterval(c);c=""},function(){p.paused=false;if(c==""&&!j.manualAdvance){c=setInterval(function(){r(d,e,j,false)},j.pauseTime)}})}d.bind("nivo:animFinished",function(){p.running=false;b(e).each(function(){if(b(this).is("a")){b(this).css("display","none")}});if(b(e[p.currentSlide]).is("a")){b(e[p.currentSlide]).css("display","block")}if(c==""&&!p.paused&&!j.manualAdvance){c=setInterval(function(){r(d,e,j,false)},j.pauseTime)}j.afterChange.call(this)});var g=function(v,u,x){for(var t=0;t<u.slices;t++){var w=Math.round(v.width()/u.slices);if(t==u.slices-1){v.append(b('<div class="nivo-slice"></div>').css({left:(w*t)+"px",width:(v.width()-(w*t))+"px",height:"0px",opacity:"0",background:'url("'+x.currentImage.attr("src")+'") no-repeat -'+((w+(t*w))-w)+"px 0%"}))}else{v.append(b('<div class="nivo-slice"></div>').css({left:(w*t)+"px",width:w+"px",height:"0px",opacity:"0",background:'url("'+x.currentImage.attr("src")+'") no-repeat -'+((w+(t*w))-w)+"px 0%"}))}}};var h=function(u,i,x){var t=Math.round(u.width()/i.boxCols);var y=Math.round(u.height()/i.boxRows);for(var v=0;v<i.boxRows;v++){for(var w=0;w<i.boxCols;w++){if(w==i.boxCols-1){u.append(b('<div class="nivo-box"></div>').css({opacity:0,left:(t*w)+"px",top:(y*v)+"px",width:(u.width()-(t*w))+"px",height:y+"px",background:'url("'+x.currentImage.attr("src")+'") no-repeat -'+((t+(w*t))-t)+"px -"+((y+(v*y))-y)+"px"}))}else{u.append(b('<div class="nivo-box"></div>').css({opacity:0,left:(t*w)+"px",top:(y*v)+"px",width:t+"px",height:y+"px",background:'url("'+x.currentImage.attr("src")+'") no-repeat -'+((t+(w*t))-t)+"px -"+((y+(v*y))-y)+"px"}))}}}};var r=function(I,H,L,E){var G=I.data("nivo:vars");if(G&&(G.currentSlide==G.totalSlides-1)){L.lastSlide.call(this)}if((!G||G.stop)&&!E){return false}L.beforeChange.call(this);if(!E){I.css("background",'url("'+G.currentImage.attr("src")+'") no-repeat')}else{if(E=="prev"){I.css("background",'url("'+G.currentImage.attr("src")+'") no-repeat')}if(E=="next"){I.css("background",'url("'+G.currentImage.attr("src")+'") no-repeat')}}G.currentSlide++;if(G.currentSlide==G.totalSlides){G.currentSlide=0;L.slideshowEnd.call(this)}if(G.currentSlide<0){G.currentSlide=(G.totalSlides-1)}if(b(H[G.currentSlide]).is("img")){G.currentImage=b(H[G.currentSlide])}else{G.currentImage=b(H[G.currentSlide]).find("img:first")}if(L.controlNav){b(".nivo-controlNav a",I).removeClass("active");b(".nivo-controlNav a:eq("+G.currentSlide+")",I).addClass("active")}q(L);b(".nivo-slice",I).remove();b(".nivo-box",I).remove();var u=L.effect;if(L.effect=="random"){var N=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade","boxRandom","boxRain","boxRainReverse","boxRainGrow","boxRainGrowReverse");u=N[Math.floor(Math.random()*(N.length+1))];if(u==undefined){u="fade"}}if(L.effect.indexOf(",")!=-1){var N=L.effect.split(",");u=N[Math.floor(Math.random()*(N.length))];if(u==undefined){u="fade"}}if(G.currentImage.attr("data-transition")){u=G.currentImage.attr("data-transition")}G.running=true;if(u=="sliceDown"||u=="sliceDownRight"||u=="sliceDownLeft"){g(I,L,G);var M=0;var J=0;var t=b(".nivo-slice",I);if(u=="sliceDownLeft"){t=b(".nivo-slice",I)._reverse()}t.each(function(){var i=b(this);i.css({top:"0px"});if(J==L.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},L.animSpeed,"",function(){I.trigger("nivo:animFinished")})},(100+M))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},L.animSpeed)},(100+M))}M+=50;J++})}else{if(u=="sliceUp"||u=="sliceUpRight"||u=="sliceUpLeft"){g(I,L,G);var M=0;var J=0;var t=b(".nivo-slice",I);if(u=="sliceUpLeft"){t=b(".nivo-slice",I)._reverse()}t.each(function(){var i=b(this);i.css({bottom:"0px"});if(J==L.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},L.animSpeed,"",function(){I.trigger("nivo:animFinished")})},(100+M))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},L.animSpeed)},(100+M))}M+=50;J++})}else{if(u=="sliceUpDown"||u=="sliceUpDownRight"||u=="sliceUpDownLeft"){g(I,L,G);var M=0;var J=0;var C=0;var t=b(".nivo-slice",I);if(u=="sliceUpDownLeft"){t=b(".nivo-slice",I)._reverse()}t.each(function(){var i=b(this);if(J==0){i.css("top","0px");J++}else{i.css("bottom","0px");J=0}if(C==L.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},L.animSpeed,"",function(){I.trigger("nivo:animFinished")})},(100+M))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},L.animSpeed)},(100+M))}M+=50;C++})}else{if(u=="fold"){g(I,L,G);var M=0;var J=0;b(".nivo-slice",I).each(function(){var i=b(this);var v=i.width();i.css({top:"0px",height:"100%",width:"0px"});if(J==L.slices-1){setTimeout(function(){i.animate({width:v,opacity:"1.0"},L.animSpeed,"",function(){I.trigger("nivo:animFinished")})},(100+M))}else{setTimeout(function(){i.animate({width:v,opacity:"1.0"},L.animSpeed)},(100+M))}M+=50;J++})}else{if(u=="fade"){g(I,L,G);var A=b(".nivo-slice:first",I);A.css({height:"100%",width:I.width()+"px"});A.animate({opacity:"1.0"},(L.animSpeed*2),"",function(){I.trigger("nivo:animFinished")})}else{if(u=="slideInRight"){g(I,L,G);var A=b(".nivo-slice:first",I);A.css({height:"100%",width:"0px",opacity:"1"});A.animate({width:I.width()+"px"},(L.animSpeed*2),"",function(){I.trigger("nivo:animFinished")})}else{if(u=="slideInLeft"){g(I,L,G);var A=b(".nivo-slice:first",I);A.css({height:"100%",width:"0px",opacity:"1",left:"",right:"0px"});A.animate({width:I.width()+"px"},(L.animSpeed*2),"",function(){A.css({left:"0px",right:""});I.trigger("nivo:animFinished")})}else{if(u=="boxRandom"){h(I,L,G);var K=L.boxCols*L.boxRows;var J=0;var M=0;var x=o(b(".nivo-box",I));x.each(function(){var i=b(this);if(J==K-1){setTimeout(function(){i.animate({opacity:"1"},L.animSpeed,"",function(){I.trigger("nivo:animFinished")})},(100+M))}else{setTimeout(function(){i.animate({opacity:"1"},L.animSpeed)},(100+M))}M+=20;J++})}else{if(u=="boxRain"||u=="boxRainReverse"||u=="boxRainGrow"||u=="boxRainGrowReverse"){h(I,L,G);var K=L.boxCols*L.boxRows;var J=0;var M=0;var z=0;var F=0;var D=new Array();D[z]=new Array();var x=b(".nivo-box",I);if(u=="boxRainReverse"||u=="boxRainGrowReverse"){x=b(".nivo-box",I)._reverse()}x.each(function(){D[z][F]=b(this);F++;if(F==L.boxCols){z++;F=0;D[z]=new Array()}});for(var B=0;B<(L.boxCols*2);B++){var w=B;for(var y=0;y<L.boxRows;y++){if(w>=0&&w<L.boxCols){(function(T,O,S,P,U){var R=b(D[T][O]);var v=R.width();var Q=R.height();if(u=="boxRainGrow"||u=="boxRainGrowReverse"){R.width(0).height(0)}if(P==U-1){setTimeout(function(){R.animate({opacity:"1",width:v,height:Q},L.animSpeed/1.3,"",function(){I.trigger("nivo:animFinished")})},(100+S))}else{setTimeout(function(){R.animate({opacity:"1",width:v,height:Q},L.animSpeed/1.3)},(100+S))}})(y,w,M,J,K);J++}w--}M+=100}}}}}}}}}}};var o=function(u){for(var v,t,w=u.length;w;v=parseInt(Math.random()*w),t=u[--w],u[w]=u[v],u[v]=t){}return u};var k=function(i){if(this.console&&typeof console.log!="undefined"){console.log(i)}};this.stop=function(){if(!b(m).data("nivo:vars").stop){b(m).data("nivo:vars").stop=true;k("Stop Slider")}};this.start=function(){if(b(m).data("nivo:vars").stop){b(m).data("nivo:vars").stop=false;k("Start Slider")}};j.afterLoad.call(this);return this};b.fn.nivoSlider=function(c){return this.each(function(e,g){var d=b(this);if(d.data("nivoslider")){return d.data("nivoslider")}var f=new a(this,c);d.data("nivoslider",f)})};b.fn.nivoSlider.defaults={effect:"random",slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,prevText:"Prev",nextText:"Next",randomStart:false,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};b.fn._reverse=[].reverse})(jQuery);
//]]></script>
>> Logo ACIMA da tag encontrada cole o seguinte código:
/*NIVO SLIDER BLOGGER-------------------*/
.nivoSlider{position:relative;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPyOmkTLoTtJFVnkqgQ8niFOW9FNqinL1qc8FAVCkiVKJ1i1qtVNWHsthPRQEbT-E9r6itLVbsdFGg14rH2G1J47W0OrnASWQovLqmUV4ag4FNNtkpS6aUhSzbmvISNVpnqMiXonul00/s1600/loading.gif) no-repeat 50% 50%;width:550px;height:270px;margin:0 auto;}
.nivoSlider img{position:absolute;top:0;left:0;display:none}
.nivoSlider a{border:0;display:block}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%}
.nivo-box{display:block;position:absolute;z-index:5}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;opacity:0.8;width:100%;z-index:8}
.nivo-caption p{padding:5px 10px;margin:0}
.nivo-caption a{display:inline !important}
.nivo-html-caption{display:none}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}
.nivo-prevNav{left:0}
.nivo-nextNav{right:0}
.nivo-controlNav{position:absolute;top:10px;right:15px}
.nivo-controlNav a{font:normal 10px Verdana,Arial,Sans-Serif;color:white;text-decoration:none;position:relative;z-index:9;cursor:pointer;background-color:#111;padding:2px 0 3px;margin:0 1px;text-align:center;display:inline-block;*display:inline;width:20px;height:20px;line-height:20px}
.nivo-controlNav a.active{background-color:#B30B0B}
.nivo-directionNav a{display:block;width:30px;height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiViPTYYX56ZUEk0eCdwqgWeGG5s-JSMC-68vMMn9eAIEIB61vustfw0EXvFrgvceiYfGx2X0u-JUykxpHJ53XIpMmHglgA52Egx6XUrZiU-SbuHavKdD5Nw8BDmp6KmrqhhZtfAujFgo4/s1600/arrows.png) no-repeat;text-indent:-9999px;border:0}
a.nivo-nextNav{background-position:-30px 0;right:15px}
a.nivo-prevNav{left:15px}
.nivo-caption{font:bold 12px Arial,Sans-Serif}
.nivo-caption a{color:#fff;border-bottom:1px dotted #fff}
.nivo-caption a:hover{color:#fff;}
* Ajuste width:550px; (Largura) e height:270px (altura) para que fique de acordo com seu blog.
>> Pesquise agora por <div class='column-center-outer'>
(Esta div é encontrada em templates padrão Blogger. Caso seu blog não possuir, você terá que encontrar um outro trecho de código para colocar o slide)
>> Logo ABAIXO cole o seguinte código:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='nivoSlider' id='slider'>
<a href='Your LINK HERE'><img alt='' src='LINK IMAGEM AQUI' title='Este é o título do slide 1'/></a>
<a href='Your LINK HERE'><img alt='' src='LINK IMAGEM AQUI' title='Este é o título do slide 2'/></a>
<a href='Your LINK HERE'><img alt='' src='LINK IMAGEM AQUI' title='Este é o título do slide 3'/></a>
<a href='Your LINK HERE'><img alt='' src='LINK IMAGEM AQUI' title='Este é o título do slide 4'/></a>
</div>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
directionNavHide: true,
controlNav: true,
controlNavThumbs: false,
controlNavThumbsFromRel: false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav: true,
pauseOnHover: true,
manualAdvance: false,
captionOpacity: 0.8,
prevText: 'Prev',
nextText: 'Next',
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
</script>
<br/>
</b:if>
Atenção para as partes destacadas
* Em VERMELHO, substitua pelos links referentes aos artigos destacados.
* Em AZUL, substitua pelas urls das imagens que você hospedou.
* Em ROSA, substitua pelos títulos referentes aos artigos destacados.
>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".
>> Vá em seu blog e veja como ficou.
Deixe seu comentário, pois ele é a motivação para nosso trabalho.
Comentários