17 maio 2013

[Pedido] Slides no cabeçalho


Então suas Divas feat. Divos tudo bem como vocês?? ~~Tia Gleicy de volta~~ Minha semana de provas acabou ~~happy~~ Estou de volta para encher vocês, já estou terminando alguns layouts que estão na fila de espera ok? quer dizer tem um que está totalmente pronto, ontem a noite eu estava fazendo o cabeçalho em PNG e agora qualquer imagem sem fundo que eu uso  no blog fica com o fundo preto x.x alguém sabe o que é isso? vou tentar resolver logo.

 Bom  venho com um pedido da ASK que foi esse


Então vou ensinar a por o Nivo Slider que é o mesmo que eu sempre uso em meus layouts, porque eu acho ele divo u-u mentira é porque ele tem mais efeitos que os outros slides que eu vejo por ai. Vamos começar? então continue lendo

 Vá no seu HTML clique em alguma parte do código e tecle ctrl+f vai aparecer uma caixinha de busca XD E nela procure  por </head> e quando achar cole o seguindo código ABAIXO dessa tag


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

Edite apenas onde se pede, ou seja cores, tamanho que você deseja o slides, setinhas e bolinhas, uma dica: Se você quer usar slides no cabeçalho faça o seu cabeçalho já com o locou certo onde você quer os slides e tem que saber o tamanho certinho para poder fazer as imagens. Prosseguindo.

Setas para vocês usarem

     

Bolinhas

Colocando os Slides 

Vamos colocar eles no lugar demarcado sem precisar mexer mais no HTML. 

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

Altere o código acima comforme seu gosto e com as imagens do mesmo tamanho que você colocou os slides no HTML e copie e cole no bloco de notas que já vamos usar. 

Vá em layout >> clique em adicionar um gadget de HTML /Javacript você cria-lo acima das postagem como no print


e no inicio cole

 <div style="position: absolute; margin-top: -180px; left: 600px;">
Abaixo dele cole o código que eu pedi para alterar e colar no bloco de notas.

e no final acrecente a tag

</div> 

e salve. Visualize. E vá alterando os números conforme seu gosto ou até ficar no lugar demarcado.

Créditos Cherry Bomb e Kawaii World



25 comentários:

  1. amei o tuto! Vou tentar fazer no próximo lay, sempre achei difícil colocar mas com esse tuto ficou mais fácil. =)

    ResponderExcluir
  2. Ótimo o tutorial! Amei!! Tá rolando um jogo de divulgação lá no blog!! Participe!! Beijos

    Princesa Maquiada

    ResponderExcluir
  3. Oie!! queria avisa-l@ que o meu blog já está aberto e abrir novas vagas de afiliação ;) estou com um novo layout também, espero que goste♥

    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. \o/ Que bom que voltou querido :) Irei passar lá

      Excluir
  4. Que legal,achei maravilhoso! Achei também meio díficil, mais vale muito a pena,deixa o blog mais bonito. •♥•

    photoscapeevc.blogspot.com

    ResponderExcluir
    Respostas
    1. Que nada flor, é super fácil é só prestar atenção >< obrigada

      Excluir
  5. Ia tentar, mais a minha irmã me disse que é muito dificil... Neim vou tentar. kkkkk'

    http://princesadepreto.blogspot.com

    ResponderExcluir
  6. Muito legal o tutorial,achei bem fácil!
    Küss->quem precisa de tv para ver beyoncé ♥.blogspot♥♥.com♥ [tire os corações e espaços para visitar]

    ResponderExcluir
  7. Muito util o tutorial adorei. Seguindo, retribui ?

    meus-pensamentos.com

    ResponderExcluir
  8. Muito bom esse tutorial.
    Olha eu entrei aqui por acaso pq to procurando um lay pro meu blog, mas preciso dizer que amei esse seu lay da Hayley, eu simplesmente amo Paramore e não poderia deixar de elogia-lo

    Uma Borboleta Laranja

    ResponderExcluir
    Respostas
    1. Olá querida! Muito obrigada eu também amo paramore!

      Aqui temos alguns lays free

      Obrigada

      Excluir
  9. muuuito legal, adorei! vou colocar no meu blog hahah

    Beijos
    http://heyealaysa.blogspot.com/

    ResponderExcluir
  10. Que tuto fofo,talvez no próximo lay,Obrigada.
    Um beijo
    http//bombasticmusics.blogspot.com

    ResponderExcluir
  11. Super fácil e bonitinho ^^ adoro colocar slides no cabeçalhos *---* Nas to tentando diversificar um pouco no meus últimos lay ^^

    Meu Mundo, Meu Estilo

    ResponderExcluir
    Respostas
    1. Fica super fofo >< eu também adoro slides no cabeçalho, também ando tentando inovar haha'


      http://forever-teens-89.blogspot.com.br/

      Excluir
  12. Eu ia fazer um cab. com alide, mas não me dou mto bem com tantos códigos, principalmente com o que eu ia usar, o igual o da capricho, é muito dificil. Mas parabéns pelo tuto Gleicy. Beijocas.

    Teen Diary

    ResponderExcluir
    Respostas
    1. Ah flor, o segredo é ter paciencia e observar bem, obrigada flor.

      Excluir
  13. adorei esse tutorial, ate colocaria no meu blog mas como já tem as ultimas postagens no topo do blog acho que ficaria muita informação né? Beijinhos xuxu! sucesso ai ♥
    www.furtadore.com.br

    ResponderExcluir

» Nossas redes sociais: Fã page | | Instagram | | Pinterest

» Críticas construtivas são sempre bem vindas.

» Deixe o link do seu blog no final do comentário e retribuiremos a visita com carinho.

» Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2019. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo