Como colocar slide em JQuery no blogger

Slide de configuração fácil que deixa seu blog com um design elegante e agradável.

Uma boa opção de slide para se ter em seu blog pois destacamos sua bela aparência, leveza e funcionalidade. Esse slide feito em Jquery se adaptará perfeitamente ao design de sua página e você poderá destacar suas melhores postagens ou algo que desejar.
Para colocar o slide no seu blog,  é preciso escolher as imagens que farão parte da animação. Neste tutorial, iremos usar a configuração com o tamanho máximo de 580 pixels por 325 pixels. Edite as imagens conforme o tamanho máximo em um programa de imagens de sua preferência e logo após hospede em um servidor de sua preferência.

 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.


Tutorial

1- Acesse o seu painel do Blogger, abra o menu e escolha a opção “Modelo”. Depois clique em “Editar HTML”.

2- Feito isso clique no código de seu template, pressione "CTRL + F" e pesquise em seu código por:
</head>
3- Depois de encontrado copie o código abaixo e cole ACIMA da linha pesquisada.
<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() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</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>

Adicionando estilos ao slide

1- Iremos agora adicionar estilos CSS ao slide, e para fazer isso primeiro pesquise por:
]]></b:skin>
E logo ACIMA cole as seguintes linhas de CSS.
/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 325pxwidth: 580px; overflow: hidden;}
#featured img{
width:580px !important;
height:325px !important;
}
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/AVvXsEiRc3zF07fhdv1yYY9nDHMAEjEJV-x8HZAeV_d9zFJsQEBOLjHo7NazSYEHqj_7WNzbBkJLExAIJtE3FMIa2gIbj9OsnrwGb1hCEZJ1FYpY8QbYcuF1z91Sb2rUxSVP74G1WInpSas1unFO/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/AVvXsEjkM_sz4lYkB3LAizqYAXk6Qbq9HtllF85jKjw22yqSZ5N_fRinqw1VWUDnw0-7KLW6pykVufe_4ykjw6Eh0-9yiE6xRY3HqciS6t6LnyV9WRZApUTGXAGE8Q-WoqePE-P_7hmMpS-ZSVuR/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/AVvXsEhyuFSMxpPyaD1OWD4a64xFtOisz3J0fA6tIjHJUyj86NkCnQpQyR1EJRBRH9unywogt7Zh4n-kMZ_huzGXsCsjFAoTN6Mx43afIU78VzIePG3fJFCwbCN6yw5dbX1RJ52Gbzz43gf1fKc6/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/AVvXsEiROpoKQEFjKZPBwEc6mPEym9UwsXAR6QNJjgDOLIMYl6406DbDiKdvqx7uEIldqgiyOTRpSQqZoN-2h1hSQyKA5tQVKiZVvDaluy47MVAdukDI91BS5VHsnA6zGUbvTRjWHVuE6-YQnb3P/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzcLBmiFIv1eC5A5FjQ7OnvFE9EUwFlkyi4TXIHwY09ZPwMM45VzQTNAdG9KUoe5mRC1c5gjKRkhsv4RSyxzPDQBVr8z7iFVWXoIwywyJmFdME-OSA2ZJm8lVf0IFONu41gGfiinnlEWKe/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/AVvXsEgeqAMdBZvfcYQx0btE9R5t63ByXT_anJ3TKe5sVK00_gtboCzxbc5PWyZyQeRMb5BnZA5QqDvGLTdim4o6CTFuOF_zc2eYBJx7zzKV7am7p2X8mvJgkBxtMd1cOvO1e1Oxa5HHMhH_xHVx/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;
}
Observação: As partes destacadas em AZUL (width) e VERMELHO (height), representam largura e altura do slide sucessivamente, ajuste de acordo com seu blog fazendo nos dois trechos em que aparecem os destaques.

2- Depois disso clique em "Salvar Modelo".

Colocando as linhas HTML no template

