Formulário para contato com css, jquery e html

Neste artigo, vamos explicar, passo a passo, como criar um formulário para contato com css, jquery e html.

É de extrema importância ter um formulário para contato em seu blog, a fim de facilitar a comunicação entre o usuário e o blogueiro.

Vamos trabalhar em várias etapas para que você possa colocar um belo estilo em seu formulário para contato.

Os passos são os seguintes:

• Primeiro, crie um blog novo e dê a ele o nome de contato junto ao nome do seu blog, exemplo: Contato Blog Gerenciado

• Depois, vamos ocultar todos os elementos da página do blog novo, deixando somente a postagem no centro da página.

• O passo seguinte é inserir os códigos de css e jquery dentro do código fonte do template do novo blog criado para contato, para dar as características e o estilo do formulário, e sem correr o risco de dar conflito de script.

• O próximo passo é criar uma postagem e, dentro dela, optar pelo modo html e inserir o código descrito no tutorial, abaixo, alterando os dados nos seus respectivos locais.

• O último passo é fazer o redirecionamento de link do seu blog atual para o seu blog de contato através do menu ou de um gadget.

Vantagens deste formulário:

elegante!

profissional!

anti-spam!

confirmação de e-mail!

captcha de segurança!

totalmente gratuito!

Seguindo os passos acima, primeiro crie um novo blog e dê o nome de contato junto ao nome de seu blog. Escolha um modelo padrão do Blogger, de preferência com o fundo branco, salve e, logo em seguida, vá em modelo e editar html.

Primeiro, vamos ocultar os elementos da página. Para isso, basta colocar o código da caixa de auto seleção abaixo que preparei para modelo padrão do Blogger logo acima da tag</head> que fica localizada no menu do Blogger, layout, editar html. Chegando a este local, dê um Ctrl+F, e procure pela tag </head>

<b:if cond='data:blog.pageType != "static_page"'> <style type='text/css'>#sidebar-right-1, .column-right-outer, .column-left-outer, .footer-outer, .feed-links, #blog-pager, #sidebar-wrapper, #footer-wrapper { /* Aqui todos os elementos que queremos ocultar */display: none;}.fauxcolumn-right-outer .fauxcolumn-inner, .fauxcolumn-left-outer .fauxcolumn-inner {border-left: 0px;border-right: 0px;}#main, #main-wrapper {width: 960px; /* aqui é o local e o tamanho da sua postagem na página */margin-left: 0px;;}</style> </b:if>
Após ter ocultado os elementos da página, ainda dentro do editor html, serão inseridos os comandos que darão o estilo e as funcionalidades.

Dê um Ctrl+F e procure pela tag]]></b:skin> e acima dela cole o seguinte código:


Agora, precisamos acrescentar o jquery. Dê um Ctrl+F e procure pela tag</head> e acima dela cole o seguinte código:


Feito isso, o estilo e as funcionalidades do formulário estão prontos. Agora, vamos colocar o formulário no modo html. Crie uma postagem em seu blog novo e não dê título. Selecione o modo html e cole o seguinte código:

<div id='wrap'>
<div id='form_wrap'>
<form action='http://www.formulariopro.pog.com.br/formail.php' method='POST'>
<a href='Endereço do meu site' target='_blank' title='formularioPRO'>
</a>
<span style='font-family: Trebuchet; font-size: x-medium;'><br/>
Nome:<br/>
<input name='nome' size='24' type='text'/><br/>
E-Mail:<br/>
<input name='email' size='24' type='text'/><br/>
Assunto:<br/>
<input name='assunto' size='24' type='text'/><br/>
Mensagem:</span><br/>
<textarea cols='19' id='message' name='mensagem' rows='6'/><br/>
<input id='name' name='seunome' type='hidden' value='Meu nome'/>
<input name='nomedosite' type='hidden' value='Nome do meu site'/>
<input id='email' name='emaildest' type='hidden' value='Email que recebe as mensagens'/>
<input name='redirecionar' type='hidden' value='http://www.formulariopro.pog.com.br/obrigado.php'/>
<input name='submit' type='submit' value='Mensagem do botão enviar'/>
</form>
</div>
</div>

Altere onde está indicado em negrito e salve, em seguida clique em visualizar.

