3.2.14

01. M.T.: Nivo Slider [editado]

Maratona de Tutoriais: Como colocar Nivo Slider, colocando no cabeçalho, como colocar bordas arrendondas, colocar a legenda em baixo, como colocar background/fundo na legenda ou deixar transparente

image
well... 

YOOOOO PUDINS DO MEU VIVER (HÃ?),
vocês viram? fiz afiliação com o Birthday Cake \o/ to tão feliz, é um dos meus blogs favoritos de todos os tempos.
to meio isso...
Eu estou pensando em fazer um novo layout, eu estou participando de um curso no Love Baka e tem a ver com layout e sei la mais o que, eu não sei sobre o que vou fazer, mas eu quero deixar bem claro que se começar a parece coisas estranhas no layout (porque não vou desativar) é isso

Outra coisa, não vou postar somente tutoriais (já falei isso antes mas...) eu não expliquei porque ne?! não consegui uma equipe, uma equipe ia me ajudar bastante nisso porque não tenho muita criatividade para postar do nada um tutorial e se eu tivesse uma equipe, ia ter vários posts de várias pessoas e nem me preocuparia em postar outro conteúdo -se eu postar algo nada a ver, é por isso, okay?- mas mesmo agora se eu conseguir uma equipe, vou continuar postando essas coisas retardadas porque já comecei com isso

Vou explicar a tag:
Eu quero fazer uma maratona de tutoriais, sem me importar muito se vai ter ou não comentários. Claro que vou responder quem comentar, vou ficar meio Demi ali em cima se tiver, mas geralmente eu espero a postagem ter pelo menos 1 comentário para poder postar devo. Dessa vez vou postar, postar, postar e postar ate dar minha meta (que ainda não estipulei)

Mas chega de blablablá e ao tutorial:

"O que é Nivo Slider?"
É isso:
é um slide, só que melhor
Antes de qualquer coisa, vou avisar que as vezes pode não dar certo se você não tentou várias vezes, se você não prestou atenção ou sei lá, por algum motivo se não der certo você não pode desistir (na verdade, pode) na primeira tentativa! O Nivo Slider é um slide muito legal e é o melhor que existe, tanto para tumblr, wordpress (etc). Ele exige muito paciência... Só isso, pode continuar.

Como colocar Nivo Slider:

No HTML do blog:

Vá a Modelo > Editar HTML > Formatar Modelo > CTRL+F > Procure por </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("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/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>

clique aqui para copiar o código caso você perceba problema no de cima

Se você não quiser Setas ou Bolinhas: apenas apague onde está escrito "URL DA IMAGEM DAS SETAS" ou "URL DA IMAGEM DOS BULLETS".

Colocando no(s) gadget(s)
Agora, cole o código abaixo em um gadget (ou mais, né?!) de HTML/Javascript:
<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>

E você pode colocar quantas imagens quiser.

•Mude o que está destacado de azul pelo link do post ou outro link, caso queira.
•Mude o que está destacado de laranja pelo link de uma imagem de sua preferencia.
Nota IMPORTANTE: quando for colocar as imagens, coloque-as em tamanhos iguais as da imagem e lembre-se, no código original do slide está em 640 (LARGURA) x 300 (ALTURA). EX: se você for colocar uma imagem de 500 x 250, mude no código a largura por 500 e a altura por 250
•Mude o que está destacado de rosa pelo título do post ou algo de sua preferencia.

Setas:
 

Bolinhas:



Colocando no cabeçalho:

Essa, na minha opinião, é a parte mais divertida e chata disso tudo o.O 
"hã?"
tipo, dependo de seu nível de paciência para fazer isso pode ser bem divertido! 
Mas se você fazer algo errado ou o blogger estiver de brincadeira (para não falar outra coisa) com você, isso pode ser a coisa mais chata de todo o processo.

Vamos la:

Vá a Modelo > Editar HTML > Formatar Modelo > CTRL+F > Procure por ]]>

mas então, era aquele antigo código ]]></b:skin> se você procurar por ele junto não irá achar, por isso, procure por ]]> e certifique-se que </b:skin> esteja em baixo dele

cole esse código em cima de ]]>

#meuslide {
position: absolute;
top:  um número qualquer aqui px;
left: outro número qualquer aqui px;
width: pois é, outro número aqui px;
height: mais um número qualquer aqui px;
}


Olha aí, essa parte você tem que fazer em um dia em que você esteja transbordando de felicidade e paciência ou muita vontade de colocar ele no cabeçalho.


Você vai ter que descobrir os números certos pelo formato do seu blog/cabeçalho/onde você quer colocar, quais são os números certos. Infelizmente, não tem um número certo para que eu possa falar e você por. Você irá precisar ficar tentando, tentando, tentando... Até ele chegar no lugar desejado. Mas como eu sou boazinha vou dar os números que eu usei no meu cabeçalho, para vocês terem uma ideia de como é:

#meuslide {
position: absolute;
top: -370px;
left: 130px;
width: -100px;
height: 50px;
}

