Adicione um Slide para destacar seus artigos em Sites/Blogs 4

João Santos | 15:19 | , , ,

Olá pessoal! Hoje vou postar a pedidos de alguns leitores, um tutorial simples mais com ótimas finalidades, Um Slide show de destaque para seus artigos. É muito simples o tutorial se divide apenas em dois códigos,vamos lá?
Logado em seu Blog/Site, vá em Em Design ~> Editar HTML, não precisa Expandir modelos de Widgets, copia todo o código abaixo e cole antes da tag </head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
     long as you leave my infos at the top.
-------------------------------------------------------------------------- */
(function($){
$.fn.s3Slider = function(vars) {
var element     = this;
var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current     = null;
var timeOutFn   = null;
var faderStat   = true;
var mOver       = false;
var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
   $(items[i]).mouseover(function() {
      mOver = true;
   });
   $(items[i]).mouseout(function() {
       mOver   = false;
       fadeElement(true);
   });
});
var fadeElement = function(isMouseOut) {
   var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
   thisTimeOut = (faderStat) ? 10 : thisTimeOut;
   if(items.length > 0) {
       timeOutFn = setTimeout(makeSlider, thisTimeOut);
   } else {
       console.log("Poof..");
   }
}
var makeSlider = function() {
   current = (current != null) ? current : items[(items.length-1)];
   var currNo      = jQuery.inArray(current, items) + 1
   currNo = (currNo == items.length) ? 0 : (currNo - 1);
   var newMargin   = $(element).width() * currNo;
   if(faderStat == true) {
       if(!mOver) {
           $(items[currNo]).fadeIn((timeOut/6), function() {
               if($(itemsSpan[currNo]).css('bottom') == 0) {
                   $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                       faderStat = false;
                       current = items[currNo];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               } else {
                   $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                       faderStat = false;
                       current = items[currNo];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               }
           });
       }
   } else {
       if(!mOver) {
           if($(itemsSpan[currNo]).css('bottom') == 0) {
               $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                   $(items[currNo]).fadeOut((timeOut/6), function() {
                       faderStat = true;
                       current = items[(currNo+1)];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               });
           } else {
               $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
               $(items[currNo]).fadeOut((timeOut/6), function() {
                       faderStat = true;
                       current = items[(currNo+1)];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               });
           }
       }
   }
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>


A velocidade do Slide é de 4000, mude o valor para o desejado, enfim, alterando apenas o que está indicado, se não conhece HTML, não mexa! Visualize, se estiver tudo bem, salve!

Vá em Elementos da Página, e adicione um Gadget HTML/JavaScript, copie todo o código abaixo e cole-o no Gadget.


<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA-w/I2U4SlmRPss/s1600/Crysis-11.jpg" />
<span>Crysis : Download Full Version</span></a>
</li>
<li class="s3sliderImage">
<a href=" SEU-LINK-AQUI "><img style="width:550px;height:200px;" src="http://1.bp.blogspot.com/_4HKUHirY_2U/S9aKuMsQ8wI/AAAAAAAAA-4/-cMpslEWrDI/halo-11.jpg" />
<span>Halo 3 : Play Game Online</span></a>
</li>
<li class="s3sliderImage">
<a href=" SEU-LINK-AQUI "><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtHKBCTI/AAAAAAAAA-g/mzOzqFjF2FQ/avatar-11.jpg" />
<span>Avatar : Watch Movie Now !!!</span></a>
</li>
<li class="s3sliderImage">
<a href=" SEU-LINK-AQUI "><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" />
<span>Call Of Duty 4 : Get Here</span></a>
</li>
</ul>
</div>
<div class='clear'></div>


Com o ultimo código adicionado em seu devido lugar, troque para o seu conteúdo, onde está "SEU LINK AQUI" é onde você irá colocar a URL de seu artigo, e não se esqueça de alterar as imagens que já vem com o código para as suas respectivas imagens. E qualquer dúvida, deixe um comentário.

Até a próxima!


Gostou do artigo? Assine via e-mail e receba atualizações do blog imediatas em sua caixa de entrada ou se preferir assine via RSS/Feed. Vira fã no Facebook.

4 Responses So Far:

Victor Faria disse...

Boa noite!
Cheguei aqui através do Link Irado.
Gostei bastante da sua dica! Quando tiver um tempo, vou ver se coloco um slideshow lá em meu blog.
Já estou seguindo seu blog. Quando puder, dá uma passada lá no meu.
Abraço!

Paulo Cesar PC- BLOG DE TUDO UM POUCO, MINHA OPINIÃO disse...

Gosto de vim aqui e absorver seus conhecimentos. É sempre uma otima oportunidade dec aprender. Um grande abraço pra você.

Paulo Cesar PC- BLOG DE TUDO UM POUCO, MINHA OPINIÃO disse...

Tenha uma feliz Páscoa, com muita paz e muita luz.

Vera disse...

Oi João
Obrigada pelo link. Já estou adicionando um link do teu blog também. É uma boa parceria, já que tratamos dos mesmos assuntos.
Sucesso pra você!
Beijosss
*Links e Links

- Comentário Moderados -

Não aceitamos por aqui:

- comentário nada a ver com o artigo.

- Links de propaganda (Spam).

- Link de divulgação de seu Blog/Site.

- Pedido de parcerias.

- Com palavrões e onfensas.

Enfim, é simples coisas desnecessárias serão removida, qualquer dúvida temos uma página de Contato.
Agradeço pela compreensão.

 
DiretorioUP Copyright © 2010 is Designed by Lasantha Page Rank Technology Blogs - Blog Rankings Technology (Electronics) - TOP.ORG Home | RSS Feed | Comment RSS