Pesquise neste site

Como colocar Slides no Blogger (não responsivo)

Como colocar Slides no Blogger (não responsivo).

Quer inserir em seu Blogger um belo painel de slides, para exibir fotos, imagens e anúncios?
Você precisa ter suas fotos hospedadas na internet, que pode ser o próprio Blogspot, ou em um site como o Flickr, que é o que eu uso.
Vamos lá? Siga estes passos:

Vá em “Tema” no seu Blogger, e clique em “Editar HTML”.
Clique dentro da caixa de códigosaperte Ctrl+F e digite a tag </head>. Dê Enter.
Depois de </head>, dê "Enter" e cole esse código abaixo:


<style type='text/css'>
/* <![CDATA[ */
#w2bSlideContainer           {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
#w2bNivoSlider              { position:relative;
width:640px  !important; /*largura do slide*/height:640px  !important; /*Altura do slide*/
background:  #fff url("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 0px solid #000;/*Coloque borda se quiser*/ }
#w2bNivoSlider img           {position:absolute; top:0; left:0;  display:none}
.nivoSlider                  {position:relative;width:100%;height:auto;}
.nivoSlider img              {position:absolute;top:0;left:0}
.nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
.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%;top:0}
.nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img                {display:block}
.nivo-caption                {padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width: 400px;/*Largura da legenda*/ z-index:8;}
.nivo-caption p              {padding:2px;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;display:block;width:30px;height:30px;
background: url("http://1.bp.blogspot.com/-IP3kYaiQUhQ/VImlOh13qzI/AAAAAAAACQU/OIx25dN3cLM/s1600/3.png") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav                {left:10px}
.nivo-nextNav                {background-position:-30px 0!important;right:10px}
.nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("http://3.bp.blogspot.com/-VGziiS54_to/VImmGQnzZNI/AAAAAAAACRU/FLOCPSPHWFo/s1600/18.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
 effect           : 'random',
 slices           : 10,
 boxCols          : 8,
 boxRows          : 4,
 animSpeed        : 500,
 pauseTime        : 4000,
 startSlide       : 0,
 directionNav     : true,
 directionNavHide : true,
 controlNav       : true,
 keyboardNav      : false,
 pauseOnHover     : true,
 captionOpacity   : 0.8
});
});
/* ]]> */
</script>


AGORA VAMOS ADICIONAR O WIDGET NO BLOG
Vá em “Layout”, clique em "Adicionar um Gadget" e procure pelo gadget "HTML/JavaScript".
Agora copie o texto a seguir, troque o que está em negrito pela URL da imagem (endereço onde a imagem está hospedada) e cole em “Conteúdo” do box "HTML/JavaScript ":

<div id="w2bSlideContainer"><div id="w2bNivoSlider"><img alt="DSCN0635" height="640"
src="https://c5.staticflickr.com/6/5470/30529225876_2606dbfe57_z.jpg" width="490" height="640"
/><img alt="20160812_123011_001" height="640"
src="https://c5.staticflickr.com/6/5470/30529225876_2606dbfe57_z.jpg" width="490" height="640"
/><img alt="20160812_123011_001" height="640"
src="https://c5.staticflickr.com/6/5470/30529225876_2606dbfe57_z.jpg" width="490" height="640" / /></div></div>

Você pode inserir quantas imagens quiser, basta repetir o código que está ao centro e atualizar com o(s) endereço(s) da(s) sua(s) imagem(ns). Veja um exemplo de como inserir mais uma foto (aconselho depois deletar o espaço entre os parágrafos):

<div id="w2bSlideContainer"><div id="w2bNivoSlider"><img alt="DSCN0635" height="640"
src="https://c5.staticflickr.com/6/5470/30529225876_2606dbfe57_z.jpg" width="490" height="640"
/><img alt="20160812_123011_001" height="640"

src="https://c5.staticflickr.com/6/5470/30529225876_2606dbfe57_z.jpg" width="490" height="640"
/><img alt="20160812_123011_001" height="640"

src="https://c5.staticflickr.com/6/5470/30529225876_2606dbfe57_z.jpg" width="490" height="640"
/><img alt="20160812_123011_001" height="640"

src="https://c5.staticflickr.com/6/5470/30529225876_2606dbfe57_z.jpg" width="490" height="640" / /></div></div>


Pronto! Agora você tem em seu Blogger um belo painel de slides.

Espero que estas dicas tenham sido úteis!
Um abraço,
Flávio Del Puente
Gerente de Marketing Digital
International Sites Brasil


Matéria publicada por International Sites Brasil (www.internationalsites.com.br), em parceria com a Gráfica Muito Mais Barata (graficamuitomaisbarata.blogspot.com.br) e o Portal Consultas Contábeis (consultascontabeis.blogspot.com.br). Editores: Flávio Del Puente (Vendas e Marketing), Clara Cont (Contabilidade e Finanças) e Mauro Marques (Gestão e Empreendedorismo).

Comentários

Nossas fotos no Flickr (clique na setinha e boa viagem!)

Natureza

Postagens mais visitadas

SEO Básico - Como melhorar o desempenho do seu Blogger

Como inserir um favicon no Blogger

Como inserir Slides de Posts Recentes no Blogger (Responsivo)

Como bloquear a cópia do seu Blogger

Personalize a caixa de pesquisas no seu Blogger

Como personalizar a Página Inicial do Blogger

Melhorando o seu Blogger com os marcadores

Como importar uma foto do Flickr diretamente para o seu Blogger

Como configurar um domínio personalizado no Blogger

Qual o melhor site para baixar fontes grátis?