Left significa esquerda em inglês, quanto maior o número mais "puxado" para esquerda ficará.
Height vem da palavra high que significa, mais ou menos, "mais alto do que alto" ou "altura" kkkk eu coloquei em 50px, porém se, por exemplo, você colocar 100px vai ficar mais alto.
Wedth é "largura", porém acredito que não mude nada.
Top por incrível que pareça (no meu pelo menos) se eu colocar um número positivo, ele abaixa O.o.

"Tá, mas, e agora?"
Vá no gadget onde você colocou o código do Nivo Slider e antes do começo do código cole isso:
<div id="meuslide">
para fechar (no fim do código todo) cole isso:

</div>
ficará mais ou menos assim:
<div id="meuslide"><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>
</div>

Eu não tenho quem credita nessa parte, afinal, quem me ensinou desativou o blog e sumiu das redes sociais :p mas vou creditar a #Creat HTML, eu achei esse código depois de um tempinho no blog dela(e). Então créditos a essa pessoa linda

Como colocar bordas arrendondas:

Bom, eu testei essa coisa, ficou arrendondado, mas não posso garantir que ficará bom hahaha porque sinceramente, não gosto disso.

Mas vamos la, né?!
fica assim

Vá a Modelo > Editar HTML > Formatar Modelo > CTRL+F > Procure por #w2bNivoSlider

Tem muitos iguais, mas é vê se é esse aqui >> #w2bNivoSlider              { position:relative; Ao lado ou em baixo, cole:
border-radius: 10px; overflow: hidden;
Então coloque o tamanho que quiser.

Colocando a legenda em baixo:

Essa é a parte mais importante para deixar o Nivo Slider mais bonito, é o que me faz achar o Slide mais legal \o/

Vá a Modelo > Editar HTML > Formatar Modelo > CTRL+F > Procure por .nivo-caption

Como o da borda arrendondada, você pode achar muitos iguais 
mas confira se é esse aqui >> .nivo-caption                {padding: 5px; 
Também fica mais fácil porque você precisa colocar na frente dessa área:
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*/
Cole esse código abaixo, enfrente a "font-family" 
ou em baixo de .nivo-caption                {padding: 5px; (que da na mesma):
bottom: 0; left: 0; text-align: center;
Eu não aconselho a mexer no código, apenas coloque-o

Créditos por "Como colocar bordas arrendondas" e "Colocar a legenda em baixo" á This Time

Como colocar fundo (ou deixar transparente) na/a legenda:

FINALMENTE! Fim do post que demorei TRÊS DIAS para fazer.
Tudo por culpa do meu blockquote bugado que tive que trocar e por culpa das estrelas
Não, a culpa é minha mesmo, sou muito lerda dfjshdh (é uma risada, não morri no teclado)

Eu não tirei ideia de ninguém para isso ou aprendi com alguém, eu invetei isso sozinha quando estava aprendendo a fazer esse tipo de slide e deu um bug no meu antigo código, gostei e deixei! o que não sabia é que muita gente coloca background na legenda

Mas vamos la:

Vá a Modelo > Editar HTML > Formatar Modelo > CTRL+F > Procure por .nivo-caption

Como sempre, tem muitoooos códigos iguais a esse (já falei isso, mas caso você pulo aquilo do Colocar a legenda em baixo)
Mesmo assim, 
certifique-se de que é igual a esse >> .nivo-caption                {padding: 5px;
Encontre "pelo olho", a "font-family" até achar na mesma área "background"
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*/
Apague #000 ou qualquer número que esteja la e cole isso:
url('URL DO BACKGROUND')
 e é isso, caso queria que fique transparente, apenas troque o número por:
transparent
caso queira por transparente sugiro que mude a cor da fonte que geralmente fica em branco, isso também vale para backgrounds claros

Então é isso, esse foi o primeiro e bigtutorial sobre Nivo Slider da Maratona de Tutoriais


Beijos no core, "rivais no amor"

Nenhum comentário :

Postar um comentário

Você pretende comentar?
Saiba que eu fico muito grata e feliz ^^ mas por favor, seja educado e compreensível. Se de alguma forma meu post te feriu ou o meu blog, vá ao e-mail. Críticas são sempre bem-vindas, mas acredito que o lugar delas também é no e-mail.

E eu optei por moderar comentários, não por causa de problemas como os de ofensas, mas para que fique mais fácil saber quando houve comentário. Espero que entenda se você não gosta dessa opção. Acredite, eu também não gosto.
Obrigada por ter vindo aqui.

"Heart" yourself

Ame-se ♥
oohmontana@gmail.com
twitter:@s0meth1ngs, @seehbubble
facebook: Carol Lendino

Status

Nome: Sem Óbice
Criado: 28/12/13
Volta do hiatus: 28/12/15
Tema:G-Friend on twitter; n°: 4

Disclaimer:
Grande parte das coisas aqui não pertencem ou foram criadas por mim, grande maioria foi criada por alguém e, na maior parte das vezes, editas por mim. Se feri alguém, pretendendo creditar ou excluir, como o dono preferir. Não resite em me avisar por e-mail: oohmontana@gmail.com. Espero compreensão.

The End

Isso é tudo, pessoal! Volte sempre que quiser,
beijos no core, rivais no amor


Créditos e agradecimentos aqui