Adicione um Slide para destacar seus artigos em Sites/Blogs
Autor: João Santos | Publicado: 2011-04-05T15:19:00-03:00

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&nbsp;~&gt; Editar HTML, não precisa Expandir modelos de Widgets, copia todo o código abaixo e cole antes da tag &lt;/head&gt;


&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/&gt;&lt;script type='text/javascript'&gt;//&lt;![CDATA[/* ------------------------------------------------------------------------s3SliderDevelopped By: Boban Karišik -&gt; http://www.serie3.info/CSS Help: Mészáros Róbert -&gt; http://www.perspectived.com/Version: 1.0Copyright: Feel free to redistribute the script/modify it, as&nbsp;&nbsp;&nbsp;&nbsp; long as you leave my infos at the top.-------------------------------------------------------------------------- */(function($){$.fn.s3Slider = function(vars) {var element&nbsp;&nbsp;&nbsp;&nbsp; = this;var timeOut&nbsp;&nbsp;&nbsp;&nbsp; = (vars.timeOut != undefined) ? vars.timeOut : 4000;var current&nbsp;&nbsp;&nbsp;&nbsp; = null;var timeOutFn&nbsp;&nbsp; = null;var faderStat&nbsp;&nbsp; = true;var mOver&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; = false;var items&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; = $("#" + element[0].id + "Content ." + element[0].id + "Image");var itemsSpan&nbsp;&nbsp; = $("#" + element[0].id + "Content ." + element[0].id + "Image span");items.each(function(i) {&nbsp;&nbsp; $(items[i]).mouseover(function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mOver = true;&nbsp;&nbsp; });&nbsp;&nbsp; $(items[i]).mouseout(function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mOver&nbsp;&nbsp; = false;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fadeElement(true);&nbsp;&nbsp; });});var fadeElement = function(isMouseOut) {&nbsp;&nbsp; var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;&nbsp;&nbsp; thisTimeOut = (faderStat) ? 10 : thisTimeOut;&nbsp;&nbsp; if(items.length &gt; 0) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; timeOutFn = setTimeout(makeSlider, thisTimeOut);&nbsp;&nbsp; } else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("Poof..");&nbsp;&nbsp; }}var makeSlider = function() {&nbsp;&nbsp; current = (current != null) ? current : items[(items.length-1)];&nbsp;&nbsp; var currNo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; = jQuery.inArray(current, items) + 1&nbsp;&nbsp; currNo = (currNo == items.length) ? 0 : (currNo - 1);&nbsp;&nbsp; var newMargin&nbsp;&nbsp; = $(element).width() * currNo;&nbsp;&nbsp; if(faderStat == true) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(!mOver) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(items[currNo]).fadeIn((timeOut/6), function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if($(itemsSpan[currNo]).css('bottom') == 0) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(itemsSpan[currNo]).slideUp((timeOut/6), function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; faderStat = false;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; current = items[currNo];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(!mOver) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fadeElement(false);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(itemsSpan[currNo]).slideDown((timeOut/6), function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; faderStat = false;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; current = items[currNo];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(!mOver) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fadeElement(false);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp; } else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(!mOver) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if($(itemsSpan[currNo]).css('bottom') == 0) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(itemsSpan[currNo]).slideDown((timeOut/6), function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(items[currNo]).fadeOut((timeOut/6), function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; faderStat = true;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; current = items[(currNo+1)];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(!mOver) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fadeElement(false);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(itemsSpan[currNo]).slideUp((timeOut/6), function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(items[currNo]).fadeOut((timeOut/6), function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; faderStat = true;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current = items[(currNo+1)];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(!mOver) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fadeElement(false);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp; }}makeSlider();};})(jQuery);//]]&gt;&lt;/script&gt;&lt;script type='text/javascript'&gt;$(document).ready(function() {$(&amp;#39;#s3slider&amp;#39;).s3Slider({timeOut: 4000});});&lt;/script&gt;&lt;style type='text/css'&gt;#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;}&lt;/style&gt;

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.

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

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!
Demo:
Via