Tuto de Tudo

Oi!

Introdução

Bem, muitas vezes você já deve ter visto em alguns sites, blogs etc um efeito que a cada atualização da página atual alguma imagem alterava-se. Isso é um script, que porém, muito fácil! E como sempre, abordarei ele aqui!

Informações
Programa utilizado: Nenhum
Subcategoria: Imagens, Melhorias
Nível de dificuldade: Fácil
Resultado final: Aqui

Tutorial

1. Comece criando as imagens que serão trocadas automaticamente. Lembrando que, não tem limite de quantas imagens você pode usar.

2. Hospede-as no seu hospedeiro de imagens ou na sua própria hospedagem, se caso você tenha. E guarde todas as URL's que forem dadas.

3. Agora copie o código logo abaixo:

<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="#"><img src="IMAGEM1"/></a>'
quotes[1]='<a href="#"><img src="IMAGEM2"/></a>'
quotes[2]='<a href="#"><img src="IMAGEM3"/></a>'
quotes[3]='<a href="#"><img src="IMAGEM4"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>

Se caso você queira colocar mais imagens basta adicionar abaixo de cada "quotes" mais uma linha como essa:

quotes[?]='<a href="#"><img src="IMAGEM?"/></a>'

Entre os colchetes ([]) de "quotes" você colocará o número sucessor dá última linha do código, por exemplo:

Suponhamos que a última linha do nosso código seja um "quotes[3]". Ao adicionarmos mais uma linha, iremos colocar obviamente "quotes[4]" e assim respectivamente.

4. E vá à Layout > Elementos de página > Adicionar um Gadget > HTML/JavaScript e cole o código com os endereços (opcional) que a imagem irá "levar" e suas respectivas URL's. E coloque o Gadget aonde você desejar, sem esquecer de respeitar a largura das imagens, relacionando-as com a largura de determinada DIV que a Gadget será adicionada. Finalize clicando em Salvar!

E veja aqui o nosso código em funcionamento.


Vlw!


Original de: Tuto de Tudo
Se caso você viu este post em outro blog, site, etc sem seus devidos créditos. Denuncie-o clicando aqui.

Eu denovo!

Introdução

Bem, mais um tutorial de HTML, porém, esse é um mistura de HTML e JavaScript. Então podemos defini-lo como: fácil (HTML), mas dinamismo (JavaScript).
Em detalhes, o tutorial de hoje irá ensinar a você como criar uma janela pop-up que só pode ser ativada através de um link, ou uma imagem incorporada em um link.

Informações

Programa utilizado: Nenhum
Subcategoria: Links/Botões, Janelas
Nível de dificuldade: Fácil (mas deseja atenção)

Tutorial

Depois de você fazer a sua bela imagem, ou simplesmente você é um preguiçoso e só quer colocar o link num simples href. Agora é a vez de você incorporar o seu link que será aberto numa janela pop-up (mesmo você sabendo que ele é odiada pelo Mundo todo).

No modo link...

1. Mas agora iremos à nossa prática, então: Comece copiando o código abaixo.

<a href="javascript:void()" title="Clique aqui!" onclick="window.open('url', 'Página', 'STATUS=YES, TOOLBAR=NO, LOCATION=NO, MENUBAR=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=NO, TOP=40, LEFT=100, WIDTH=650, HEIGHT=530');">Clique Aqui</a>

No modo de incorporação em imagem...

1. Copie o código abaixo:

<a href="javascript:void()" title="Clique aqui!" onclick="window.open('url', 'Página', 'STATUS=YES, TOOLBAR=NO, LOCATION=NO, MENUBAR=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=NO, TOP=40, LEFT=100, WIDTH=650, HEIGHT=530');"><img src="url da imagem" alt="Clique Aqui!" /></a>

Uma breve demonstração desse resultado é no nosso link de "Seja um parceiro >>" que fica logo abaixo dos Parceiros do Tuto de Tudo (logo a sua direita)!


Fui!


Original de: Tuto de Tudo
Se caso você viu este post em outro blog, site, etc sem seus devidos créditos. Denuncie-o clicando aqui.

Olá!

Introdução

Mostrarei nesse tutorial como criar uma mensagem de boas vindas ao entrar no seu blog, mas que também pode ser qualquer outra mensagem do tipo: de mudança de domínio, de reformas, de comemoração e assim vai...

Para muita gente o Javascript é um "bicho de sete cabeças", hehe, para mim também, não sei muito sobre JS, mas domino um pouco. Então para os que não sabem nem como criar um alert no seu blog, eu ensinarei aqui com muito prazer.

Informações

Subcategoria: Mensagens
Nível de dificuldade: Fácil
Resultado final: Aqui

Tutorial

1. Este tutorial será rápido e prático. Então comece logando-se na sua conta do Blogger ou qualquer outro hospedeiro de sua preferência, vá no HTML do seu blog, se sua plataforma for o Blogger, então vá à Layout > Editar HTML.

2. Dentro da tag HEAD, coloque o código abaixo:

<script type="text/javascript">
alert('Aqui a sua mensagem')
</script>

3. Visualize e observe se tudo está correto e então salve.

Veja aqui o exemplo.


Original de: Tuto de Tudo
Se caso você viu este post em outro blog, site, etc sem seus devidos créditos. Denuncie-o clicando aqui.