Se estiver tudo ok, feche e volte para o menu, selecione meus blogs, vá até o blog que você utiliza por padrão, em seguida vá até layout, selecione o local que você quer que apareça o nome contato em seu blog para que o usuário visualize com facilidade, e, em seguida, selecione a opção link, coloque o nome contato e o endereço do blog que você acabou de criar com o formulário para contato, e está pronto!

Slideshow Carrossel

Neste artigo, vamos explicar como inserir um slideshow carrossel com jquery em seu blog, e editá-lo para inserir as imagens e links que você quer divulgar.

O slideshow carrossel com jquery é uma sequencia de imagens pequenas que flutuarão em forma de círculo em sentido horário ou anti-horário numa certa velocidade determinada pelo jquery.

A maioria dos Plugins deste sistema é paga, e é difícil encontrar na internet sites que disponibilizam esses códigos gratuitamente. Além disso, os tutoriais são complexos e normalmente em páginas estrangeiras.

O slideshow carrossel com jquery é muito usado para divulgar banners de parceiros ou postagens, pois sua interface permite inserir muitas imagens e links de forma dinâmica e profissional. E hoje, vamos liberar o código jquery, explicar como montar e aplicar em seu blog.

Atenção! O slideshow carrossel com jquery foi projetado para funcionar com as medidas e o número de imagens específicos, porém, pode ser editado, e é isso que vamos mostrar!

Tutorial Carrossel

Para começarmos, copie o código da caixa de auto seleção, abaixo, e cole no bloco de notas, para que você possa trabalhar no código conforme explicado aqui no post:



Após copiar o código e colar no bloco de notas, você notará que o código está divido em três partes: CSS, JAVASCRIPT e HTML

O CSS está entre as tags <style> e </style>, o SCRIPT começa com <script type="text/javascript..." e termina com </script>, o HTML começa com <div id="wide-wrapper"> e termina com </div>

Agora que você sabe em quais etapas se encontra o código do slideshow, vamos trabalhar seguindo os padrões descritos.

No CSS, não é necessário que se altere nada, pois já preparamos os estilos para se adaptar em qualquer template.

No javascript, você irá procurar pelo seguinte comando:

height: 350, Tamanho da largura do gadget a ser inserido no blog
itemWidth:120, Largura da caixa onde ficará a imagem
horizontalRadius:270, Largura do círculo

verticalRadius:85, Altura do círculo (Caso queira inverter a posição do círculo, coloque o sinal de menos atrás do número -exemplo: verticalRadius:-85,)

Agora, vamos ao HTML e vamos trabalhar com as imagens e os links.

Você notará que na parte HTML, explicada acima, existe um conjunto de códigos repetidos como este abaixo:

<li><a href = "#"><img alt='Thumb' border='0' src='#'/></a>
<p class="title"> </p>
<p class="description"> </p>
</li>

1º O primeiro # refere-se ao endereço de redirecionamento, ou seja, para onde o leitor será redirecionado ao clicar na imagem. Caso não queira, basta deletar o # (jogo da velha)

2º O&segundo #' refere-se ao endereço onde sua imagem está hospedada, ou seja, link para puxar a imagem.

3º O espaço laranja refere-se ao título da imagem. Caso queira colocar o título e a descrição, aparecerá logo abaixo do slideshow.

4º O espaço vermelho refere-se à descrição da imagem. Se não quiser, basta deixar em branco.

Se você quiser diminuir o número de imagens no slideshow, basta eliminar este trecho no HTML referente a cada imagem:

<li><a href = "#"><img alt='Thumb' border='0' src='#'/></a>
<p class="title"> </p>
<p class="description"> </p>

</li>

O mesmo funciona se você quiser aumentar o número de imagens. Basta adicionar o conjunto de códigos, acima, dentro do HTML antes da tag </ul>

Você deve instalá-lo como um Gadget ou Widget.

Não se preocupe, pois fizemos vários testes em blogs padrões do Blogger, e em blogs personalizados com vários scripts em funcionamento, e não entrou em conflito com nada. Funciona perfeitamente!

É possível instalá-lo na coluna lateral, rodapé, abaixo das postagens, acima das postagens, dentro das postagens, dentro das páginas estáticas, etc...

Redimensione as imagens antes de colocá-las no carrossel, pois o slideshow carrossel com jquery para blog não ajusta automaticamente as imagens, e, sendo assim, imagens muito grandes irão afetar a visualização das outras imagens.