5.1.15

Slider para resenhas

5.1.15

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!

Comente com o Facebook:

7 comentários:

  1. Ooooi, posso dizer que adorei a dica? Eu adorei a dica haha! Eu também não sei mexer em nada de html ou layout (nada mesmo, desisti disso faz éons) e ver esse tipo de dica e tutoriais sempre ajudam quando eu preciso daquele help.
    Enfim, amei a nova seção do blog!
    Beijooooos
    http://thais-monte.blogspot.com.br/
    http://acrrosstheuniverse.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá, minha querida!
      Nossa, que bom que você gostou. Já estava esperando uma chuva de coments me jogando na cara o quanto eu era "charlatona" hahaha. Enfim, estou rezando aqui para que o código tenha dado certo. Porque cada blog é um...
      Feliz com sua leitura e com o elogio =D
      Bjoo!

      Excluir
  2. Acredite, vc ainda sabe muito! Eu nem sei oq é HTML hahaha! E parabéns pela iniciativa =)

    Beijo
    www.belezurasetravessuras.wordpress.com

    ResponderExcluir
    Respostas
    1. Hahahah, olá, minha querida =D
      Eu sei como é não saber nada de html, numas épocas aí até estive muito feliz em tentar saber, mas a falta de talento falou mais alto. Quem sabe um dia eu não volto a tentar fazer lays e talz. Vamo que vamo...
      Muito obrigadinha pela sua visita =D
      Um beijo!

      Excluir
  3. Gosto bastante do Alex. Assisti tem pouco tempo e deve ter sido um filme cheio de impacto para a época. Filmão!! Vc gostou do Amadeus? Assisti tem algum tempo quando ainda estudava história da música e achei que deixaram o Mozart meio "retardado", principalmente aquela risada! Haha

    Beijo
    www.belezurasetravessuras.wordpress.com

    ResponderExcluir
    Respostas
    1. Olá, minha queridaaa <3

      Imagino que deve ter sido bem impactante o Laranja Mcânica, sim. Imagina que se trata de um filme de 1971, quando ainda a violencia em determinadas partes do mundo não era essa coisa que vemos hoje. Não que não existisse violência, imagina que no Brasil estávamos em ditadura. Mas não havia essa coisa cotidiana com a qual convivemos hoje...

      Amadeus é um dos meus filmes preferidos EVER. Tenho que concordar contigo, da risadina estranha haha, mas, assim, o filme é contado pelo Salieri, né, então a perspectiva dele é de algum modo parcial e a ideia me parece que é vermos justamente esse contraponto, do cara que dedicou a vida inteira dando o máximo de si (Salieri) com o outro que era meio doidinho e não parecia ligar tanto assim pra coisa (Mozart). Acho que se vc achou o Mozart retardado, vc também se identificou um poco com o Salieri hahah.
      Bjo, minha querida =3

      Excluir
  4. Eba! \õ Obrigada por ter compartilhado a gambiarra! Estou ainda escrevendo as resenhas (coisa que eu venho enrolando desde o ano passado) mas vou colocar com certeza ainda este semestre! Assim que estiver tudo certinho te mostro <3 Um beijo : *

    ResponderExcluir

Nenhuma imagem presente neste blog me pertence. Todas foram encontradas na internet por meio de pesquisa no google.com e não viso qualquer fim comercial com seus respectivos usos. Se usei uma imagem sua e não lhe dei os devidos créditos, por favor me avise que o farei imediatamente, ou a retirarei do blog se você não quiser que eu a use. Visão Periférica - 2016

Design e Desenvolvimento por Moonly Design / ©