Aprendendo: ...como "Mudar o estilo" de "Formulário de Contato para blogger"
Autor: Edilene brandao da silva | Publicado: 2014-02-01T04:16:00-08:00


Aprendendo:&nbsp;

...como "Mudar o estilo" de "Formulário de Contato para blogger"





..."&nbsp;agora temos um novo gadget que vem com o Blogger."&nbsp;

&nbsp;Este&nbsp;é um&nbsp;&nbsp;"Gadget"&nbsp;"formulário&nbsp;Contato"&nbsp;para Blogger.

&nbsp;
◄Este é um&nbsp;formulário de contato&nbsp;que permiteenviar uma mensagem para o administrador do blog.&nbsp;
"Mudando&nbsp;o estilo,&nbsp;de seu formulário de contato&nbsp;no blogger"







...para ver&nbsp; , demonstração,


do&nbsp; novo estilo gerado


para o


modelo mudado, de formulário de contato:&nbsp;

►clica aqui◄
Tutorial:
Primeiro passo:
&nbsp;"Instale em uma&nbsp;página estática, o código do formulário de contato do blogger"
"É muito básico,&nbsp;porque, pelo menos por enquanto,&nbsp;não permite incorporar arquivosou&nbsp;enviar qualquer coisa diferente de texto simples."
&nbsp;&nbsp;
"Isto significa que se você já está pensando em um modelo&nbsp;ou&nbsp;código de enviar&nbsp;ao redor"...&nbsp;


&nbsp;..."seu formato é tão simples&nbsp;...

&nbsp;..."como a forma de instalá-lo."



&nbsp;Tal como acontece com outros dispositivos,



&nbsp;... só precisa ir para o


&nbsp;Design►
Adicionar gadget&nbsp;
e no

&nbsp;pop-out,
&nbsp;&nbsp;&nbsp;&nbsp; selecione :
"Formulário de Contato."&nbsp;
..."ele está na segunda seção do menu à esquerda em&nbsp;
Mais Gadgets"



&nbsp;Aprendendo:

&nbsp;...como "Mudar o estilo"


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Formulário de Contato."

&nbsp;&nbsp;



&nbsp;Como&nbsp;o fundo é transparente, o formulário irá integrar-se bem ao template blogger.
..." esteticamente falando,&nbsp;
mas, no entanto,&nbsp;&nbsp;
é facilmente modificados usando&nbsp;&nbsp;
Style Sheets (CSS)&nbsp;
&nbsp;para os seletores apropriados.&nbsp;&nbsp;


Aqui está um exemplo&nbsp; (que testei) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;▼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



Código de "Exemplo de formulário"&nbsp;com estilo básico:
&nbsp;/* Contenedor general */.contact-form-widget {width: 500px;max-width: 100%;margin: 0 auto;padding: 10px;background: #ddd;color: #000;}/* Cajas para insertar datos y botón de envío */.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {width: 100%;max-width: 100%;margin-bottom: 10px;}.contact-form-button-submit {border-color: #fff;background: #000;color: #fff;}
o código acima
deve ser&nbsp;colado&nbsp;acima de
&nbsp;]]&gt;&lt;/b:skin&gt;

e depois

Salve!&nbsp;


A&nbsp;grande&nbsp;dica

