20 de set de 2013

Slide no blog

Oi diamantes!
Sentiram a minha falta? Passei muito tempo sem postar aqui. As minhas aulas começaram e esqueci completamente do ddug me desculpem. Eu tenho aulas de tarde, sempre tive aulas de tarde. Nunca experimentei a sensação de ter uma tarde livre :o.

Hoje trago um tutorial, como meter slide no blog. Clique no leia mais caso queira aprender!


1° -  Cole o código abaixo acima de </head>
<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(window).load(function() {
   $nv4wp('#slider').nivoSlider({
    effect:'random',
    slices:15, // For slice animations
    boxCols: 4, // For box animations
    boxRows: 2, // For box animations
    animSpeed:500, // Slide transition speed
    pauseTime:3000, // How long each slide will show
    startSlide:0, // Set starting Slide (0 index)
    directionNav:true, //Next and Prev
    directionNavHide:true, //Only show on hover
    controlNav:true, // 1,2,3... navigation
    controlNavThumbs:false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel:false, // Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', // Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
    keyboardNav:true, //Use left and right arrows
    pauseOnHover:true, //Stop animation while hovering
    manualAdvance:false, //Force manual transitions
    captionOpacity:0.8, //Universal caption opacity
    prevText: 'Prev', // Prev directionNav text
    nextText: 'Next', // Next directionNav text
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
   });
  });
  </script>


2° - Procure por ]]><b:skin e acima cole o seguinte 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;}<textarea></center></center>

3° - Onde quiser que o slide apareça cole o código abaixo:

<div id="slide"><div id="slider">
<a href="LINK DO POST" target="_blank"><img src="http://static.tumblr.com/ifqwhnb/P5Qm20oxb/untitled-9.png" width="763" height="277" /></a>
<a href=" LINK DO POST " target="_blank"><img src="http://static.tumblr.com/ifqwhnb/PdVm20p29/untitled-9.png" width="763" height="277" /></a>
<a href=" LINK DO POSTPAGE" target="_blank"><img src="http://static.tumblr.com/ifqwhnb/Kbhm20p8r/untitled-9.png" title="ESCREVA A DESCRIÇÃO"width="763" height="277" /></a>
</div></div>

 Já tem imagens no slide, mas você pode alterar para as desejadas. Você também deve alterar o link do post, o height (altura do slide) e width (largura do slide) e a descrição dos slides.

Espero que tenham gostado, desculpem o post gigante.

2 comentários:

  1. Eu amo blogs com slides, sempre dão um toque a mais né? Mas, particularmente, não tenho paciência para colocar um e ficar atualizando ele, com imagem e colocando os links hahaha Ainda assim, adorei o tutorial ^^

    Bjs
    http://paradise-of-madness.blogspot.com.br/

    ResponderExcluir
  2. pra alterar a largura do slide é no 1 cod. ou no 2 cod. html ?

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.