Slide No Blogger

Me desculpa não ter postado esse tutorial antes. Eu acabei me distraindo e me esqueci de postar, Vamos ver como por Slides no blog? Os slides que me refiro são aqueles que tem uma setinha pra mudar o slide e com efeitos hovers diferentes.










Vamos ver como faze-lo? Então clique no Leia Mais.

 Primeiro, você vai em Design/Modelo > Editar HTML > Ctrl + F e procure por </head> e acima cole:

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

Agora procure por ]]> e acima cole:

/* 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;}

Você não precisa mudar NADA. Agora vamos adicionar o slide em algum Lugar do blog. Vá em Design/Modelo > Elementos da página > Adicinar um gadget HTML/JavaScript > Cole esse código:
<div id="slide"> <div id="slider"> <a href="LINK" target="_blank"><img src="LINK DA IMAGEM" width="763" height="277" /></a> <a href="LINK" target="_blank"><img src="LINK DA IMAGEM" width="763" height="277" /></a> <a href="LINK" target="_blank"><img src="LINK DA IMAGEM" title="ESCREVA A DESCRIÇÃO"width="763" height="277" /></a> </div> </div>

Primeiro você vai ter saber a largura das imagens, e ter o link. Saiba o que cada parte significa:
LINK DA IMAGEM: Link da imagem.
width/height: Largura e altura da imagem (height: altura & widht: largura).
LINK: O link.
Bem mais fácil do que se parece né? Espero que tenham gostado do tutorial. Obrigado e até.