Nivo Slide


Oii pessoal <3
Me desculpem o sumiço, estou em semana de provas, e ainda por cima, trabalhando! A maioria das provas não estudei por falta de tempo, e ainda tirei as melhores notas da classe u__u Cara, as vezes, acho que sou uma ninja, sei lá, talvez. Outro motivo do meu sumiço, jogos para pc ♥. Meu pai deixou eu comprar jogos originais para pc, e comprei Batlefield 3 (o melhor jogo do mundo na minha opinião) e um outro que esqueci o nome. E ainda por cima, minha net está maravilhosa, o que significa que posso baixar mais jogos pela net. Tá bom, parei! Mas parem de pensar que sou egoísta, era para eu estar nesse momento numa feira de ciências com minhas amigas, mas eu decidi ficar em casa e postar um tutorial que pediram na ask faz 6 dias!

Ah, e Nikki, desculpe não aparecer no facebook, estou sem tempo. Depois te conto as novidades sobre...você sabe o que e quem >3<. Mas, falando sério, trouxe o tuto do Nivo Slide, só que no modelo do With You, por isso o código vai estar com as medidas daqui! Se quiser, pode fazer do seu jeito. Lembrando, créditos ao CB


Vá no seu editor de html e ABAIXO de </head> cole esse imenso, enorme e exagerado código:

/* <![CDATA[ */
 #w2bSlideContainer           {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
 #w2bNivoSlider              { position:relative;
width:295px  !important; /*largura do slide*/height:90px  !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; }
 #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 {bottom: 0; left: 0; width: 112px; text-align: center;
padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 11px; /*Tamanho da fonte da legenda*/background:#COR; /*Cor de fundo da legenda*/color:#COR; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 287px;/*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
 });
});
/* ]]> */

Lembrando, que estão com as medidas do With You, portanto, se não quiser é só mudar à seu gosto! Agora vá em layout e adicione um gadget de html e cole:

<div style="position: absolute; margin-top: -107px; left: -302px;"><div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="LINK_DA_IMAGEM 1" title="TÍTULO DO POST 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="LINK_DA_IMAGEM 2" title="TÍTULO DO POST 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="LINK_DA_IMAGEM 3" title="TÍTULO DO POST 3 "/></a>
<a href="LINK_DO_SLIDE_4"><img src="LINK_DA_IMAGEM 4" title="TÍTULO DO POST 5"/></a>
</div></div>
</div>
Ajuste o slide para que ele apareça no cabeçalho seguindo esse tutorial aqui! E mude os links, títulos e imagens de acordo com o que você quiser!
Espero que tenha ajudado vocês >3<
Kissus

