Modificando o blog 3 - Show de slides -

Muitas vezes quando baixamos um template gratuito nos deparamos com um pequeno problema, o show de slides. Apesar de bonito o show de slides nunca apresenta o que nós realmente queremos que apresente, mas o que você talvez não sabe é que pode modificar aquele show de slides que já vem no template e ainda redirecionar para a página que quiser, o que é ótimo para divulgar suas novas ou velhas postagens, então aproveite o tutorial!

Materiais:

Notepad++: Como eu sempre digo, pode usar o notepad++ só se quiser, não é necessário caso você já tenha entendido o que fazer e não tem medo de "errar" no código HTML.
PhotoshopCS2 ou outro programa que tenha suporte a mudança de resolução de uma imagem: Nós precisaremos de um programa assim, pois as imagens que usaremos para colocar nesse pequeno, mas não menos importante show de slides, as vezes é muito grande para o quadradinho do show de slides, e ai fica horrível, por isso vamo utilizar o photoshop CS2.

Mão na massa:

Entre no Painel do blogger, Design>>Editar HTML e aperte CTRL+F e escreva o seguinte: <div id='myGallery'>, é esse o código na maioria, caso não encontre esse em seu html escreva o que estiver escrito na sua apresentação de slides padrão ou seja:

Escreva o que estiver escrito no título, quando você mudar faça a mesma coisa, escreva o título que você escreveu.




Se você achou o código, ótimo, pois agora vamos modificar:

Você deverá encontrar algo semelhante a isso:


<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>

<div class='imageElement'>
<h3>Computador lento ou foi você que ficou mais rápido?</h3>
<p>Uma vez um homem me perguntou, o seu computador esta lento ou foi você que ficou mais rápidos? A minha resposta foi mista, mas a verade é que meu PC estava realmente lento, veja como eu resolvi esse problema...</p>
<a class='open' href='http://superpointlahsat.blogspot.com/2011/01/computador-lento-ou-sera-que-foi-voce.html' title='computador lento'/>
<img alt='computador lento, como melhorar' class='full' src='http://i51.tinypic.com/jaf3g8.jpg'/>
</div>

Vão haver vários de imageElement no seu editar html, pelo fato de que a cada <div class='imageElement'> até o </div> é uma imagem do show de slides, então você deve modificar todos, é um pouco trabalhoso, mas no final tudo fica lindo e o trabalho vale a pena.

Vermelho: Aqui é o titulo do pequeno texto que você escreverá sobre o que o seu leitor vai encontrar se ele clicar no show de slides, então nada melhor que um bom título, escolha o que preferir, o meu está assim aqui no tutorial e também no blog.
Rosa: Aqui é o pequeno texto, ele fica entre as tags <p> e </p> nele você deve expressar o que o leitor vai encontrar de forma resumida, como se fosse no twitter.
Verde: Aqui você escreverá o URL, ou seja, para que página o leitor vai se ele clicar, então escolha o URL que preferir e pelo amor de Deus, coloque um URL referente ao título e ao texto que você escreveu no vermelho e no rosa ok?
Laranja: Aqui é o URL da sua imagem.


Encontrar a imagem padrão e substituir...

Entendido, agora é só modificar tudo isso, mas a parte cansativa é a que nós temos que redimensionar as imagens para que elas possam caber dentro do retângulo do show de slides, é nessa parte que vamos utilizar o photoshop.

Então saiba que é bem fácil, porém explicar isso escrito pode ser um pouco cansativo tanto para quem escreve tanto para quem lê, então não se desespere leia com calma e verá que é super fácil.

Entre no Photoshop, não crie um novo documento, só abra o Photoshop sem nenhuma imagem ainda.
Vá no seu código e procure o show de slides, no mesmo código que procuramos anteriormente, na maioria dos show de slides, se não foi modificado estará escrito "This is featured post 1 title", caso você já tenha modificado estará escrito o que você escreveu como título.
Se você encontrou dê uma olhadinha no código abaixo:

<div class='fullbox_excerpt'>

<div class='fullbox_content'>

<div class='smooth_gallery'>

<div id='myGallery'>

<div class='imageElement'>

<h3>Computador lento ou foi você que ficou mais rápido?</h3>

<p>Uma vez um homem me perguntou, o seu computador esta lento ou foi você que ficou mais rápidos? A minha resposta foi mista, mas a verade é que meu PC estava realmente lento, veja como eu resolvi esse problema...</p>

<a class='open' href='http://superpointlahsat.blogspot.com/2011/01/computador-lento-ou-sera-que-foi-voce.html' title='computador lento'/>

<img alt='computador lento, como melhorar' class='full' src='http://i51.tinypic.com/jaf3g8.jpg'/>

</div>

Lembra da URL da image? Agora ela continua com a cor laranja, essa URL é a url da sua imagem, qualquer imagem da internet que você copie a URL aparecerá no seu show de slides. Então a sua imagem deverá estar na internet, para isso aprenda a hospedar uma imagem na internet. Mas aprenda isso depois, primeiro você deve redimensionar a sua imagem. Copie a url padrão que estara escrito no seu código como o que eu destaquei em laranja.
Cole o URL da sua imagem padrão no seu navegador, veja que aparecerá a imagem em tamanho real, salve a imagem no seu computador.

1 - Depois de salvo, abra essa imagem no Photoshop.

2 - Clique em cima da barra da imagem e clique em "tamanho da imagem"
      Se preferir, anote em uma folha o tamanho da altura e da largura dessa imagem.

3 - Crie um novo documento com o mesmo tamanho da que você anotou na folha.

4 - Pronto, agora coloque a imagem que preferir dentro desse tamanho especifico, se quiser fazer algo mais profissional, é interessante que você faça uma montagem, mas é de blogueiro para blogueiro!

5 - Hospede a imagem na internet, copie o URL e cole na parte laranja do seu código, como a mostrada acima.

É isso ai pessoal, espero ter ajudado vocês! Até a próxima!

Posted in: Modificando o blog,Seu blog um Sucesso,Tutorial