2 de jan de 2013

Slide no blog




Hey meus doces!

Hoje eu vim ensinar a colocar slide no blog! Eu já coloquei no meu novo layout, e amei! para quem não sabe o que é slide vou deixar um print ai em baixo que tirei do outro blog onde eu posto o Forget Dream.
Ah... gente eu quero avisar que este post ira ser bem rapidinho ok? Mas vou tentar explicar o máximo que dá.
(desculpe o print tenha ficado mal feito, mas, é que esse post vai ser rapidinho)


Vamos ao tutorial?

Vá em desing > Editar HTML e aperte F3. E procure por: </head>]

Antes do código que você pesquisou cole este:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
  var $ nv4wp = jQuery.noConflict ();
  $ Nv4wp (janela). Carga (function () {
   $ Nv4wp ('slider #'). NivoSlider ({
    efeito: "aleatória",
    fatias: 15, / / ​​Para animações fatia
    boxCols: 4, / / ​​Para animações caixa
    boxRows: 2, / / ​​Para animações caixa
    animSpeed: 500, velocidade de transição / Slide /
    pausetime: 3000, / / ​​Quanto tempo cada slide vai mostrar
    startSlide: 0, Slide / Set / inicial (0 índice)
    directionNav: true, / / ​​Next e Prev
    directionNavHide: true, / / ​​show Somente em foco
    controlNav: true, / / ​​1,2,3 ... navegação
    controlNavThumbs: false, / uso / miniaturas de Controle de Nav
    controlNavThumbsFromRel: false, image / Uso / rel para os polegares
    controlNavThumbsSearch: '. jpg', / / ​​Substitua esta com ...
    controlNavThumbsReplace: '_thumb.jpg', / / ​​... isso no polegar da Imagem src
    keyboardNav: true, / / ​​Use as setas da esquerda e da direita
    pauseOnHover: true, / animação Stop / enquanto paira
    ManualAdvance: false, / transições manuais / Força
    captionOpacity: 0.8, / / ​​Universal opacidade legenda
    prevText: 'anterior', / / ​​Prev texto directionNav
    nextText: 'Next', / / ​​texto directionNav seguida
    beforeChange: function () {}, Triggers / / antes de uma transição de slides
    afterChange: function () {}, / / ​​Triggers após uma transição de slides
    slideshowEnd: function () {}, Triggers / / depois de todos os slides foram mostrados
    lastSlide: function () {}, / / ​​Dispara quando o último slide é mostrado
    afterLoad: function () {} / / Dispara quando deslizante foi carregado
   });
  });
  </ Script>
Não precisa mexer em nada.

Ainda no seu HMTL procure por:  ]]></b:skin>

E acima dessa tag que procurou cole esse código:

/* The Nivo Slider styles */
#slider {position:relative;}
#slider img {position:absolute; top:0px; left:0px; display:none;}
#slider a {border:0; display:block;}
.nivoSlider {position:relative; width: 356px;}
.nivoSlider img {position:absolute; top:0px; left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute; top:0px; left:0px; width:100%; height:100%; border:0;
padding:0;margin:0; z-index:6; display:none;}
/* The slices and boxes in the Slider */
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
/* Caption styles */
.nivo-caption {position:absolute;left:0px; bottom:0px; background:#000; color:#fff; text-transform: uppercase; width: 100%;
z-index:50; border-right: 5px solid #;padding: 5px 0;}
.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:45%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
.slider {width:100%;}
.slider img {position:absolute;top:0px;left:0px;display:none;}
.slider a {border:0;display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a {display:block;width:31px;height:34px;background:url(http://twizonebr.com/Novidades/wp-content/themes/twizonebrvrs1/arrowswleft.png) no-repeat;text-indent:-9999px;border:0;
}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav { left:15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1; text-decoration:underline;}
Novamente não precisa mexer neste código. Salve e vá em layout > adicionar um Gadget > HTML/ JavaScript e dentro da caixinha cole esse código:
<div id="slide"><div id="slider">
<a href="LINK" target="_blank"><img src="URL DA IMAGEM"title="ESCREVA A DESCRIÇÃO" width="763" height="277" /></a>
<a href="LINK" target="_blank"><img src="URL DA IMAGEM" title="ESCREVA A DESCRIÇÃO"width="763" height="277" /></a>
<a href="LINK" target="_blank"><img src="URL DA IMAGEM" title="ESCREVA A DESCRIÇÃO"width="763" height="277" /></a>
</div></div>



Entendendo o código:

Onde está escrito "LINK" coloque o link que você quer que vá quando o leitor clica na imagem do slide que está aparecendo.

Onde está escrito "URL DA IMAGEM" coloque o url/link da imagem que você quer que apareça. LEMBRANDO: TODAS AS IMAGENS TEM QUE TER O MESMO TAMANHO, POIS SE NÃO TIVER, VAI DAR ERRO.

Onde está escrito "ESCREVA A DESCRIÇÃO" coloque a descrição do que quer que apareça ex: "5 dicas para ver seu quarto sempre organizado!". 
Crédito de tutorial: Sweet Dreams

Gostaram? Comente bastante que eu PROMETO que vou retribuir ok? Beijus

ah... posso perguntar uma coisa para vocês?


Vocês gostam de mim e dos meus posts? (responde no comentário)

    

( )Sim!                                     ( ) Nãoooooo!                     ( ) Sei lá!

Se responderem NÃO ou SEI LÁ, vocês já sabem né? ksaoskaoskap'
TO BRINCANDOOOO KKKK'
 

Beijus :*


9 comentários:

  1. si eu gostei! gagagag como eu coloco gif na barra lateral?
    lamourmonage.blogspot.com

    ResponderExcluir
    Respostas
    1. Respondendo os comentários da Miih*
      Se você estiver falando daqueles que uso no Status, é bem simples, é só copiar o gif e quando estiver digitando o texto colar, ushaushaush' beijos'

      Excluir
  2. Adorei o tuto! E é a primeira vez que visito o blog então não sei responder se gosto ou não, mas de primeira visita, já adorei! =D
    Beijo!
    Emi.

    The Chata Cherrie
    Curte?

    ResponderExcluir
    Respostas
    1. Também gostei, a Miih arrasa né? rs'
      obg por adorar o blog (:
      beijoos!

      Excluir
    2. Hehehbe obg flores do meu coração!!! nhac!! Ta vontade até de morder vocês !!! AAI kasoakpsoa'

      Excluir
  3. Nossa, ficou show! Eu queria ter habilidade com essas coisas, mas nem consigo fazer um layout legal para o meu blog =/
    Mas ficarei de olho nas dicas por aqui.
    Abraços.

    ResponderExcluir
    Respostas
    1. HEheheh!! Fica lindo mesmo né?? Eu amo!

      Excluir
  4. Eu acho esse tutorial bem fofo, mas não tem onde usar no meu blog
    beijos
    blog-cereja.blogspot.com

    ResponderExcluir
    Respostas
    1. Fica fofo mesmo né?? Tem sim!! No próximo lay ve se usa

      Excluir

Você é livre pra comentar e eu agradeço,mas se for criticar também é bem-vindo,mais sua critica deve ser bem elaborada, se seguir o blog eu vou seguir de volta, é só pedir. E claro que eu vou retribuir os comentários.

By: Kaah. L e Yanca.M