O ultimo passo de nosso processo é adicionar o código referente a base do slide. E para executarmos primeiro vá no menu lateral de seu blog e clique em "Layout""Adicionar um gadget" e escolha um do tipo "HTML/Javascript"

Em seguida cole o código abaixo dentro do conteúdo do gadget.
<div id='featured'>
<a href="LINK_IMAGEM_1"><img rel='foto1' src="URL_IMAGEM_1" /></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO_IMAGEM_1</span>
<a href="LINK_IMAGEM_2"><img rel='foto2' src="URL_IMAGEM_2" /></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO_IMAGEM_2</span>
<a href="LINK_IMAGEM_3"><img rel='foto3' src="URL_IMAGEM_3" /></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO_IMAGEM_3</span>
<a href="LINK_IMAGEM_4"><img rel='foto4' src="URL_IMAGEM_4" /></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span>
</div>
* Substitua LINK_IMAGEM pelos links dos artigos que as imagens representam.
* Substitua URL_IMAGEM pelas urls das imagens que aparecerão em seu slide.
* Substitua DESCRIÇÃO_IMAGEM pelas descrições referentes aos arquivos representados pela imagem.

OBSERVAÇÃO: Caso desejar colocar mais slides, basta inserir ANTES da tag </div> o código abaixo fazendo as alterações necessárias:
<a href="LINK_IMAGEM_5"><img rel='foto5' src="URL_IMAGEM_5" /></a><span class='orbit-caption' id='foto5'>DESCRIÇÃO_IMAGEM_5</span>

Agora, depois de editado o código clique em "Salvar", arraste o gadget para a área desejada e clique em "Salvar Organização".

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

Slideshow Horizontal no Blogger

Slide com design arrojado para você destacar as melhores postagens de seu blog.

Muitos blogueiros gostam de chamar a atenção dos leitores de seus blogs logo de cara ao acessar, e, nada melhor do que um slide com um design sensacional como este. Com esse slide você destaca suas melhores postagens ou em outros casos o que desejar em seu blog.

Nesse template você pode conferir o resultado de como ficará o slide depois de instalado.

* lembrete: As imagens usadas nesse slide tem o tamanho de 750x250 px, por isso já edite antes as imagens que você irá utilizar nesse tamanho e depois hospede-as em um servidor de sua preferência.

Veja então como fazer:

 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.

Passo a passo

1- Recomendamos que você faça o backup de seu template para casos de erros;

2- Depois  de acessar seu blog, clique no menu lateral e vá em "Modelo" ;

3- Clique em "Editar HTML", depois no seu código pressione "CTRL+F" e pesquise por </head>.

4- Em seguida copie o código abaixo e cole ACIMA da tag pesquisada;
<style>
#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}
ul.kwicks{
margin:0px;
padding:0px 10px;
list-style:none;
}
.kwicks li {
float: left;
width: 196px;
height: 250px;
position:relative;
}
.kwikmet{
position:absolute;
bottom:10px;
left:10px;
right:10px;
display:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdHs7NGglPHEVvoC0kR3DUzwMUJq3NQGjXcGBumdJlGPL_XDawlwi2Ui3z5PNtEP-HL3XrvXiNwPkBL2YtdiuFg2q-nrl1cDq3vvN_Y-kXMPcUneJXquzLxuFU2CFmKEZGNhwcgV5yBg/s1600/trans.png);
padding:10px;
width:710px;
color:#888;
}
.kwikmet h2 a{
color:#fff;
font-size:16px;
font-family:georgia;
font-weight:normal;
padding-bottom:10px;
}
.slidimg{
width:750px;
height:250px;
}
.rounded{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>


<script type='text/javascript'><!--//--><![CDATA[//><!--
/**
* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
*
* @param  f  onMouseOver function || An object with configuration options
* @param  g  onMouseOut function  || Nothing (use configuration options object)
* @author    Brian Cherne <brian@cherne.net>
*/
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
//--><!]]></script>


<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'>
jQuery().ready(function() {
jQuery(&#39;.kwicks&#39;).kwicks({
  max: 750,
       duration: 1000
 });

jQuery(&quot;.kwik&quot;).hoverIntent(function() {
 jQuery(this).children(&quot;.kwikmet&quot;).fadeIn(&quot;slow&quot;) ;
 }, function() {
 jQuery(this).children(&quot;.kwikmet&quot;).fadeOut(&quot;3000&quot;);
 });
});
</script>
5- Clique em "Visualizar", para ver se não contém nenhum erro. Estando tudo normal clique em "Salvar";

6- Agora no menu lateral, acesse "Layout". Clique em "Adicionar um gadget" na parte que você deseja que fique seu slide e escolha por "HTML/javascript";

7- Copie o código abaixo e cole em um editor de texto, como o bloco de notas por exemplo, para que você possa fazer as alterações necessárias;
<div id='slidearea'>
<ul class='kwicks'>
<li class='kwik'>
<a href='LINK POSTAGEM'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>
<div class='kwikmet rounded'>
<h2><a href='LINK POSTAGEM' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
<li class='kwik'>
<a href='LINK POSTAGEM'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>
<div class='kwikmet rounded'>
<h2><a href='LINK POSTAGEM' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
<li class='kwik'>
<a href='LINK POSTAGEM'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>
<div class='kwikmet rounded'>
<h2><a href='LINK POSTAGEM' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
<li class='kwik'>
<a href='LINK POSTAGEM'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>
<div class='kwikmet rounded'>
<h2><a href='LINK POSTAGEM' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
<li class='kwik'>
<a href='LINK POSTAGEM'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>
<div class='kwikmet rounded'>
<h2><a href='LINK POSTAGEM' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
</ul>
<div class='clear'/>
</div></div> 
Em LINK POSTAGEM - Troque  pelos links das postagens desejadas.
Em URL da imagem - Troque pelas urls das imagens que você hospedou.
Em Título - Troque pelos títulos referentes as postagens.
Em Conteúdo - Troque por pequenas descrições referentes as postagens.

8- Depois de configurado, copie o código e cole-o no Widget "HTML/Javascrip" e clique em "Salvar", depois "Salvar Organização". Vá a seu blog e veja como ficou.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

Slide Profissional Com Setas Para Blogger


Slide Profissional em JQuery com setas laterais para deixar seu blog bem mais bonito.

Vários blogueiros gostam de estilizar seu blog e nada melhor do que um slide profissional que você poderá destacar suas principais postagens. O slide não é tão complicado de instalar, mas requer atenção pois teremos que alterar o template.

 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.

Tutorial

1º Passo: Acesse seu blogger, no menu lateral clique em "Modelo" e depois em "Editar HTML".

2º Passo: Clique no código, pressione "CTRL + F", procure por </b:skin> e logo ACIMA cole o seguinte código:
/*
 * jQuery Nivo Slider v2.5.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
 */
#slider-wrapper {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrv27zOWw0GKJcd2RYCF6ro9xnWyW2KCnv3KEtl0b9VOvRauMU7RHrd_bLdSPTgdXgLSl0kvV02jNToYOT0ucovVK8JeLidDQbB3ltXup3dg8x6vftd_4h18aFNIgDYTGk5hvK4o_MDyU/s1600/slider.png) no-repeat;
    width:998px;
    height:392px;
    margin:0 auto;
    padding-top:74px;
    margin-top:50px;
}
#slider {
 position:relative;
 width:618px;
 height:246px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSFoJSDC-4tbU0TX5zektaOi2rT7oP2Fbw0ml8-jvOWP0DVzVzQIaSIDJQkIAtK-HffVjymLS1ElwtGXGYI6zCI-KRRYZVCIWBa_O3fV-Usipt9pDPqGKnT5hyphenhyphenenur3Tyl-B-zCZmzjw8/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}