deste tutorial:
...adicionar o gadget,&nbsp;
...cortar o pedaço de código&nbsp;
e,
em seguida,&nbsp;
deve&nbsp;
adicionar o mesmo código&nbsp;
em uma página, no blogger, aonde você posta.
O primeiro adicionar o gadget&nbsp;
e&nbsp;
depois cancelá-lo parcialmente&nbsp;
é porque se Blogger não encontrou o gadget (original) em algum lugar, não carrega o&nbsp;JavaScript&nbsp;que executa.&nbsp;&nbsp;
Como&nbsp;esta dica
quedepois de executar os passos insicdos, neste tutorial,
não &nbsp;&nbsp;carregá-lo,&nbsp;
mais o form. de contato&nbsp;
em seu local natural&nbsp;(que você colocou antes em seu lay-out).
Então o&nbsp;&nbsp;
primeiro passo&nbsp;&nbsp;
é&nbsp;
adicionar o&nbsp;
&nbsp;gadget&nbsp;(de design)&nbsp;
e&nbsp;
segunda passo&nbsp;
no&nbsp;&nbsp;modelo&nbsp;(HTML)
&nbsp;para remover&nbsp;,
a maior parte do gadget
Tendo que:&nbsp;&nbsp;
... procurar a seqüência :
"ContactForm"&nbsp;&nbsp;
implantar o&nbsp;widget&nbsp;
clicando na&nbsp;seta preta&nbsp;
à esquerda (mesmo com&nbsp;o includable)&nbsp;
e exclua&nbsp;
os que você&nbsp; ve na cor&nbsp;
cinza.
no código a seguir de exemplo aqui:
&nbsp;

&lt;b:widget id='ContactForm1' locked='false' title='Contacta' type='ContactForm'&gt;
    &lt;b:includable id='main'&gt;
  &lt;b:if cond='data:title != &amp;quot;&amp;quot;'&gt;
    &lt;h2 class='title'&gt;&lt;data:title/&gt;&lt;/h2&gt;
  &lt;/b:if&gt;
  &lt;div class='contact-form-widget'&gt;
    &lt;div class='form'&gt;
      &lt;form name='contact-form'&gt;
        &lt;p/&gt;
        &lt;data:contactFormNameMsg/&gt;
        BLA, BLA, BLA
        &lt;p/&gt;
        &lt;div style='text-align: center; max-width: 222px; width: 100%'&gt;
          &lt;p class='contact-form-error-message' expr:id='data:widget.instanceId + &amp;quot;_contact-form-error-message&amp;quot;'/&gt;
          &lt;p class='contact-form-success-message' expr:id='data:widget.instanceId + &amp;quot;_contact-form-success-message&amp;quot;'/&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;b:include name='quickedit'/&gt;
&lt;/b:includable&gt;
  &lt;/b:widget&gt;

Isto é o que deverá ser excluído:
&lt;b:if cond='data:title != &amp;quot;&amp;quot;'&gt;&nbsp;&nbsp;&nbsp; &lt;h2 class='title'&gt;&lt;data:title/&gt;&lt;/h2&gt;&nbsp; &lt;/b:if&gt;&nbsp; &lt;div class='contact-form-widget'&gt;&nbsp;&nbsp;&nbsp; &lt;div class='form'&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;form name='contact-form'&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;data:contactFormNameMsg/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input class='contact-form-name' expr:id='data:widget.instanceId + &amp;quot;_contact-form-name&amp;quot;' name='name' size='30' type='text' value=''/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;data:contactFormEmailMsg/&gt; &lt;span style='font-weight: bolder;'&gt;*&lt;/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input class='contact-form-email' expr:id='data:widget.instanceId + &amp;quot;_contact-form-email&amp;quot;' name='email' size='30' type='text' value=''/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;data:contactFormMessageMsg/&gt; &lt;span style='font-weight: bolder;'&gt;*&lt;/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &amp;quot;_contact-form-email-message&amp;quot;' name='email-message' rows='5'/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &amp;quot;_contact-form-submit&amp;quot;' expr:value='data:contactFormSendMsg' type='button'/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div style='text-align: center; max-width: 222px; width: 100%'&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p class='contact-form-error-message' expr:id='data:widget.instanceId + &amp;quot;_contact-form-error-message&amp;quot;'/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p class='contact-form-success-message' expr:id='data:widget.instanceId + &amp;quot;_contact-form-success-message&amp;quot;'/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/form&gt;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp; &lt;/div&gt;&nbsp; &lt;b:include name='quickedit'/&gt;&nbsp;
&nbsp;...Agora
...Salva!
"No final ..
... não terá&nbsp;&nbsp;reproduzido&nbsp;&nbsp;"o&nbsp;todo",&nbsp;
porque&nbsp; deixareis&nbsp;
os dois primeiros&nbsp; códigos

