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?
Antes do código que você pesquisou cole este:
Não precisa mexer em nada.<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>
Ainda no seu HMTL procure por: ]]></b:skin>
E acima dessa tag que procurou cole esse código:
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:/* 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;}
<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 :*
si eu gostei! gagagag como eu coloco gif na barra lateral?
ResponderExcluirlamourmonage.blogspot.com
Respondendo os comentários da Miih*
ExcluirSe você estiver falando daqueles que uso no Status, é bem simples, é só copiar o gif e quando estiver digitando o texto colar, ushaushaush' beijos'
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
ResponderExcluirBeijo!
Emi.
The Chata Cherrie
Curte?
Também gostei, a Miih arrasa né? rs'
Excluirobg por adorar o blog (:
beijoos!
Hehehbe obg flores do meu coração!!! nhac!! Ta vontade até de morder vocês !!! AAI kasoakpsoa'
ExcluirNossa, ficou show! Eu queria ter habilidade com essas coisas, mas nem consigo fazer um layout legal para o meu blog =/
ResponderExcluirMas ficarei de olho nas dicas por aqui.
Abraços.
HEheheh!! Fica lindo mesmo né?? Eu amo!
ExcluirEu acho esse tutorial bem fofo, mas não tem onde usar no meu blog
ResponderExcluirbeijos
blog-cereja.blogspot.com
Fica fofo mesmo né?? Tem sim!! No próximo lay ve se usa
Excluir