Tutorial: Slider

               
Ooi gente linda tudo bem? Desculpa eu não estar postando tanto ultimamente estou sem tempo a Tati até me cobrou de postar então hoje eu vou fazer um post bem legal que é sobre como montar um slider em seu blog ele fica um amor, só não fiz no meu blog, o Sonhando Acordada, porque eu acho que não encaixa muito com o layout meu blog mas no da Tati eu acho que ficaria lindo, vou falar pra ela colocar no blog!!!
Faça o seguinte:
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/AVvXsEh4OnpXd-RSPPOl0BASvAOMTkJT9tyv81SoOAulTP9RB5axoltIHJ0nS8E9zemsUBxeTnuB80tSOrPSVLfvXDZXhDdWTB2apXnXeC1KB_ojL8c0kH35yEGaDzG-dOy6TdbFdPX7biikJ0lS/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(&#39;#slider&#39;).nivoSlider({
effect:&#39;random&#39;,
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: &#39;.jpg&#39;, // Replace this with...
controlNavThumbsReplace: &#39;_thumb.jpg&#39;, // ...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: &#39;Prev&#39;, // Prev directionNav text
nextText: &#39;Next&#39;, // 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>
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!!!
Então é isso meus fofuchos um beijão <3
Créditos: Go Imagine, e esse blog também né? Hehehehe

Nenhum comentário:

Postar um comentário

-Segue,Retribui? Retribuo se eu gostar do blog.
-Não Ofender ninguém.
-Não falar palavrões .
-Sempre deixar o link do seu blog para retribuir.
-Leia o post antes de comentar!
-Comentários sem conteúdo serão ignorados.
-Leio todos os comentários e respondo
♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