09/11/2012

12

Como Por um Slide No Blog.



Oi amoras, aqui quem fala é a Brenda e trago mas um tutorial para vocês!
Hoje eu trouxe um tutorial de como colocar um slide no seu blog! O tutorial
é muito simples... e eu fiz uma cagada no meu blog e agora eu tenho que criar outro hehe.
vou tando ao assunto ele é muito simples, clique eu leia mais.

Quero dar os Créditos ao Blog Cherry Bomb.

O resultado final vai ser esse:


1- Vá  em modelo ~> Editar um HTML~> Aperte F3 e pesquise por:
</head>

Logo abaixo desse código, cole esse:

<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://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.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>



Eu destaquei em negrito as partes que você irá precisar alterar para ficar mais fácil de encontrar. No fim do post tem algumas imagens de setas e das bolinhas de navegação para vocês usarem. Depois de fazer as alterações, visualize se está tudo ok e salve.

2- Agora para o slide aparecer basta colar o código abaixo em gadget de HTML ou onde você quer que ele apareça :

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



Substitua o endereço das imagens, os links e a legenda e pronto! Um slide lindo estará no seu blog. Agora as imagens que eu prometi:

Setas
  

Bolinhas
 

Espero que tenham gostado e aproveite no seu blog, e lembrando que os créditos são todos para o Cherry Bomb.

Brenda♥

12 comentários:

  1. Eu era tao boa em html , fiquei uns anos afastada *.* hoje to mais lerda que criança em pré kkkkkkkkk

    bjus

    feehfeminina.blogspot.com.br

    ResponderExcluir
  2. Retribuindo a visita já estou seguindo

    batoneglos.blogspot.com

    ResponderExcluir
  3. amor que blog lindo
    ◕‿◕
    olha seu tutorial me ajudoo muitoo brigadão!

    seguindo, valew apena ter entrado no seu blog
    acervo-de-livros.blogspot.com

    ResponderExcluir
  4. retribuindo a visitinha flor *--* seu blog é muito lindo, xonei :P

    sentierodellerose1.blogspot.com

    ResponderExcluir
  5. Já usei ele uma vez, lembra lá no template da Demi? Só que deixei sem setinhas e links SASUHIAUHSIUAHSUH' <3 Ótimo tuto.

    @Kawaii World.

    ResponderExcluir
    Respostas
    1. Amo seu blog kaorii já sigo ele segue o meu ? já coloquei no meu blog esse tuto obrigado você é perfeita de gênio

      Será que poderia dar uma olhadinha no meu blog e se gostar seguir ? ⊙﹏⊙ beijos

      http://turminhadasmeninas.blogspot.com/

      Excluir
  6. Eu sempre quis aprende a por Slide ainda bem que você ensino Beijão ;3 glamourosa-gk.blogspot.com.br

    ResponderExcluir
  7. Ótimo tutorial, amei! Adoro o seu blog, flor! Parabéns <3

    Explodindo Glitter

    ResponderExcluir
  8. Eu tenho ele no meu blog flor *-*
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir
  9. NOSSSA!!! eu adorei o tutorial, vou fazer no novo layout, juro, e vou botar seus créditos :P
    Desculpe pela demora de responder o post flor.

    All the loves (no perfil)

    ResponderExcluir
  10. Ooi Garota Imaginária! ksks ' Aceito sim ser seu blog irmão , é uma honra ser irmã de um blog tão demais! Beijos! ´Já te coloquei lá! Bejos!

    http://mundoo-fashiion.blogspot.com.br/

    For Every Girl

    ResponderExcluir

Podem comentar a vontade , qualquer dúvida leia as coisinhas abaixo

Não seja mal educado
Respondo todos os comentários
Só aceito comentários falando do post

Enfim alguns símbolos para copiar e colar . Não se esqueça de deixar o link de seu blog para que eu possa vê-lo

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