Slider para resenhas

Hoje vou meio que iniciar uma seção nova aqui no blog: S.O.S blog. Na verdade, antes que vocês se animem, não sei praticamente nada de html e dependo de blogs com tutoriais para tudo o que quero fazer. Então: não é que vá ter nada de novo super exclusivo por aqui. Porém, sendo assim como sou, conheço a realidade de muitas outras pessoas como eu haha que às vezes sofrem horrores para encontrar determinado tutorial por aí, e minha ideia é facilitar esse processo — e passar a receita das gambiarras que eu faço, porque nisso, sim, eu sou ótima (roda a fita adesiva xD)! Obviamente, todos os blogs serão creditados e pelo menos a grande maioria dos meus posts nesta seção terá links para seus lugares originais. No caso, serei apenas o vetor =P (mas quando estiver em inglês ou espanhol vou trazer o tutorial na íntegra, porque, né, gosto de aparecer xD).

O primeiro post da seção vem da minha vontade de ter um slider super legal usado em vários blogs de resenhas — ele fica passando a capa dos livros, daí você clica na capa e vai para aquela resenha. Já deu pra perceber que não sei como se chama o bendito do slider, tampouco sei se ele tem um nome. Então, resolvi fazer uns testes com os códigos-fonte de um determinado blogger, e depois de colocar o slider em todos os cantos possíveis de um layout xD, eis que consigo colocá-lo no lugar certo — e é sempre mil vezes mais simples do que a gente imagina =S

Como sei também que tem umas (2) pessoas interessadas nele, vou explicar a gambiarra que fiz aqui.

Mais uma vez, vale mencionar que não inventei esse código, ele não é meu, eu o tirei daqui, ó: Conversas de alcova. Inclusive, se a autora do blog achar ruim, tiro na hora, não quero prejudicar ninguém, muito pelo contrário... E, ainda, aconteceu o seguinte: testei-o em um "layout premade", mais profissional, e não deu certo, as imagens ficaram cada uma com um tamanho, mesmo eu especificando o tamanho delas. Já nos blogs cujos layouts foram criados a partir do modelo "travel" do blogger, deu tudo certo. 

Estou dizendo isso porque se você tiver alguma dúvida a respeito do código, muito provavelmente não saberei responder xD.

Enfim, vamos ao tutorial:

Você vai em "layout", em seguida vai em "adicionar gadgets" no lugar onde você quer que ele seja adicionado, "html/javascript" e cola este código aqui:

<div class='widget-content'>
<style type="text/css">
#slidecblogger {
background:#fff;
padding:5px;
border:0px double #000000;
box-shadow: 0px 0px 0px #818181;
-webkit-box-shadow: 0px 0px 0px #818181;
-moz-box-shadow: 0px 0px 0px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=15, offY=15, positive=true);
}
.slidecblogger a:link {
opacity:0.4;
filter:alpha(opacity=40);
}
.slidecblogger a:hover {
opacity:1;
filter:alpha(opacity=80);
}
</style>
<div id="slidecblogger">
<div class="slidecblogger">
<marquee scrollamount="5" onmouseout="this.start();" onmouseover="this.stop();" direction="right">
<a href="LINK DO POST" target="_blank"><img src="LINK DA IMAGEM" width="100px" height="150px"/></a>
<a href="LINK DO POST" target="_blank"><img src="LINK DA IMAGEM" width="100px" height="150px"/></a>
<a href="LINK DO POST" target="_blank"><img src="LINK DA IMAGEM" width="100px" height="150px"/></a>
<a href="LINK DO POST" target="_blank"><img src="LINK DA IMAGEM" width="100px" height="150px"/></a>
<a href="LINK DO POST" target="_blank"><img src="LINK DA IMAGEM" width="100px" height="150px"/></a>
<a href="LINK DO POST" target="_blank"><img src="LINK DA IMAGEM" width="100px" height="150px"/></a>
</marquee>
</div></div></div>

Onde está de rosa, você coloca o que se pede, e onde está de vermelho, você edita, respectivamente, a largura (width) e a altura (height) da imagem em questão.

Salve as alterações e seja feliz!