28/06/2013

300 seguidores + Tutorial.

Olá amantes da loirinha mais cute do mundo!-Sim, é você mesmo que ama a Barbie.
Estou super feliz, o motivo?Alcançamos a meta de 300 seguidores antes do BSMP completar 1 ano.
Dá pra acreditar que em menos de 12 meses o Barbie Seu Mundo Pink conseguiu 300 seguidores? Pois é, demorou pra cair a fixa de que o blog cresceu, mas que bom que cresceu né? Muitas mudanças aconteceram, e com o apoio de vocês, conseguimos chegar onde estamos. E é  a vocês que eu devo meus agradecimentos, muito obrigada aos seguidores, leitores e visitantes, sem esquecer é claro dos comentaristas fieis do BSMP.
Finalmente alcançamos a meta dos 300, agora vamos rumo aos 350-Mi ajudem Ok?.
Bem, como "agradecimento" trago um tutorial bem legal que acabei de aprender no Cherry Bomb-créditos -O tutorial se chama : Nivo Slider.Acho que bastante gente já conhecem, mas mesmo assim vou ensinar a vocês.

Visualize o resultado final clicando X.

Primeiro - Vá no seu HTML e pesquise por: </head> 
Ao encontra-lo cole abaixo dele o código a seguir:

<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>

Faça as modificações destacadas em negrito , depois salve. Agora cole o código a seguir em um 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> 

Faça as modificações pelo que se pede.Abaixo, algumas setas e bullets para você utilizar no seu Slider.

      

      


Créditos de códigos e imagens:

Abraços♥

40 comentários:

  1. parabéns barbará muito sucesso pro seu blog, amei o tutoreal depois vou tentar colocar:D

    ResponderExcluir
    Respostas
    1. Obrigada Bielzito-risos.
      Tenta sim, o resultado final é
      bem legal e muito bonito.
      Abraços♥

      Excluir
    2. párabens e que sorte em,nem um ano e isso tudo já eu preciso de dicas pra conseguir o meu também!

      Excluir
    3. kkk de nada ok,a agnete tme uqe fazer as imagens ou já vem as imagens?:D

      Excluir
    4. Obrigada, sorte nada, dedicação!
      Também continuo precisando de
      dicas, quem tem um blog nunca
      para de aprender-risos.
      Obrigada pelo comentário Carolina.
      Abraços e sucesso com seu blog.

      Excluir
    5. Gabriel, as imagens é você quem
      escolhe qual colocar.
      Abraços♥

      Excluir
    6. babi eu consequir colar o primeiro código mais eu não sie fazer as modificações em negrito nem sei oque é negrito:D

      Excluir
    7. Biel,negrito são essas partes em rosa do
      código, e nele você deve mudar basicamente
      só onde está escrito: largura do slide /
      Altura do slide / URL_IMG_SETA / URL_IMG_BULLETS
      Na largura e na altura você muda o
      número que está entes desses nomes, e na primeira
      URL você coloca o URL da seta e na segunda a URL
      do Bullets.Não sei se deu pra você entender direito,
      se não entendeu vou ver se edito o post e explico melhor.
      Abraços♥

      Excluir
    8. Ok, vou ver se faço isso no
      decorrer da semana.
      Abraços♥

      Excluir
  2. Respostas
    1. Obrigada Isa.Realmente esse
      tuto é 10-risos.
      Abraços♥

      Excluir
  3. Parabéns pelos 300 seguidores!Você merece muito mais.Adorei o tutorial,vou tentar fazer em um blog de teste,se conseguir coloco no DF.
    Beijão!

    ResponderExcluir
    Respostas
    1. Obrigada Pandorita!
      Teste sim, aposto que vai ficar
      bem legal no DF.
      Abraços♥

      Excluir
  4. parabéns!
    Eu pensava que você já tinha 300 seguidores.
    Eu sei que esse não é um blog de divulgações mas, como vc tem tanta fama no blog podia divulgar o meu? barbiesonhospink.blogspot.pt
    Eu estou no principio mas... sei que vou melhorar e quem sabe eu dia chegar aos calcanhares do seu blog pelo menos.
    KFY:
    Cludy

    ResponderExcluir
    Respostas
    1. Obrigada, pois é, não tinha mas agora
      sim já consegui os 300 seguidores.
      Ok, vou divulgar seu blog em um
      post.
      Abraços♥

      Excluir
  5. babi, alguém esta se passando por mim.
    o meu blog o BMMP foi hackeado, e o(a) hacker, finge que é eu.
    por favor se você ainda tiver ele no seu painel, exclua a pessoa e o blog também tá.

    ResponderExcluir
    Respostas
    1. Ery então não é você no BMMP?
      Vou fazer um post aqui no BSMP
      sobre o assunto e avisar para
      pararem de seguir lá Ok?
      Abraços♥

      Excluir
    2. Também já parei.
      Abraços♥

      Excluir
    3. Eu tbm , eu ja suspeitava pois no perfil dakele nao tem os outros Blogs , da Eryka !

      Excluir
    4. Agradeço pela Ery o apoio de vocês.
      Abraços♥

      Excluir
    5. Que horror docinho, isso é ruim de mais |:(

      Excluir
    6. Em resposta ao Gabriel:
      =^.^=

      Excluir
    7. Em resposta a Isabela:
      Um horror mesmo.
      Abraços♥

      Excluir
  6. oi babi quero dar parabéns por ganhar concurso miss diamonds fairy parabéns babi!!!!:D

    ResponderExcluir
  7. Respostas
    1. É o endereço da imagem das bolinhas
      que ficam abaixo do Slider.
      Abraços♥

      Excluir

Hei, people <3 Que tal deixar sua opinião, sugestão ou critica (construtiva, por favor) em nossos comentários para que assim possamos melhorar ainda mais! Lembrando, é claro, que nossos comentários são moderados, isto é, precisa de minha aprovação para que apareça. Por tanto, seja educado e se expresse de forma a não ofender a autora do blog ou a terceiros, caso contrario seu comentário não será postado, okay? Até aceito o "seguindo, segue de volta?" desde que eu goste de seu blog, seguirei sem problemas. Sem mais delongas, fique a vontade e volte sempre.
Abraços da autora;
Babi Sah ♥