Olá, pessoal!
A dica dessa semana eu estava querendo há tempo para colocar no meu blog, porém nunca encontrava uma que funcionasse legal. No meio das minhas mudanças em layout comecei a busca pelo tal slide e encontrei esse. Ele não é automático, mas funciona bem legal e roda direto.
Se você quiser ver como fica esse slide é só clicar nesse link que é do meu blog de testes.
Agora vamos ao passo a passo:
1) Acesse seu blog, vá em MODELO no menu lateral e depois em EDITAR HTML. Clique dentro da caixa de códigos e dê CTRL+F e dentro da caixa de pesquisa escreva </head> . Cole abaixo de </head> o código a seguir:
<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>
2)Agora, dentro da caixa de pesquisa, digite ]]></b:skin> e acima dele coloque o cógigo:
/* SLIDE
---------------------------------------------- */
#w2bSlideContainer { /*Ajuste as posição do slide*/
position: relative;
display: block;
top:0px;
left:0px;
right:0px;
}
#w2bNivoSlider {
position:relative;
width:640px !important; /*largura do slide*/
height:300px !important; /*Altura do slide*/
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy9ogoCeY2r9gaA4gKVZGLsLPw72fucyZG-y3QZzP35Gpk9NGhVBp8xTUupL8MLpogOlhyFQu-bQvz2jy7s4N-8fHoO2U61guh8TVhXnh_RcKRLXgvRg6ygKH_OQ80lPsdyGUBdbZt1_0E/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px 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: 10px;
margin-top: 260px;
font-weight: bold;
text-align: center;
position:absolute;
font-family: Arial,sans-serif;/*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: 620px;/*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("URL_DA_IMAGEM_DAS_SETAS_DE_DIREÇAO") 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("URL_DAS_BOLINHAS_DE_NAVEGACAO") no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px
}
.nivo-controlNav a.active {
font-weight:bold;
background-position:0 -22px
}
As partes em negrito e cor diferentes devem ser substituídas pelo link dos respectivos.
3) Agora, vá em Layout e adicione gadget HTML/Javascript, cole nele o código substituindo as partes em negrito:
<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div>
Algumas dicas de ícones para usar, é importante que vocês salvem a imagem e hospedem em algum lugar antes de colocar no blog de vocês e de lá copiem o link:
CRÉDITOS fonte dos códigos compartilhados:
Espero que tenham curtido essa dica e semana que vem tem mais.
Dá um Like compartilhem e sigam o SCC e também os blog desse cantinho.
Uauuuuuuuuuuuuuuuu! A muito tempo tbm quis instalar slide em meu blog,mas acabei desistindo por não ter encontrado um que eu gostasse.
ResponderExcluirObrigadão pela dica. Bjsss
Olá, Célia. Fico feliz que tenhas gostado da dica. Bjs
ExcluirOi!!!
ResponderExcluirSuper dica :)
Sempre quis colocar no meu blog e agora vou conseguir ;)
Acho super legal blogs com slide.
Bjo
Olá, Joana. Que bom que gostastes da dica. Fica legal que dá pra escolher o que queres marcar. Bjs
ExcluirArrasoou no post vou compartilhar para as amigas ver otimo bjos
ResponderExcluirObrigada, Simoni. Beijos
ExcluirArrasou amiga ! Dica muito legal ,bjs.
ResponderExcluirEu vou tentar fazer Ana, pelo que eu vi é simples e bel leve de se rodar. Muito bom! É tendo tempinho e indo lá mudar rsrsr. bjocas!
ResponderExcluirÓtima dica, no começo do meu blog eu sofri para acertar esses códigos e por um slide rsrs agora já estou treinada, o post ficou bem explicadinho, acho que ngm terá dificuldade! bjos
ResponderExcluirGostei desse slide, era o que eu procurava por muito tempo. Voce explicou muito bem. Agora vou tentar por no meu blog beijos,
ResponderExcluirah que bacana, adorei a dica, só quem mexe com blog sabe a sofrencia que é encontrar os codigos para o que queremos ne...
ResponderExcluirBjao linda :*
http://festadasunhas.blogspot.com.br/