Slides para destacar postagem:

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

Para mudar o background, a largura e o formato ou cor da borda, procure por:

background: #000000

border: 5px inset #584536; 

Onde 5px é a largura;

inset é o formato da borda;

 #584536;  é a cor.

Se você quiser alterar a velocidade do slides altere o número 4000.

Para mudar o tamanho das imagens:

width:550px (largura)

height:220px (altura)

Para inserir este código vá até:

Layout - HTML- 

Procure por:

Copie e cole o código antes desta tag.

Salve o modelo.

Agora vá em Adicionar gagets - procure por HTML/javascript e cole este código:

<div id="s3slider"></div><div><ul id="s3sliderContent"></div><div><br></div><div><li class="s3sliderImage"></div><div><a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiX-zKZRVmwvTjPr4KVWcbiHl_Dfjj75FOgDDCSgTTrIhT4L093Xiw1YTm2uVHEuEFI7g2yHDQZX_FKvLJ6a9ijodJSDEChMrr-W9CsGxQS4-xrMplppx5GBYK7zPbvxcNczpWWc_LOqw/s320/Foto1.jpg" /></div><div><span>Texto: Título do post </span></a></div><div></li></div><div><br></div><div><li class="s3sliderImage"></div><div><a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp1EEozVONAiBNQHU3y6W2HIvsjUzCc-84TNAeAJ4aSWef2frqb0Nq4dY8K_MHnAGSwN9ohyV5egQZ0JpU8pdLHeCz6ZXjmnv_L4Db80gxEHIf0CSaZbXhJ8ar4-sw-FBf9eaENA1dQkg/s320/Foto2.jpg" /></div><div><span>Texto: Título do post</span></a></div><div></li></div><div><br></div><div><li class="s3sliderImage"></div><div><a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-3W4rGuZCErmEPu8KN0hMqUjHDBs9KQGb-dXfn_tj_U8YYBnF1-p_o4mc-U9qfIg3v9AFlfsTzbHYsISskGxaMuFYUkrq1KfucwTQBsqCcsPT-ojjNdsmC_SnuCqYpr4u5K3F_sz3sE/s320/Foto3.jpg" /></div><div><span>Texto: Título do post</span></a></div><div></li></div><div><br></div><div><li class="s3sliderImage"></div><div><a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4lGLiZ6yeMBbXiAAnZhmB5oKBPN4nN3jTz8yBiR14jdmgTW6VvG7f_Fr_SYNFaGTuUB8D2ipPreTQcwHtwlgO7T96WOkHPNPN5QPUQzZksUqZgIyjADzJaYiR-wPHf-QHuPd1piHHNE/s320/Foto4.jpg" /></div><div><span>Texto: Título do post</span></a></div><div></li></div><div><br></div><div></ul></div><div></div></div><div><br></div><div><div class='clear'></div>

Coloque o link e o endereço de sua imagem :

troque "SEU-LINK-AQUI" pelo link de sua postagem;

e o https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-3W4rGuZCErmEPu8KN0hMqUjHDBs9KQGb-dXfn_tj_U8YYBnF1-p_o4mc-U9qfIg3v9AFlfsTzbHYsISskGxaMuFYUkrq1KfucwTQBsqCcsPT-ojjNdsmC_SnuCqYpr4u5K3F_sz3sE/s320/Foto1.jpgpelo endereço de sua imagem.Neste tutorial tem apenas 4 links, você pode acrescentar mais ou menos de acordo com sua necessidade!Feito tudo isso, visualize para verificar que está tudo certo. E Salve!!
Se você gostou, comenta!!