Pular para o conteúdo principal

Tutorial - Nivo Slider


      Hoje eu trouxe um tutorial muito bom. Vocês podem encontrar esse tutorial também no site Cherry Bomb. Infelizmente este site não funciona já faz tempo.

      O nivo slider é ótimo, pois você pode deixá-lo do tamanho que quiser, e ele possui 15 efeitos de transição. O tutorial não é difícil, mas é sempre bom prestar bastante atenção. Os slides do seu blog ficarão parecidos com os slide aqui do meu blog.

      Vá até "Editar HTML" e procure por "</head>", abaixo disso, cole este código:
-------------------------------------------------------------------------------------------------------------------------------
<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>
-------------------------------------------------------------------------------------------------------------------------------

       As parte em verde e negrito, são as parte que você pode alterar para que o slide fique como você deseja. No fim deste post vou deixar umas imagens para quem quiser colocar as "bolinhas" e as setas no slide.

      Agora, para que os slides aparecem vá em "Layout" e "Adicionar um Gadget" "HTML/JavaScrip" 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>

-------------------------------------------------------------------------------------------------------------------------------

      Coloque as imagens e os links dos post relacionados com as imagens. Coloque também as legendas se desejar.


Setas:

Bolinhas:


      Vocês também podem criar suas próprias setas ou bolinhas no photoshop, é bem fácil.

      Esse foi o tutorial de hoje. Deixem seu comentários e dúvidas aqui. Fiquem atentos aos próximos tutoriais. Sigam ao blog e curtam a fanpage.




Beijinhos ;*

Comentários

  1. Que simples ne :)
    Talvez encomende com o próximo lay ^^

    ResponderExcluir
    Respostas
    1. Sim, ele é muito fácil de colocar. E você pode colocar do tamanho que quiser.
      =)

      Excluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Blythe Dolls

A Blythe Doll, é uma boneca que surgiu nos anos 70, porém, assustava um pouco as crianças. Por esse motivo, saiu de linha um ano após o lançamento. Em 1997, a jornalista Gina Garan ganhou uma boneca Blythe de presente e passou a fotografá-la em todos os lugares, dando assim inspiração ao seu livro "This is Blythe" (Esta é a Blythe). Em 1999, ela foi introduzida à Junko CWC Wong pelo artista e ilustrador, Jeffrey Fulvimari. Ainda naquele ano, a Hasbro deu à Takara, empresa japonesa, uma licença para produzir uma nova edição da boneca Blythe, a NEO (nova) Blythe. A Blythe foi usada em uma campanha publicitária de televisão por Parco, o ramo de moda da Seibu Department Stores no Japão e foi um sucesso instantâneo. O sucesso no Japão levou a Hasbro a dar uma licença à Ashton Drake Galleries (ADG) em 2004, para produzir Blythes nos Estados Unidos por um preço mais "em conta".
Há dois tamanhos de bonecas Blythe: a 28 cm (escala 1/6th) de tamanho natural, e as de 11,2 cen…

Dica de Blogueira #7 - Parcerias

Quem acompanha grandes blogs já percebeu que todos eles tem parcerias com outros blogs, lojas, empresas, marcas e etc. E pequenos blogs que acabaram de começar, que ainda nem tem leitores de verdade, que realmente acompanham seu "trabalho" já querem conseguir parcerias só para ganhar coisas. Não é bem assim que funciona. Saibam que PARCERIA é uma troca, você deve ter algo para oferecer em troca dos "presentes".

          Para conseguir a parceria você deve ter algo que faça com que determinada loja/marca queira você como um parceiro.
Mas o que eu devo ter afinal? Primeiramente, um bom número de leitores/fãs que te acompanhem diariamente. As empresas estão de olho nessas pessoas que te acompanham, que gostam de você e do que você faz. Você deve de algum modo "levar" estar pessoas até seus parceiros, e seus parceiros em troca, podem levar até você novos leitores, os brindes/produtos/presentes que irão te ajudar no seu trabalho com o blog, gerando …

Reconstrução capilar com queratina líquida - Keramax

Neste post, trago para vocês uma resenha, da queratina líquida da Keramax. É uma carga máxima de queratina para cabelos fragilizados, com geleia real, queratina e creatina. Hidratação, maciez e brilho intenso.
      Custa por volta de R$15,00. Não tenho muita certeza mas acho que na minha eu paguei uns 16 ou 18(eu tive a infeliz ideia de tirar o preço).
      É uma carga máxima de queratina para cabelos fragilizados, com geleia real, queratina e creatina. Hidratação, maciez e brilho intenso.
      A carga máxima de queratina recupera cabelos danificados por químicas, como tinturas e alisamentos, e processos naturais, como exposição ao sol, chuva e vento. Meu cabelo está ainda bastante destruído, já que eu faço tudo em casa(descoloração, coloração, corte...). Então no mês passado(ou retrasado, já nem me lembro mais) eu comprei este produto e já utilizei cerca de 3 vezes, além de colocar um pouco no shampoo e cremes para pentear.
      Já melhorou meu cabelo, infelizmente não dá …