Você pode por no cabeçalho ,ou mesmo no topo das postagens em tamanho grande. Se você quiser colocar no cabeçalho recomendo ler com atenção este post do falecido Cherry Bomb (Que nos faz muitaaaaaaa falta)Espero que volte um dia,quem sabe.
Os códigos são grandes:
Os códigos são grandes:
Procure por }]]></b:skin> (Ctrl + F) e acima dele 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: 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 que estão em vermelho: 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!
Não retire nenhuma "aspa" .
Não retire nenhuma "aspa" .
Nenhum comentário:
Postar um comentário