Nivo Slider no blog

Olá olá~~ estou de recuperação ainda, recuperando da operação do maldito siso! esses dentes são uma droga, só servem para nos incomodar e fazer com que soframos, bem enquanto isso estou assistindo o maior numero de doramas possiveis, comecei a ver she was pretty, e estou amando esse dorama é muito bom, quem queira ver o dorama eu baixo no siwon fansubs, aqui  é um otimo subber
Bem, sempre que eu disponibilizo layout's surge um probleminha, e hoje eu percebi que não tinha o tutorial do nivo slide, e o layout da Tamako Love Story possui nivo slide, pessoas com algum tempo de blogger sabem sobre esse tutorial e tals, mas eu fui muito retardada em pensar que todos saberiam, entao eu resolvi trazer o tutorial de como colocar um slide passando no cabeçalho do blog.

1. Abra seu HTML, e procure por  </head> cole o seguinte codigo abaixo dele: 

<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 negrito são as partes que voce precisa configurar de acordo com sua imagem, largura e altura, e se voce quer ou não por uma borda, os outros codigos nao precisam ser mexidos.

2. Depois de salvar, vá em layout e adicione um gadget de HTML/Javascript e coloque ele onde voce quer que o slide apareça, se quiser o slide no cabeçalho voce precisa usar o tutorial de gadgets no cabeçalho que tem aqui no KT, cole o seguinte codigo :
<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>
O slide pode redirecionar para alguma postagem, por isso voce pode por o link, e também pode por uma legenda no proprio slide.
Faça as devidas substituições e seu slide estará funcionando \o/ creditos pelo tutorial Cherry Bomb 

2 coment:

  1. Olá! Nossa, nem me fale em siso, tirei dois e agora preciso tirar os outros dois, to morrendo de medo e enrolando horrores kkkkk'. Enfim, continue disponibilizando mais tutoriais, eles ajudam bastante quem está começando no mundo blogger, tipo eu que ainda não peguei as manhas do blogger kkkk'

    http://rawr-it.blogspot.com/

    ResponderExcluir
    Respostas
    1. Nao enrole kkk sério é bem melhor! Irei irei, uhun que bom que gostou.

      Excluir

Os comentários são moderados pelas donas do blog, então se você desrespeitar alguma de nossas regras seu comentário não será valido. Por favor respeite as regras para mantermos um blog organizado.

- Não xingue um postador ou ofenda algum blog,
- Se quer fazer uma critica faça, mais não criticas bobas apenas para afetar o blog ou para afetar uma pessoa.
- Quer pedir algo por favor use a Ask, para isso, pedidos de afiliação e para ser postador também são todos na ask :3
- Não estamos aqui para criar intrigas, se quer se manifestar em nossos debates por favor seja educado!
- Quando o tempo deixa nos visitamos os blogs que comentam.
- Anônimos não são mais permitidos, por problemas de plágio e uso de materiais e tutoriais sem os créditos, e como é anonimo não consigo saber quem é o culpado, espero que entenda.

Obrigada <3

« »