Documentación SQUARE

GUÍA DE INSTALACIÓN Y CONFIGURACIÓN

SQUARE - Responsive Blogger Template

Sigue esta guía paso a paso para instalar, configurar y aprovechar los recursos HTML predeterminados en tu blog.

1. Instalación Inicial y Configuración Móvil

Antes de aplicar la plantilla, realiza una copia de seguridad de tu diseño actual.

  1. Inicia sesión en tu panel de Blogger y ve a Tema > Editar HTML.
  2. Haz clic en la flecha junto a "Personalizar" y selecciona Respaldar para descargar una copia de seguridad de tu plantilla anterior.
  3. Ubica el archivo de la plantilla SQUARE - Responsive Blogger Template que acabas de descargar y aplícalo (o pégalo reemplazando el código en Editar HTML).
  4. Configuración para dispositivos móviles: Ve a Tema > Configuración para dispositivos móviles y selecciona la opción Para computadoras (Escritorio). De esta manera, el diseño responsivo se visualizará completo en smartphones y tablets.
Configuración para dispositivos móviles

Video Tutorial de Configuración

2. Aviso de Últimas Publicaciones (Breaking News)

Ingresa a Blogger > Tema > Editar HTML, busca el siguiente script y reemplaza la URL señalada por la de tu propio blog. Puedes ajustar la cantidad de entradas a mostrar cambiando la variable t=10.

Aviso ultimas publicaciones en blogger 
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://comidasyrecetasdelperu.blogspot.com/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

3. Configuración del Menú Principal y Submenús

Dirígete a Blogger > Diseño y abre el gadget Lista de vínculos Menú. Reemplaza cada símbolo # por el enlace que desees mostrar.

Editar Menú Principal

Estructura de Submenús:

  • Submenú Nivel 1: Agrega un guion bajo antes del nombre (Ejemplo: _Submenú 1).
  • Submenú Nivel 2: Agrega dos guiones bajos antes del nombre (Ejemplo: __Submenú 2).
📌 INFORMACIÓN IMPORTANTE: Los enlaces de Submenú 2 deben estar ubicados inmediatamente por debajo de sus respectivos enlaces de Submenú 1.

Enlace URL simple por Etiquetas:

Para mostrar publicaciones filtradas por categoría y controlar la cantidad mostrada, utiliza la siguiente sintaxis reemplazando TU-ETIQUETA y el número de resultados:

/search/label/TU-ETIQUETA?max-results=15

4. Recursos HTML para Entradas y Páginas

Utiliza estos componentes en la pestaña Vista HTML del editor de publicaciones para maquetar tu contenido.

4.1 Botones Predeterminados

Botones predeterminados

Reemplaza la palabra ENLACE por la URL correspondiente:

<a class="button btn" href="ENLACE" target="_blank">Botón predeterminado</a>
<a class="button btn preview" href="ENLACE" target="_blank">Avance</a>
<a class="button btn download" href="ENLACE" target="_blank">Descargar</a>
<a class="button btn link" href="ENLACE" target="_blank">Visita un enlace</a>
<a class="button btn cart" href="ENLACE" target="_blank">Comprar ahora</a>
<a class="button btn share" href="ENLACE" target="_blank">Compartir</a>
<a class="button btn contact" href="ENLACE" target="_blank">Contáctenos</a>
<a class="button btn info" href="ENLACE" target="_blank">Más información</a>

4.2 Botones de Colores

Botones de colores 
<a class="button btn color" href="ENLACE" style="background: rgb(22, 160, 133);" target="_blank">Botón de color</a>
<a class="button btn preview color" href="ENLACE" style="background: rgb(39, 174, 96);" target="_blank">Avance</a>
<a class="button btn download color" href="ENLACE" style="background: rgb(41, 128, 185);" target="_blank">Descargar</a>
<a class="button btn link color" href="ENLACE" style="background: rgb(142, 68, 173);" target="_blank">Visita un enlace</a>
<a class="button btn cart color" href="ENLACE" style="background: rgb(243, 156, 18);" target="_blank">Comprar ahora</a>
<a class="button btn share color" href="ENLACE" style="background: rgb(231, 76, 60);" target="_blank">Compartir</a>
<a class="button btn contact color" href="ENLACE" style="background: rgb(241, 196, 15);" target="_blank">Contáctenos</a>
<a class="button btn info color" href="ENLACE" style="background: rgb(52, 73, 94);" target="_blank">Más información</a>

4.3 Botones con Subtexto (Descargar / Comprar)

Botón de descarga y Compra

Puedes cambiar los textos 2 MB y $25 por la información que corresponda:

