2 de dez de 2013

Tutorial: Como colocar slide no blog!!


Oiii framboesas tudo bem??
  Eu vim aqui para dizer que estou muito feliz pois meu blog apareceu na revista do Uprising Teen, foi em setembro mas como o blog ficou desatualizado eu não tinha visto!! Obrigada á galerinha do uprising teen por terem me colocado na revista!! muitos beijinhos para vocês!!  u3u e quem quiser ver a revista deles clique Aqui.
Enfim eu também quero dizer que meu notbook ainda não está arrumado e por isso não sei se vou conseguir postar todos os dias!! Enfim hoje vou mostrar um tuto de como colocar Slide no blog que é um tuto bem procurado, eu amo blog com slides deixa o blog com cara de profissional, quem sabe no próximo lay nós usaremos aqui no Things Teen!!
                                              Clique em leia mais para ver o tutorial!!
 
Agora vamos ao tutorial (desculpa se o tuto for grande!!) Créditos do tutorial vai para este site.

Primeiro, vá em Modelo no seu Blog, e clique em Editar HTML. Aperte Ctrl+F, e procure pela tag </head> e cole esse código abaixo.


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

                          As partes em vermelho, você pode modificar a seu gosto é muito simples. 
                Agora vá em Layout no seu blog, clique em "adicionar um gadget" e procure pelo gadget "HTML/JavaScript ". Dentro dele cole esse código:


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

Simples não? e agora vou deixar algumas imagens para vocês personalizarem seus slides!! Os créditos das imagens vão para o Cherry Bomb:
                                                                    Setas:


                                                                   Bolinhas:

                                                                    

Gostaram do tutorial?? Ele é bem grande só que ele é bem útil é também um pouco complicado mas enfim é bem útil para blogs!!

                                                        Beijinhos de caramelo ^3^


2 comentários:

  1. CARA, EU TE AMO! Tava precisando muito desse tuto, procurava em tudo que era canto e não achava, você me salvou, obrigada <3333

    http://irmasdapreguica.blogspot.com.br/

    ResponderExcluir

Antes de comentar, leia algumas regrinhas ^=^

✖- Comente pelo menos um pouco sobre o post, senão seu comentário será ignorado!
✖- Ainda temos vagas para afiliados é só pedir nos comentários, mas fale um pouco sobre o post
✖- Se você se inspirar em alguma coisa aqui no blog, peça primeiro a permissão para alguma pessoa da nossa equipe pelos comentários, e só poderá se inspirar se deixarmos senão será considerado plágio!
✖- Respeitem todos os leitores e leitoras (sem xingamentos e nem nada parecido).
✖- Deixe o link do seu blog para podermos retribuir a visita.
✖- Seguindo segue de volta, aceitamos só se estiver seguindo mesmo e se comentar um pouco sobre o post.

OBS: Se quiser deixar seus comentários mais fofinhos, use nossos emoticons ≧ω≦

Comente á vontade, beijinhos de algodão doce ^3^

┌∩┐ ⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙▽⊙ ⊙﹏⊙ ⊙△⊙ ◑▽◐ ◑ω◐ ◑﹏◐ ●︿● ●ω● ●﹏● ≧▂≦ ≧︿≦ ≧ω≦ ≧﹏≦ ≧▽≦ >︿< >ω< >﹏< >▽< ≡(▔﹏▔)≡ (¯▽¯;) <(“”"O”"”)> (-__-)b (;°○° ) \( ̄︶ ̄)> <( ̄︶ ̄)/ (/≧▽≦/) \(≧3≦)/ \(≧ω≦)/ o(≧ω≦)o o(≧o≦)o ㄟ(≧◇≦)ㄏ ╮(╯▽╰)╭ ╮( ̄▽ ̄)╭ (~o ̄▽ ̄)~o ~ 。。。(~ ̄▽ ̄)~[] (╯-╰)/ ♪ ♥ ✓ ✖ εїз ♥ ❤ ❥ ♡ ♥ ღ ɞ ♛ ♚ ♝ ♞ ♜ ♟ ♔ ♕ ♖ ♗ ♘ ♙ ☼ ☀ ☁ ☂ ☃ ☄ ☮ ♂ ♀ ☠ ♪ ♫ ♩ ♬ ☺ ✿ ⓡ ⓒ ♨(o・з・o) OωO (≧∩≦) (っ・ω・)っ (●´ω`●) (o・ε・o) (・ε・`。) (⊃ω⊂) (≧∪≦) (。・ω・。) (。TωT)/ ^^ ;3 >3< >.< >< ^=^