#slider a {
 border:0;
 display:block;
}
.nivo-controlNav {
 position:absolute;
 left:260px;
 bottom:-42px;
}
.nivo-controlNav a {
 display:block;
 width:22px;
 height:22px;
 background:url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_C35Rb0njwITDYoZKcQwPuK0fwA9HF5MYWnlCPhdKjAzeNxSK-LN-nozbVdvhE7Ee3674DsjTF4VQkwV4D292MvIW8niSeluUXizKwtM2NGRQoTxl6l-VNClWaZokCAXupoO_0TfzPic/s1600/bullets.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:3px;
 float:left;
}
.nivo-controlNav a.active {
 background-position:0 -22px;
}
.nivo-directionNav a {
 display:block;
 width:30px;
 height:30px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSFC6r8RVzKH2myjzfrcyJeElBBrlyqb6SHYhoNNnnDlJFhWd0EUJsmBRV0x0KP2JvQX7_VXbcR8aOVm9V6kgOYLxOhcVh6GNHgT5Jr-Vh-Gs9RKB-pGklw7wChjPR6njfTnvmuq6Wfs/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 {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:6;
 display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
.nivo-directionNav a {
 display:block;
 width:30px;
 height:30px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSFC6r8RVzKH2myjzfrcyJeElBBrlyqb6SHYhoNNnnDlJFhWd0EUJsmBRV0x0KP2JvQX7_VXbcR8aOVm9V6kgOYLxOhcVh6GNHgT5Jr-Vh-Gs9RKB-pGklw7wChjPR6njfTnvmuq6Wfs/s1600/arrows.png) no-repeat;
 text-indent:-9999px;
 border:0;
}
a.nivo-nextNav {
 background-position:-30px 0;
 right:15px;
}
a.nivo-prevNav {
 left:15px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.nivo-controlNav a {
 display:block;
 width:22px;
 height:22px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_C35Rb0njwITDYoZKcQwPuK0fwA9HF5MYWnlCPhdKjAzeNxSK-LN-nozbVdvhE7Ee3674DsjTF4VQkwV4D292MvIW8niSeluUXizKwtM2NGRQoTxl6l-VNClWaZokCAXupoO_0TfzPic/s1600/bullets.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:3px;
 float:left;
}
3º Passo: Agora pesquise por </head> e logo ACIMA cole o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
    $(&#39;#slider&#39;).nivoSlider();
});
</script>
4º Passo: Clique em "Salvar modelo"

5º Passo: Copie o código abaixo e cole no Bloco de Notas para fazer as alterações necessárias:
<div id="slider">
    <a href="LINK DA POSTAGEM"><img src="URL DA IMAGEM" alt="" title="TITULO SLIDE 1"  /></a>
    <a href="LINK DA POSTAGEM"><img src="URL DA IMAGEM" alt="" title="TITULO SLIDE 2"/></a>
   <a href="LINK DA POSTAGEM"><img src="URL DA IMAGEM" alt="" title="TITULO SLIDE 3" /></a>
    <a href="LINK DA POSTAGEM"><img src="URL DA IMAGEM" alt="" title="TITULO SLIDE 4"/></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
* Crie imagens com o tamanho de 618 x 246 px e hospede em um servidor de sua preferência.

Em LINK DA POSTAGEM, troque pelos links de seus posts que você irá destacar;
Em URL DA IMAGEM, troque pelas urls das imagens que você hospedou;
Em TÍTULO SLIDE, troque pelos títulos que você queira que apareça no slide.

6º Passo: Em seguida no menu lateral do blog clique em "Layout""Adicionar um gadget", escolha"HTML/Javascript" e cole o código que você alterou no Bloco de Notas.

7º Passo: Clique em "Salvar" e veja o resultado no seu blog.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.
 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN