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('#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>
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⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