<a class="button btn x2 download" href="ENLACE" target="_blank">Descargar<span class="btn-info">2 MB</span></a>
<a class="button btn x2 cart" href="ENLACE" target="_blank">Comprar ahora<span class="btn-info">$25</span></a>

4.4 Cuadros de Alerta de Colores

Cuadros de alerta de colores 
<div class="alert-message alert-success">Escribe aquí tu mensaje de éxito...</div>
<div class="alert-message alert-info">Escribe aquí tu mensaje informativo...</div>
<div class="alert-message alert-warning">Escribe aquí tu mensaje de advertencia...</div>
<div class="alert-message alert-error">Escribe aquí tu mensaje de error...</div>

4.5 Tabla de Contenido Estructurada

Tabla de contenido 
<table cellpadding="0" cellspacing="0" style="text-align: left;">
  <tbody>
    <tr>
      <th>Table 1</th>
      <th>Table 2</th>
      <th>Table 3</th>
    </tr>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
  </tbody>
</table>

4.6 Formulario de Contacto Dinámico

Formulario de Contacto

Agrega este código en la Vista HTML de una página estática para activar el formulario nativo de Blogger:

Hola, puedes enviar tu consulta, duda, sugerencia o pedidos a través del siguiente formulario.

<form id="Monetizando-Blogger" name="contact-form">
  <input id="ContactForm1_contact-form-name" name="name" placeholder="Nombre *" size="30" type="text" value="" />
  <input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
  <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mensaje *" rows="5"></textarea> 
  <input id="ContactForm1_contact-form-submit" type="button" value="Enviar Mensaje" /> 
  <br />
  <div style="max-width: 100%; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message"></div>
    <div id="ContactForm1_contact-form-success-message"></div>
  </div>
</form>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#eb0f0f;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#F57C00;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#F70D0F;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4282824008607252432';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4282824008607252432','https://comidasyrecetasdelperu.blogspot.com','4282824008607252432');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Enviando...', 'contactFormMessageSentMsg': 'Tu mensaje ha sido enviado.', 'contactFormMessageNotSentMsg': 'No se pudo enviar el mensaje. Por favor, inténtelo de nuevo más tarde.', 'contactFormInvalidEmailMsg': 'Se requiere una dirección de correo electrónico válida.', 'contactFormEmptyMessageMsg': 'El campo de mensaje no puede estar vacío.', 'title': 'Contact Form', 'blogId': '4282824008607252432', 'contactFormNameMsg': 'Nombre', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Mensage', 'contactFormSendMsg': 'Enviar', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

4.7 Caja Contenedora para Código HTML

Utiliza este bloque e inserta tu código previamente parseado:

<pre><code>COLOCAR_EL_CODIGO_HTML_PARSEADO</code></pre>

4.8 Videos Responsive (YouTube)

Para insertar videos adaptables, reemplaza IDENTIDAD-VIDEO por el ID de YouTube (o la URL de embed correspondiente):

<div class="videoyoutube">
  <div class="video-responsive">
    <div class="video-youtube loader" data-src="//www.youtube.com/embed/IDENTIDAD-VIDEO"></div>
  </div>
</div>

4.9 Gadget de Redes Sociales

Agrega un gadget HTML/JavaScript en la barra lateral y pega la siguiente lista actualizando TU_USUARIO:

<ul class="social-icons social color">
  <li class="facebook">
    <a class="fa-facebook btn" data-text="true" href="https://www.facebook.com/TU_USUARIO" rel="nofollow noopener" target="_blank" title="Facebook">
      <span class="text">Facebook</span>
    </a>
  </li>
  <li class="twitter">
    <a class="fa-twitter btn" data-text="true" href="https://twitter.com/TU_USUARIO" rel="nofollow noopener" target="_blank" title="Twitter">
      <span class="text">Twitter</span>
    </a>
  </li>
  <li class="youtube">
    <a class="fa-youtube btn" data-text="true" href="https://www.youtube.com/TU_USUARIO" rel="nofollow noopener" target="_blank" title="YouTube">
      <span class="text">YouTube</span>
    </a>
  </li>
  <li class="instagram">
    <a class="fa-instagram btn" data-text="true" href="https://www.instagram.com/TU_USUARIO" rel="nofollow noopener" target="_blank" title="Instagram">
      <span class="text">Instagram</span>
    </a>
  </li>
</ul>

❓ ¿Tienes preguntas o algún inconveniente durante la instalación?
Si detectas algún tipo de error o falla, envíanos un mensaje a través de nuestra sección de Contactos y te responderemos a la brevedad. ¡Mucho éxito en tu proyecto con SQUARE - Responsive Blogger Template!

COMENTARIOS