Formulario de contacto en Blogger en página independiente

Para añadir un formulario de contacto a una página creada en Blogger que no sea la principal, hay que seguir los siguientes pasos.

Ir a Diseño, y en cualquier lugar, seleccionar Añadir un gadget

Seleccionar el gadget Formulario de contacto. Si no se encuentra, pulsar en la segunda opción, Más gadgets.

Una vez añadido, ir a Plantilla - Editar HTML.

Buscar el texto ContactForm. Pulsar sobre la flecha negra de la izquierda para desplegarlo, y se observará un código como el siguiente:

<b:widget id='ContactForm1' locked='false' title='Contacta' type='ContactForm'>
    <b:includable id='main'>
  <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/>
        BLA, BLA, BLA
        <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:includable>
</b:widget>

Del código anterior, se debe eliminar todo excepto las dos primeras y las dos últimas líneas.

Ahora, ir a la página donde se desea añadir el formulario de contacto, y en la edición HTML incluir esto:

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Nombre<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>Correo electrónico *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Mensaje *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

Eso es todo.

Leer más

Mostrar código fuente en Blogger

Para formatear el código fuente de una entrada se puede utilizar SyntaxHighlighter. El resultado es muy bueno, pero el rendimiento es bastante pobre. Otra forma para conseguir código con formato para tu blog, es usar google-code-prettify. Se instala muy fácilmente siguiendo esto pasos:

• Entrar en el blog 
• Ir a Diseño->Edición HTML
• Buscar el cierre del head, </head> y justo arriba pegar el siguiente código:

<script src="
https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
</script>

• También puede descargarse el módulo completo desde aquí y usar esto:
  

  <link href="prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="prettify.js"></script>

• Guardar los cambios

Así, cuando se escriba una entrada nueva, en la edición HTML, debe encerrarse el código con estos tags:

<pre class="prettyprint">

  código fuente aquí
</pre>

Más información sobre el google-code-prettify puede encontrarse pulsando aquí.

Leer más