Gadget de contacto de blogger en una página

formulario de contacto Como muchos ya sabréis blogger tiene disponible un gadget de 'Formulario de contacto', este formulario sirve para que nuestros lectores puedan ponerse en contacto con nosotros.


 Este gadget esta muy bien, pero en algunas ocasiones no queremos que nuestro sitio web quede muy cargado de gadget y objetos, así que lo mejor para estas ocasiones y ademas parecer un sitio web más profesional, pondremos el formulario de contacto en una página aparte en nuestro blog, para que se quede en esa página estática tan solo debemos de seguir los siguientes pasos que voy a poner a continuación.

Paso 1:
 Creamos una nueva página (en el panel de nuestro blog, Páginas> Página Nueva> Página en blanco) y copiamos su URL

Paso 2:
 Copiamos el texto inferior, y lo que esta de color rojo y verde lo podeis editar, OBLIGATORIO editar donde pone 'URL_DE_LA_PAGINA' ahi pondremos la url de la página que hemos creado en el paso 1, y donde pone 350px (hay dos si se modifica hay que poner el mismo valor en los dos) es el ancho del formulario y donde pone 16px es el tamaño de la letra.




<b:widget id='ContactForm1' locked='false' title='' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;URL_DE_LA_PAGINA&quot;'>
<style type="text/css">
.contact-form-widget {
max-width:350px; font-size:16px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width:350px;
}
.post-footer{
display:none;
}
.home-link{
display:none;
}
.feed-links {
display:none;
}
</style>
<!-- b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<data:title/>
</h2>
</b:if -->

<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/>
<span style='font-weight: bolder;'>
*
</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/>
<span style='font-weight: bolder;'>
*
</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>



Paso 3:
 Desde el panel de nuestro blog vamos a Plantilla> Editar HTML, una vez ahi estaremos frente al codigo de nuestro sitio web, pues ahora en el menú despegable 'Ir al Widget' vamos a 'Blog1'.
 Nos aseguramos que ya estamos en el Blog 1 y ahora pulsamos Ctrol+F para buscar la parte del codigo que pone  </b:section> (hay varios pero una vez en Blog 1 ponemos el código justo en el primer </b:section> que hemos encontrado) y justo antes pegamos el código del Paso 2 ya con las modificaciones echas.

Codigo para contacto
Click para ampliar


Paso 4:
 Comprabamos con vista previa que todo esta bien, y entonces lo guardamos y nos quedara asi:
http://www.mejorblogger.com/p/contacto.html

¡Cualquier duda comentarla y os ayudaremos!

0 Response to "Gadget de contacto de blogger en una página"

Publicar un comentario