Mudando as imagens do Slide

Mudando as imagens do Slide

Antes de começar o tutorial sobre como mudar seu slide quero deixar bem claro que as dicas abaixo são exclusivamente para meus clientes que fizeram seus blogs e sites comigo, no entanto, pode também servir para outros blogs ou sites que não foram feitos por mim, nesses casos, o tutorial pode funcionar sim pra você, mas é preciso que você teste ok?

ALERTA: Antes de fazer qualquer alteração no seu código fonte HTML faça um backup para que caso algo dê errado você possa recuperar. Como fazer backup AQUI.

Vamos começar?

No caso dos blogs ou sites que os templetes/layouts foram personalizados por mim, alguns, a mundança poderá ser feita pelo código fonte HTML o que exige muito cuidado OU pelo HTML/JavaScript. Se você não tem um layout personalizado todas as vezes o seu slide vai estar no código fonte HTML.

O que são layouts NÃO personalizados? São aqueles os quais eu baixei da internet ou comprei de sites especializados, nesse caso, eles já veem com seus slides instalados.

No caso dos que eu personalizei, geralmente, MAS NÃO SEMPRE, a mudança se dará pelo HTML/JavaScript.

DUAS FORMAS bem fáceis de você encontrar o local onde está o slide:

A PRIMEIRA é pelo código fonte, veja abaixo onde está o código fonte:

Após abrir o painel você chegará ao código fonte clicando primeiro na setinha conforme mostra a imagem abaixo, abrirá vários menus, então clique em Modelo.


Abrirá essa tela abaixo e então clique em Editar HTML, veja abaixo:


Pronto você estará em seu código fonte. ALERTA: Antes de fazer qualquer alteração no seu código fonte HTML faça um backup para que caso algo dê errado você possa recuperar. Como fazer backup aqui.


A SEGUNDA forma é pelo seu blog ou site mesmo, é assim:

Primeiro você tem que estar logado em seu blog ou site, depois, acesse seu blog ou site. Quando você está logado, aparece na página umas ferramentas como esta que está mostrando na ponta da seta, essas ferramentas são bem clarinhas. Obs.: Para aumentar a imagem clique sobre ela.


Ao clicar sobre essa ferramenta a próxima tela que abrir será onde você trocará as imagens do seu slide.

DICA: Se quando você acessar seu site ou blog e embaixo do slide aparecer a ferramenta então significa que você não precisará entrar em seu código fonte para alterar as imagens do seu slide.

Pronto, primeira parte já foi:

Continuando, antes de alterar a imagem, é preciso ajustar o tamanho delas, se você não fizer isso a imagem não ficará enquadrada.

Para você redimensionar ou cortar suas imagens indico um site muito bom o Online Image Editor, esse link já vai para o site em português e aqui eu ensino a você editar.

Como saber o tamanho da imagem que eu devo colocar? No caso dos meus clientes, se você não sabe o tamanho, pode perguntar pra mim, se você não é, sugiro que vá testando ou então tem como saber pelo código fonte.

Agora vamos as alterações das imagens:

PRIMEIRO PELO CÓDIGO FONTE:

O exemplo que vou mostrar é de um layout baixado da internet de sites especializados em templetes.

Veja como nesse caso é fácil saber o tamanho da imagem do slide:

Clique com o botão direito do mouse sobre a imagem do slide, aparecerá algumas opções para você, clique em propriedades da imagem. Veja abaixo:



Após clicar vai abrir as propriedades da imagem. Veja:


Agora que você já sabe o tamanho das imagens do seu slide vá para o editor que citei acima, edite sua imagem, depois, vá para o código fonte do seu blog, agora vem uma dica importante para você caso você tenha dificuldade em manusear o código fonte: Da mesma forma que você fez pra saber qual o tamanho da imagem você vai fazer do mesmo jeito, só que ao invés de clicar em propriedades da imagem você vai clicar em Copiar endereço da imagem, quando você clicar já é copiado automaticamente. Veja exemplo abaixo:


Lembro a você que essa forma que estou ensinando agora é pra você primeiro encontrar no código fonte o ponto referente ao slide.

Agora de posse do endereço da imagem, vá para o código fonte conforme ensinei acima, veja novamente:


Clique em qualquer lugar da tela onde está o código fonte e aperte em seu teclado control+F ou command+F, você verá um campo branco a direita, veja:


