Como Melhorar O Seu Blogger
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ódigos, aperte 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf2ZFHJsDII7kmyP4iv6yi9hMLXSpg-OaMmka-ILd8d7KHkCT96cTYqtHsRhb8QhcILnvGGhveR5EYZiUwDw1bwiEXR783C5f-a1DtYdg7EHpvm7-5wR_MlhaH1wmRSrJJlR673qV0Kk0H/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFoWxkQY4LabVsBK954DIR65-rkcegAIwaoXhA892ZF2iC_87Tzwg5iW_GGnC45Vk-StnYFOHQfPuK1QU3gF_rAjiWjJieRGhwZoZnI6icAib6TKSH5HANnqg7CWkzYvMy38EA55GyBAc/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-N4EbMzjv9Tw_gg0bjKlIr0T1o7A0WO3eN7ykx-X4uHprAO_daEVnWte49l2KsNJqgBFwdIVXWNUjLVlGmhqLf5PSzUOsGDVl7ECRKJ6ALosD8-cD8Mv_4jFg4M4tOBTQnIHOKoj9toI/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 para você!
Se precisar de uma ajuda extra, pode contar com a nossa assessoria profissional.
Sueli Rocha Miranda
Saiba mais...
Menu Completo
Sites Turbinados
SEO Básico - Como melhorar o desempenho do seu Blogger
Atenção! Pare de utilizar o Widget Imagem no Blogger
Como reduzir automaticamente as imagens para ajustar ao Blogger
Site desenvolvido pelo Site Nota 100
em parceria com a Gráfica Muito Mais Barata
Sites hospedados na International Sites Brasil
Gráfica Muito Mais Barata
Tabela de Preços
Promoções Imperdíveis
Distribuição de Folhetos
Fale Conosco
Site Nota 100
Sites no Topo do Google
E-mails Profissionais Turbinados
O que é SEO? Como conquistar os primeiros lugares no Google?
Fale Conosco