&amp;lt;b:widget id='ContactForm1' locked='false' title='Contacta' type='ContactForm'&amp;gt;
    &amp;lt;b:includable id='main'&amp;gt;
e os dois últimos códigos:

&amp;lt;/b:includable&amp;gt;
  &amp;lt;/b:widget&amp;gt;
&nbsp;...e serão&nbsp;serão suficientes.
"O problema é que,&nbsp;
&nbsp;para o código do&nbsp;&nbsp;
gadget&nbsp;nos ajude a todos,&nbsp;
o tem-se incluídos&nbsp;&nbsp;
as variáveis ​​
cujos valores Blogger e controles&nbsp;
podem ser acessados ​​somente&nbsp;
se incluirmos essas variáveis&nbsp;
no modelo (antes/primeiro)
&nbsp;&nbsp;
...&nbsp;assim,
os dados personalizados&nbsp;
para cada blog&nbsp;&nbsp;
são&nbsp;
reduzidos a zero,&nbsp;
..."pelo menos os mais importantes"&nbsp;
Então,
...substitua&nbsp;,
os dados&nbsp;
para os&nbsp;
necessários&nbsp;dados seus,
Abreviado só um pouco:
...em uma nova página&nbsp;em branco ,
...com o título que você quiser,&nbsp;
para fazer o trabalho de forma ...
depois...
...cole&nbsp;
esse código:

&lt;div class="widget ContactForm" id="ContactForm1"&gt;&lt;div class="contact-form-widget"&gt;&lt;div class="form"&gt;&lt;form name="contact-form"&gt;&lt;span style="color: blue;"&gt;&lt;span style="font-size: x-large;"&gt;&lt;b&gt;&lt;span style="font-family: Arial,Helvetica,sans-serif;"&gt;Seu Nome:&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;b&gt;&lt;span style="font-family: Arial,Helvetica,sans-serif;"&gt;&lt;input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /&gt;&lt;/span&gt;&lt;/b&gt;&lt;span style="color: red;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/span&gt;&lt;br /&gt;&lt;span style="color: red;"&gt;&lt;span style="font-size: x-large;"&gt;&lt;b&gt;&lt;span style="font-family: Arial,Helvetica,sans-serif;"&gt;Seu email&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;b&gt;&lt;span style="font-family: Arial,Helvetica,sans-serif;"&gt;(não será divulgado*)&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;&lt;b&gt;&lt;span style="font-family: Arial,Helvetica,sans-serif;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span style="color: #274e13;"&gt;&lt;span style="font-size: x-large;"&gt;&lt;input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;span style="color: #274e13;"&gt;&lt;span style="font-size: x-large;"&gt;&lt;b&gt;&lt;span style="font-family: Arial,Helvetica,sans-serif;"&gt;&amp;nbsp;&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style="color: #274e13;"&gt;&lt;span style="font-size: x-large;"&gt;&lt;b&gt;&lt;span style="font-family: Arial,Helvetica,sans-serif;"&gt;Mensagem *&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"&gt;&lt;/textarea&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br /&gt;&lt;div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"&gt;&lt;/div&gt;&lt;div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"&gt;&lt;/div&gt;&lt;br /&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
Nota:
troque&nbsp;no código acima&nbsp;que está&nbsp;nas cores :
vermelha
azul&nbsp;e
verde
com seus dados preferidos!&nbsp;&nbsp;

&nbsp;"E para verificá-la,&nbsp;veja como ficou,&nbsp;&nbsp;nesta página&nbsp;"aonde eu fiz um&nbsp; teste."&nbsp;&nbsp;&nbsp;

&nbsp;É uma conta que não usa,&nbsp;então não espere&nbsp;resposta."


&nbsp;►clica aqui◄
vepara ver&nbsp; o "modelo mudado":

&nbsp;"Se ocorrerem&nbsp;&nbsp;mudanças no código&nbsp;,&nbsp; este "gadget dica"...pode parar de trabalhar,



&nbsp;...mas pode valer
&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;para sempre "
fonte de consulta:
oloblogger