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/AVvXsEjN0mMZkd80P48gYFrSsGY4UlhmVjcJuuZxls2vGLet0DZDeuzBOIuhZn9aSRzgjYcdvsqxMKRnxRoNRRsiaAQ3L-SViOsmsHCiJOGUU2-8hTNM2VfG6ULwNMz8purVzwE5MfMB6g2qU5BK/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:
Post A Comment:
0 comments: