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.