CLIC EM:(Ctrl + F) ;e procure por }]]></b:skin>
E acima dele cole o código abaixo;
/* The Nivo Slider styles */#slider {position:relative;}#slider img {position:absolute; top:0px; left:0px;display:none;}.nivoSlider {position:relative; width: 556px; /* largura */ height: 440px; /* altura */ } .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: #ccc; /* Cor de fundo do título */ color: #fff; /* Cor do título */ 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibrht-Lyj874yPcQLztqbiH-ZPFdLVWJqYCsNRRIH_QBNsu4aQe6xHO4pUTcg8LzPXageI5ASx_P0_oOY0WRFXj7AUrR-g2GfKxneju5k_StOZUBscuOqwrOgEaINgCXXq9neQ_D4zGOsl/s1600/s-12.png)no-repeat; /* imagem das setinhas */ 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;}
As únicas coisas que você precisa alterar são as negritadas. Principalmente o tamanho (width e height).
Agora procure por </head> e acima dele 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 animationsboxCols: 4, // For box animationsboxRows: 2, // For box animationsanimSpeed:500, // Slide transition speedpauseTime:3000, // How long each slide will showstartSlide:0, // Set starting Slide (0 index)directionNav:true, //Next and PrevdirectionNavHide:true, //Only show on hovercontrolNav:true, // 1,2,3... navigationcontrolNavThumbs:false, // Use thumbnails for Control NavcontrolNavThumbsFromRel:false, // Use image rel for thumbscontrolNavThumbsSearch: '.jpg', // Replace this with...controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image srckeyboardNav:true, //Use left and right arrowspauseOnHover:true, //Stop animation while hoveringmanualAdvance:false, //Force manual transitionscaptionOpacity:0.8, //Universal caption opacityprevText: 'Prev', // Prev directionNav textnextText: 'Next', // Next directionNav textbeforeChange: function(){}, // Triggers before a slide transitionafterChange: function(){}, // Triggers after a slide transitionslideshowEnd: function(){}, // Triggers after all slides have been shownlastSlide: function(){}, // Triggers when last slide is shownafterLoad: function(){} // Triggers when slider has loaded});});</script>
Visualize e se estiver tudo ok salve.
O slide ainda não irá aparecer. Para mostrá-lo vá até Layout e
adicione em um lugar estratégico um gadget de HTML/JavaScript. Dentro
dele cole:
<div id="slide"><div id="slider"><a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a><a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a><a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a><a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a></div></div>
Altere o que se pede e seja feliz!
Lembrando que você deve alterar height e width conforme o tamanho que estipulou lá no primeiro código!
Espero que consigam e tenham gostado!
Nenhum comentário:
Postar um comentário