46 comentários:

  1. Eu gostei do tutorial e não é difícil, eu entendo muitos estão sem tempo nessa época de provas, ainda bem que sua net esta boa a minha já penso em cancelar de tão ruim. Bom boa sorte com tudo e bom jogos rsrsrsrs.

    Mundo de Liina

    ResponderExcluir
    Respostas
    1. Obrigada <3. Verdade, provas, sempre atrapalhando a vida dos blogueiros e blogueiras ashashua
      Obrigada, tenta roubar o wi-fi do vizinho ♥ ashuashua

      Excluir
  2. Vou reativar meu blog de testes para testar esse... O tuto e muito bom.
    "cole esse imenso, enorme e exagerado código" > Concordo kkkkkk!

    Abraços.

    ResponderExcluir
    Respostas
    1. Obrigada ♥
      Kkkk então, enorme de grande :P

      Excluir
  3. Adorei o tuto, se não me lembro direito já postei esse tuto <3
    passa no meu blog novo?
    BJS.
    Place Nuts

    ResponderExcluir
  4. é super fofo esse slide , o tuto é super util !!!!!!
    BLOG:http://mymomentsz.blogspot.com.br/
    APLICATIVO DO BLOG: http://galeria.fabricadeaplicativos.com.br/my_moments
    GRUPO: https://www.facebook.com/groups/640236989340042/

    ResponderExcluir
  5. Cara as vezes eu também acho q sou um ninja SHUASHAUSHASUAS
    adorei muito esse tuto eu ja usei ele umas 3 vezes no Jc ^^

    XOXO :D
    Joven Clube | Official

    ResponderExcluir
    Respostas
    1. Ashaushau é nóis u__u
      Obrigada, fica lindo mesmo <3

      Excluir
  6. Boa sorte na nota das provas, é super bom o jogo? Se for quero tentar comprar u-u depois que eu ganhar meu Wii e comprar o joguinho do Disney Universal e uns outros 3 que esqueci o nome hsaushaush'
    Ótimo tuto ^^ Eu acho que fica tããão lindo *--*
    Mandi-Chan desculpa mesmo não ter postado ontem, eu acordei 10 horas, postei no meu blog, porque a inspiração tinha vindo, dai não fui pra escola, pois deu um toró de chuva até a noite, e eu não consegui mexer no computador =/ Mas nos próximos dias prometo postar sem falta =)

    Beijos~
    Panther Pink and Blue

    ResponderExcluir
    Respostas
    1. Obrigada. Sim, ele é perfeito, violento e instrutivo u__U ahuehue. Wii *o* eu quero também :P Disney Universal, perfeito >3<
      Obrigada ♥
      Claro, sem problemas, afinal todos somos ocupados, especialmente com a escola ç3ç pode postar quando der flor, precisa se preocupar não :)

      Excluir
  7. As vezes eu acho que tbm sou ninja :)
    O tutorial nem parece tao difícil :)

    kisses!

    Lego House | l-egohouse.blogspot.com

    ResponderExcluir
    Respostas
    1. Então, bem vindo ao mundo dos ninjas u3u
      Obrigada, é facinho <3

      Excluir
  8. Um ótimo tutorial chuchu, acho que o wordpress deveria ter mais acesso ao mexer no html e css, mas pena que para poder mexer nosso tem que pagar. Mas adorei. (:

    haysahass.wordpress.com

    ResponderExcluir
    Respostas
    1. Obrigada ♥ Sério? Eu não sabia :/ poxa, vem para o blogspot flor <33

      Excluir
  9. aaah queria tanto poder comprar jogos mais minha mae diz que é besteira u---u'
    Eu sou super fã desse tutorial perfeit u--u amo amo e amo... uashuh

    vagas para postadores : kawaii-things.net

    ResponderExcluir
    Respostas
    1. Mães, sempre por fora dos paranauês u3u ahsushua
      Obrigada, eu também é lindo demais >3<
      Seu blog tá fechado ç3ç :/

      Excluir
  10. Muito bom o tutorial!!

    wesleyferreirabr.blogspot.com

    ResponderExcluir
  11. Enquanto a sua net ta boa a minha ta um porre kkkk Não costumo jogar no pc sou mais Xbox ^^ ótimo tuto,vou dar uma testada
    Um beijo
    http://bombasticmusics.blogspot.com

    ResponderExcluir
    Respostas
    1. Ahuehue, sas nets são uma bos** u.u XBOX? *O* Joga na cara ç3ç ahuehue obrigada, teste mesmo u__u

      Excluir
  12. Awwwwwwn, o jogo deve ser bom mesmo, se eu gostar de um jogo, ferrou: vicio! Eu sou viciada em Plants. Vs. Zombies, Flow... SUSAHUHSUAHSUHAAH
    O slide fica bem fofo <3
    Muitas beijocas com glacée e glitter parisiense!
    BUG- bonjour-uneglacee.blogspot.com

    ResponderExcluir
    Respostas
    1. Kkkk é nóixx <333 jogos são um atalho para sumir da vida social u3u Esse jogo é ótimo, já zerei u__u vício level 99999999999999999%
      Obrigada <3

      Excluir
  13. Boa sorte nas provas <33
    Já conhecia este tutorial, é muito útil, o slide fica lindo >.<

    ~ Beijos ;*
    cantinhodaslovelys.blogspot.com.br

    ResponderExcluir
  14. Eu já conhecia o tutorial, fica muito lindinho :3
    Ficou bem explicadinho, o que ajuda bastante para não ter nenhum erro <3
    Beijos || Fairy Falling ~ Blog novo, visita ? ♥

    ResponderExcluir
    Respostas
    1. Thanks ♥
      Obrigada, que ótimo que gostou <3
      Visitei e segui u3u

      Excluir
  15. Boa sorte nas provas. Trabalhando? OMG, DE QUE? AUGEVGUGAVADF *w* Nunca joguei Battlefield, deve ser foda xD Espero que sua net melhore e que sua feira de ciências seja legal, ok? ^^
    Eu amo esse slide, é perfeito <3 Ótimo tuto >3<
    Beijos ♡ ~
    Garotas Atrevidas ~ retribui a visita? >3<

    ResponderExcluir
    Respostas
    1. Thanks <3
      Sim ç3ç ahsuhasusau Sim, foda, violento, extraordinário e instrutivo u__u
      Obrigada, foi sim <3

      Excluir
  16. Yoo ~
    Tipo, nem precisa se desculpar pois eu mega lhe entendo! Queria ser igual á você, mas, se eu não estudar eu simplesmente me ferro! Pois, me dá um branco. Eu amo jogos para PC, embora eu não tenha muitos, me contento com Counter Strike e NFS Underground, são simplesmente ótimos jogos. Sobre o nivo slider eu mega já conhecia e simplesmente acho ele mega perfeito! Chu ~♥

    Thought Otaku

    ResponderExcluir
    Respostas
    1. Então, provas são coisa do capeta u3u como eu? Não queira ashuhsaua Eu não tenho counter strike ç3ç medesu, em que mundo estou? o.O
      Obrigada, sim, graças a Liah, sá diva <3

      Excluir
  17. adoro slide no cabeçalho eu usava no meu antigo lay.agora nao uso mais.............bjkas amore suahsuahsuahus

    bom domingo ta..........

    http://louca-por-html.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada, acho que fiquei somente uma vez sem usá-lo u3u ♥♥
      Obrigada, pra você também!

      Excluir
  18. Somos duas ninjas e_e
    Ótimo tutorial, ele fica tão lindo em alguns layouts, mas eu não me dou muito vem com ele uheuhuhe
    Beijos.

    winter--html.blogspot.com

    ResponderExcluir
    Respostas
    1. u3u é nóixx parça \w/
      Ahuehueheu, no começo eu odiava, hoje já amo ele <3

      Excluir
  19. kkkkk! Vc é engraçada, mas eu entendo :3
    aaawn , e o slide é lindo *--*

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ashushua, queria ser engraçada >3<
      Obrigada, Liah divando com o slide ♥

      Excluir
  20. You like a boss u-u kkkkkkk~boas provas pra ti Mandi-chan.As minhas já acabaram~aleluuuia \o
    o/
    \o
    Olha que invejaa *O*,meu pai não deixa eu comprar jogos originais~mão de vaca mermo~ele só comprou uns três e disse que já tava bom que já dava pra me divertir e..e -q.AAAHHH não deixe de viver como eu quando comecei a jogar Batlefield,eu tinha deixado de viver só pra jogar esse jogo ~malditos que formataram meu pc e.e
    Bjuuus Mandi cabrita,e love o tuto <3,será que combina com o meu lay?vou ver,nyu >3<
    Otakada Kawaii

    ResponderExcluir
  21. Pare de me deixar com inveja da sua internet, rum! E eu aqui, dando graças à Deus porque a minha não está caindo. Mas baixar jogos...NEVER aushaush' Esse tutorial é muito bom porque fica lindo o cabeçalho com slide <3

    http://cyber-transformers.blogspot.com.br/

    ResponderExcluir
  22. Eu sempre usava, acho liindo!
    Beijocas, Lili ;3
    Clique aqui, e vá para o blog / Princesa Teen

    ResponderExcluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