Transforma tu blog en un sitio web profesional con SQUARE, una plantilla premium para Blogger diseñada para destacar. Su estructura limpia y moderna es completamente responsiva y adaptable a cualquier pantalla (móviles, tablets y escritorio).Desarrollada con código limpio e indexación optimizada, ofrece una velocidad de carga ultra rápida para mejorar tu posicionamiento en Google y maximizar tus ingresos si usas Google AdSense. Es perfecta para blogs de tecnología, moda, estilo de vida, noticias o nichos de afiliados. Fácil de instalar, totalmente personalizable sin tocar código y lista para llevar tu contenido al siguiente nivel.
SQUARE - Responsive Blogger Template, diseño de plantilla Blogger modificado y editado desde su diseño base versión premium, limpio Sin scripts cifrados, versión adaptable para su uso en blog de revista, comida, ventas, etc. Totalmente adaptable. Venta a través de Paypal (Si desea obtenerlo en Peru puede comunicarse directamente se acepta todo tipo de pagos).
- Diseño Responsivo. Se adapta perfectamente a cualquier tamaño de pantalla, desde móvil hasta ordenadores de escritorio.
- Optimizado para Velocidad. Código limpio y optimizado para garantizar tiempos de carga rápidos y una experiencia fluida.
- Personalizable. Fácil de personalizar con opciones de color, fuentes y diseño para adaptarse a tu marca personal.
- SEO Optimizado. Estructura y meta etiquetas optimizadas para mejorar tu posicionamiento en motores de búsqueda.
| Características | Disponibilidad |
|---|---|
| Tipo de Plantilla | Blogger |
| Resultados Enriquecidos Indexación | Si Verificar |
| Velocidad de Carga | Si Verificar |
| Tipo de Plantilla | Blog Caja |
| Diseño Web | Limpio |
| Columnas | 2 |
| Codificación | HTML5 | CSS |
| Compatibilidad SEO | Amigable |
| Estilo de Comentarios | Diseño Blogger |
| Tipo de Menú | Fijo |
| Botón Redes Sociales | Gadget e incrustados |
| Página de Error | 404 personalizada |
| Espacio de Publicidad | Adaptable |
| documentación | Si |
| Pie de pagina Copyright | Limpio |
2. Haga una copia de seguridad de su plantilla anterior si decide volver a utilizarla. Para hacer esto, haga clic en el enlace "descargar copia de seguridad" y guarde la copia de seguridad.
3. Luego, ubicar la plantilla SQUARE - Responsive Blogger Template que acaba de descargar y presione "Restablecer".
4. Desactive la versión móvil de esta plantilla, haga clic en Tema / Configuración para dispositivos móviles / Seleccionar para computadoras.
1º Aviso ultimas publicaciones en blogger
Entrar a Blogger / Tema / Editar HTML buscar el siguiente código de enlace url https://comidasyrecetasdelperu.blogspot.com/ reemplazar por el enlace url de su propio blog. También puede elegir la cantidad de publicaciones que se desea mostrar cambiando el numero en la opción t=10
<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> 2º Editar Menú Principal
Entrar a Blogger / Diseño abrir gadget lista de vínculos Menú renombrar el titulo, submenú 1 y submenú 2. Reemplazar cada símbolo # por el enlaces url que deseamos mostrar en el menú principal de nuestro blog.
2º1 Menú y submenú predeterminados
Ejemplo de enlace predeterminado:
Submenú de nivel 1 Ejemplo: _Submenú 1 “Antes del título, agregue 1 guion bajo ”
Submenú de nivel 2 Ejemplo: __Submenú 2 “Antes del título, agregue 2 guiones bajos ”
INFORMACIÓN: Los enlaces de Submenú 2 deben estar por debajo de los enlaces de Submenú 1
2º2 Utilizar enlace url simple de etiquetas
Este código de enlace url nos permite mostrar las entradas separadas por etiqueta de forma ordenada, debemos reemplazar el símbolo # por el siguiente enlace url de etiquetas.
Cambiar la palabra ETIQUETAS por las etiquetas que utilizamos en nuestro blog. También podemos cambiar la cantidad de entradas que deseamos mostrar cambiando el numero en la opción results=15.
/search/label/TU-ETIQUETA?max-results=153º Configuración para dispositivos móviles
Para la configuración en dispositivos móvil entrar a Tema / Configuración para dispositivos móviles elegir la opción para Computadoras, de esta manera el diseño de la plantilla se visualizara en los dispositivos móvilescon todas sus opciones.
1º Botones predeterminados
Implementar cualquiera de estos códigos de botones en la sección Vista HTML de la edición de entradas en blogger, reemplazar la palabra ENLACE por en enlace url que deseamos enviar. También podemos renombrar los títulos de cada botón.
<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>2º Botones de colores
Implementar cualquiera de estos códigos de botones de colores en la sección Vista HTML de la edición de entradas en blogger, reemplazar la palabra ENLACE por en enlace url que deseamos enviar. También podemos renombrar los títulos de cada botón.
<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>3º Botón de descarga y Compra
Implementar estos códigos de botones descarga y compra en la sección Vista HTML de la edición de entradas en blogger, reemplazar la palabra ENLACE por en enlace url que deseamos enviar. También podemos cambiar la letras 2 MB y $25 por lo que deseamos renombrar en el boton.
<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>3º Cuadros de alerta de colores
Para implementar estos códigos de cuadro de alerta debemos colocar el código en la sección Vista HTML de la edición de entradas en blogger, sirve para resaltar algún párrafo en concreto. Reemplazar las letras por nuestro texto.
SQUARE es una plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas.
<div class="alert-message alert-success">plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas</div><div class="alert-message alert-info">plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas</div><div class="alert-message alert-warning">Casper es una plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas</div><div class="alert-message alert-error">plantilla Blogger moderna y adaptable para cualquier sitio web, te permite crear un blog hermoso, profesional y fácil de implementar con todas sus funciones básicas</div>4º Tabla de contenido
Agregar tabla de contenido en las publicaciones de blogger, colocar el siguiente código htm dentro de Vista HTML de la edición de entradas en blogger, Reemplazar por nuestro texto a mostrar.
<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>5º Formulario de Contacto
Hola Puede enviar su consulta, duda, sugerencia, pedidos y que le gustaría ver en esta pagina.
<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>6º Caja para código Html
<pre><code>COLOCAR EL CODIGO HTML</code></pre> 7º Videos de Youtube Responsive
Para colocar videos de youtube y otra plataformas de videos de manera responsiva utilizar el siguiente código en la sección Vista HTML de la edición entradas del blog. Cambiar IDENTIDAD-VIDEO por la identidad de nuestro video de youtube (en el caso de utilizar otra plataformas de videos reemplazar el código completo //www.youtube.com/embed/IDENTIDAD-VIDEO por el enlace url de tu video).
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/IDENTIDAD-VIDEO"></div>
</div>
</div>8º Gadget Redes sociales
Colocar un gadget de redes sociales en la barra lateral de la plantilla ingresando a Blogger / Diseño agregar un nuevo gadget, colocar tu código TU-USUARIO por lo contrario elimina toda la url y coloca el enlace de tu red social url.
<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>| Detalles | Descripción |
|---|---|
| Nombre de la plantilla | SQUARE Blogger template |
| URL | Monetizando Blogger |
| Lanzamiento | 22 de Setiembre de 2026 |
| Actualización | Todavia |
| Licencia | Premium | Reconocimiento 4.0 Creative Commons |
| Editor | Tutoriales Gratis de Internet |
PD. Si detecta algún tipo de falla o error en su compra no dude en enviar un mensaje en la sección contactos de esta pagina se le responderá en brevedad suerte en su nuevo proyecto SQUARE - Responsive Blogger Template.