Nesse espaço cole o endereço da imagem que você havia copiado usando control+V ou command+V e dê um enter, automaticamente o sistema procura o endereço que você colou e o seleciona, veja:



O sistema selecionou o endereço, então é esse código que está em amarelo que você deverá substituir pelo endereço da imagem nova que você quer colocar no seu slide.

Vá na imagem que você hospedou, pode ser no seu próprio blog no painel.

Veja aqui como hospedar sua imagem para que ela tenha um endereço.

De posse do endereço da imagem nova é só deletar o código antigo e colar o código novo. Prontinho!!

Assim você faz para trocar as imagens do seu slide.

E AGORA DA OUTRA FORMA:

Após você verificar que a ferramenta está embaixo bem no cantinho do seu slide, conforme abaixo:


Clique sobre a ferramenta e aparecerá uma tela como esta abaixo: é só um exemplo e os códigos são diferentes.


O código está como abaixo. Veja como alterar os endereços:

Cada cor sublinhada abaixo refere-se a uma imagem do slide.

<div id="w2bSlideContainer">

<div id="w2bNivoSlider">

<a href="LINK_DO_SLIDE_1"><img src="http://3.bp.blogspot.com/-pIp2MpH_iVc/VPhuR5umUpI/AAAAAAAAAeg/clWtFbxy-Nk/s1600/7906.jpg" title=" Falando o que Deus Fala estaremos sempre encorajados e protegidos!!!"/></a>

<a href="LINK_DO_SLIDE_2"><img src="http://2.bp.blogspot.com/-n1w57fC-5T0/VPhy0s0JZeI/AAAAAAAAAe8/6HL5It9yJGg/s1600/7909.jpg" title="  A perseverança é o preço da conquista. Simplesmente permaneça focado, isso é o que importa.    "/></a>

<a href="LINK_DO_SLIDE_2"><img src="http://1.bp.blogspot.com/-LMgwzw8pm7s/VPhtti9eZPI/AAAAAAAAAeI/D1xCISXhAb0/s1600/7903.jpg" title=" Quem anda no tempo de Deus nunca esta atrasado.   "/></a>

<a href="LINK_DO_SLIDE_3"><img src="http://2.bp.blogspot.com/-Scu1qjMmq7g/VPhtV_byisI/AAAAAAAAAd4/4ey9Q1K7DHI/s1600/790.png"title=" O poder de Deus só entra em ação, quando eu paro de confiar no meu próprio braço."/></a>

<a href="LINK_DO_SLIDE_1"><img src="http://3.bp.blogspot.com/-oswp1IhgMyg/VPh0GKtFwvI/AAAAAAAAAfI/UOWgOniVxtM/s1600/79010.jpg" title="O sucesso é intencional e se temos essa intenção, a disciplina é um caminho sem atalhos."/></a>

<a href="LINK_DO_SLIDE_4"><img src="http://4.bp.blogspot.com/-IBZnJilL-dE/VPht4xQr2XI/AAAAAAAAAeQ/4OePQs1i4Ak/s1600/7904.jpg" title=" A fé não fala das circunstâncias mas fala para as circunstâncias!!!"/></a>

<a href="LINK_DO_SLIDE_5"><img src="http://4.bp.blogspot.com/-RqVGpobtWXY/VPhuEwE67qI/AAAAAAAAAeY/uhxKSZ5xL_k/s1600/7905.jpg" title=" As suas palavra são sementes e quando você fala gera acontecimentos."/></a>

</div>

</div>


Para trocar uma imagem vou usar como exemplo o último código acima:

Onde está em ............ é onde você deve colocar o link para quando clicar sobre a imagem do slide a pessoa seja direcionada para uma postagem especifíca.

Onde está em ............. é onde você deve trocar o endereço da imagem hospedada

Se no seu código tiver title, então troque o texto

<a href="LINK_DO_SLIDE_5"><img src="http://4.bp.blogspot.com/-RqVGpobtWXY/VPhuEwE67qI/AAAAAAAAAeY/uhxKSZ5xL_k/s1600/7905.jpg" title=" As suas palavra são sementes e quando você fala gera acontecimentos."/></a>

Note que o que deve ser trocado sempre vai estar entre aspas "   ".

Nenhum comentário:

Postar um comentário

© Kelly Ribeiro - 2015 - Todos os direitos reservados.
imagem-logo