Yoo, minna-san~ ♥
Não posto muito esses tipos de tutoriais, então irei aproveitar essa chance, espero que gostem do tuto, é um Nivo Slide, eu pessoalmente adoro o efeito que esse slide faz, mas só tem um problema, Não tem setinhas nem nada para clicar nos links, o jeito é esperar vir a imagem para poder clicar na novidade que você querm, mas nada é perfeito né? Cada um com suas qualidades e defeitos. Role mais aos animes e filmes~
Bom, ontem vi todo o Live action XXXHolic. E tem um novo site de anime. Se chama AnimeYokai, eu gostei do site muito bom, tem animes legendados, dublados, doramas, live action e mangás! Ahh e sem esquecer os tokusatsus, ainda é bem novo mas eu recomendo, cheguem nele clicando aqui. Acabei de ver K-Project, vi todo o Live action ontem também e estou começando um novo anime, Arcana Famiglia.
Nivo Slide
Script
1. Vá em seu HTML e cole abaixo de </head>.
<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:300px !important; /*Altura do slide*/
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDk6KAWzF6nJWb_4eF-5pAjdobzVkMetIsyB5nyQI14McEaO9PcCWqPiiWBjbZR-lpCpfogKTKVasMWcYsTU3aQe_EbPLQOtli6RgqlAwm404hlrVqIXys5BnDdG2qQ63FF2uCbneQ3_TG/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: 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: 630px;/*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_IMG_SETA") 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_IMG_BULLETS") 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>
2. Está destacado as partes editáveis para mais facilidade, agora vá em HTML/JavaScript e cole:
<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>
Setas
Fonte: Cherry Bomb
Bem legal esse tuto, eu acho incrível esse efeito que o slide proporciona ao blog.
ResponderExcluirKiss
With You
obrigada~
Excluir-kissus-
Acho bem legal esse tutorial, mas não sou muito chegada em slide.
ResponderExcluirSério que você quer postar no meu blog?
Você tem alguma rede social para eu entrar em contato com você ?
e--mpire.blogspot.com
uhun, eu adoraria <3
Excluirahh tenho sim, entre no meu Facebook ou Ask.fm
-kissus-
Eu adoro esse slide *-*
ResponderExcluirO legal é que com esse dá para mudar as cores das setinhas e tal *3*
Dá para deixar bem do jeito que tu quiser \o/
É bem simples de colocar no blog e fica tão lindo >33<
Sem falar que as imagens passando são muito divertidas de olhar xD
Adorei o tuto (:
~kissus
uhun, o Nivo é um dos mais usados e simples na atualidade u_u kk -parei
Excluir-kissus-
Gosto do nivo, acho o mais fácil de colocar e personalizar, amei!
ResponderExcluirtá rolando projeto fotográfico, participe > http://the-charming-place.blogspot.com.br/
hehe isso eu tenho de concordar c:
Excluir-kissus-
Adorei o tuto, amei o seu blog seguindo aqui >.<
ResponderExcluirhttp://cupcake-of-lemon.blogspot.com.br/
oobrigada~
ExcluirYo Naka-Chan! Então, sobre o tutorial eu sinceramente amo o Nivo Slide, é sem contar que ele fica mega perfeito em qualquer blog! Mas fiquei com uma dúvida aqui, olhe : " mas só tem um problema, Não tem setinhas nem nada para clicar nos links, o jeito é esperar vir a imagem para poder clicar na novidade que você quer...", mais este Nivo Slider tem setinhas. Gomene qualquer coisa. Kisus.
ResponderExcluirKuusou World
ahh, mas quando eu disse isso eu disse sobre as imagens! rs, porque tem alguns que funcionam a setinha com a imagem! rs
Excluir-kissus-