Hace unos bastaba con tener una buena plantilla, pero hoy en día es casi indispensable tener una plantilla responsive o adaptable, es decir, que se adapte y visualice bien en los distintos dispositivos electrónicos, ya sea un computador de escritorio o portátil, tableta o celular.
Aunque parezca difícil diseñar una plantilla responsive, lo cierto es que con una pequeña conversión casi cualquier plantilla puede convertirse en responsive, solo debes seguir los siguientes pasos:
1. Lo primero que debemos hacer es desactivar la plantilla móvil que viene por defecto en Blogger, pues esto hará que el blog se redirija a esta plantilla.
Para hacer debemos dirigirnos a Plantilla, Móvil, hacer clic en la rueda dentada que aparece en la parte inferior y marcar la casilla «No, mostrar la plantilla para ordenador en los dispositivos móviles«, luego clic en Guardar.
De ahora en adelante, los códigos hay que buscarlos en Plantilla, Editar HTML.
Debes hacer una copia de tu plantilla, como medida de precaución por si algo sale mal.
2. La meta Viewport.
La meta viewport es la que usan los teléfonos móviles para mostrar una web a escala inicial, en este paso debes cambiar todo lo que esté entre <head> y <b:skin> y reemplazarlo por lo siguiente:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://opengraphprotocol.org/schema/'
expr:dir='data:blog.languageDirection'
lang='es'
class='v2 no-js'>
<head>
<!-- script redirección -->
<script type='text/javascript'>
//<![CDATA[
(function(){
var URL = document.URL,
reg = /.blogspot.(com...|..)//
if( URL.match( reg ) ){
window.location = URL.replace( reg, ".blogspot.com/ncr/" )
}
})()
// Fallback CSS para cuando no hay javascript
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
//]]>
</script>
<!--
Comentarios condicionales IE -> Permite usar CSS condicionalmente
La mejor forma de usarlos sería en el <html>, pero no se puede sin tranformar en entidades
-->
<!--[if IE 8]>
<script type='text/javascript'>document.documentElement.className += ' ie8 lt-ie9'</script>
<![endif]-->
<!--[if IE 7]>
<script type='text/javascript'>document.documentElement.className += ' ie7 lt-ie8 lt-ie9'</script>
<![endif]-->
<!--[if lt IE 7]>
<script type='text/javascript'>document.documentElement.className += ' ie6 lt-ie7 lt-ie8 lt-ie9'</script>
<![endif]--><!--Meta X-UA-Compatible -> Mejor experiencia para IE -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<!-- meta viewport -> dispositivos móviles -->
<meta content='width=device-width,initial-scale=1.0,maximum-scale=1.0' name='viewport'/>
<!-- Para que indexe Bing [código proporcionado por él] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='[CODIGO]' name='msvalidate.01'/>
</b:if>
<!-- Metas para facebook (name=description la incluye all-head-content) -->
<!-- <meta property='og:title'> la incluimos donde el título, por conveniencia -->
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:type' content='blog'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
<b:else />
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Metas home -->
<meta name='description' property='og:description' content='[DESCRIPCION_GENERAL_DEL_BLOG]'/>
<b:else />
<!--
all-head-content incluye la meta description si existe data:blog.metaDescription
En el home siempre la hay, pero en este caso concreto no
-->
<meta name='description' property='og:description' expr:content='data:blog.pageName + ": " + data:blog.title'/>
</b:if>
</b:if>
<!-- Imagen del post -->
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta property='og:image' expr:content='data:blog.postImageThumbnailUrl' />
</b:if>
<!--
Meta keywords -> no usada actualmente, pero nunca se sabe ;)
-->
<meta name='keywords' content='[palabras, clave, separadas, por, coma]'/>
<!-- Indexación -->
<b:if cond='data:blog.pageType == "archive"'>
<!-- No queremos indexar en los archivos -->
<meta content='noindex,nofollow' name='robots'/>
<b:else />
<b:if cond='data:blog.pageType == "error_page"'>
<!-- Ni en las 404 -->
<meta content='noindex,nofollow' name='robots'/>
<b:else />
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- En el home sí -->
<meta content='index,follow' name='robots'/>
<b:else/>
<!-- Pero en el resto de las index no -->
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:else />
<!-- En el resto (páginas y posts) sí -->
<meta content='index,follow' name='robots'/>
</b:if>
</b:if>
</b:if>
<!-- Links rel=next y rel=prev -> Indexación también -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.newerPageUrl'>
<link expr:href='data:blog.newerPageUrl' rel='next'/>
</b:if>
<b:if cond='data:blog.olderPageUrl'>
<link expr:href='data:blog.olderPageUrl' rel='prev'/>
</b:if>
</b:if>
<!--
En vez de usar:
<meta name="language" content="es" />
Añade al elemento <html> el atributo lang="es"
-->
<!-- Título -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<meta property='og:title' expr:content='data:blog.pageName + ": " + data:blog.title'/>
<title><data:blog.pageName/>: <data:blog.title/></title>
<b:else/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<title><data:blog.pageTitle/></title>
</b:if>
<!--
all-head-content. Incluye:
=> link[rel=me]
=> link[rel=publisher]
=> link[rel=canonical]
=> link[rel=image_src] si hay una imagen en la entrada
=> meta[name=description] si existe data:blog.metaDescription
=> meta[http-equiv=content-type]
=> links del feed
=> scripts para compatibilidad con HMTL5
-->
<b:include data='blog' name='all-head-content'/>
<!-- /all-head-content -->
<!--
Aquí iría <b:skin>
-->
En este paso, hay algunas cosas para personalizar.
[CÓDIGO] por el código que obtienes de bing para validar tu web
[DESCRIPCION_GENERAL_DEL_BLOG] (autodescriptiva)
[palabras, clave, separadas, por, coma] (palabras claves con las que posicionas tu blog).
3. Eliminar los estilos de la estructura de la plantilla.
En esta paso lo que haremos será eliminar los estilos que hacen que la plantilla tenga una estructura rígida y fija, en otras palabras que no dejan que sea flexible o responsive.
Debes buscar la etiqueta <b:template-skin> y eliminar casi todo lo que esté allí dentro hasta </b:template-skin> , debes tener cuidado con lo que eliminas, el código deberá quedar de la siguiente manera:
<b:template-skin> <b:variable default='960px' name='content.width' type='length' value='ANCHO_MÁXIMO_EN_PIXELSpx'/> <![CDATA[ ]]> </b:template-skin>
4. Añadir los estilos fluidos.
En este paso vamos a añadir los estilo que le darán la fluidez o la forma responsive a la plantilla, en otras palabras, el estilo fluido.
El siguiente código lo vamos a agregar debajo de <
El truco fue ideado por mi amigo Emilio, así que todos los créditos son para el.
Con este cambio de código también hemos añadido algunas modificaciones con las cuales la plantilla quedará optimizada en cuanto a SEO se refiere.
Si te ha gustado el tutorial no olvides compartirlo en tus redes sociales y recomendarlo con tus amigos.
13 comentarios
María A. Marín · julio 30, 2014 a las 6:53 am
Gracias amigo.
Lo guardo para hacerlo despacio ya que estoy haciendo maletas… 😉
Está complicadillo para mí, ya que veo el lenguaje html y veo al demonio colorao…
Saludos
Hayder Juvinao · agosto 2, 2014 a las 9:25 pm
María hazlo con cuidado y como dije al principio de la entrada, primero guarda una copia de tu plantilla por si algo sale mal @@,
Saludos 😉
Luis Reyes · agosto 6, 2014 a las 10:45 pm
Hola HAYDER JUVINAO,
He realizado este procedimiento, y la verdad si me quedó, ahora mi duda:
Uso adsense en mis entradas que se muestran el contenido, y eso me le quita espacio a los post en las pantallas de menos px, intente quitar dicho adsense con una @media, pero no logre nada, le coloque un id al contenedor <div> </div> donde está y ni así,
que puedo hacer para que no se muestre ese adsense en mis entradas en pantallas pequeñas.
Gracias por su ayuda
Hayder Juvinao · agosto 8, 2014 a las 4:23 pm
Amigo puedes dejar la URL de tu blog?
Saludos
JcDuranM · diciembre 28, 2014 a las 6:19 am
Este comentario ha sido eliminado por el autor.
JcDuranM · enero 9, 2015 a las 3:25 am
podrias ayudarme mi blog es http://www.tusecreto.ml te paso el codigo o dime como puedes ayudarme
Hayder Juvinao · enero 10, 2015 a las 5:02 pm
Amigo has seguido los pasos de esta entrada?
Saludos
JcDuranM · enero 14, 2015 a las 4:36 am
no encuentro
JcDuranM · enero 16, 2015 a las 3:11 am
no encuentro < b:template-skin >
Anonymous · enero 25, 2015 a las 3:43 am
hola me podrias explicar mejor soy nuevo en esto xfa mi perfil mi correo freddyreye01@gmail.com
Hayder Juvinao · enero 27, 2015 a las 2:59 pm
Amigo en que necesitas ayuda?
Saludos
Dayara · junio 29, 2015 a las 1:34 pm
Hola.
Supongo que esos 900px se refieren a la anchura máxima de toda la plantilla, no a la de ninguna de sus columnas, ¿verdad? Es que estoy readaptando las dimensiones de mi blog, que ahora está en 1024, y me parece que se ha quedado algo pequeña para las resoluciones que se usan hoy en día. Me gustaría que tuviera un tamaño máximo de 1920px para que no se viera minúsculo en algunos dispositivos (en la tableta Surface Pro de Microsoft, por ejemplo, te quedas ciego, lo cual es normal si tenemos en cuenta que tiene una pantalla de 10’6″ y una resolución Full HD), y con imágenes adaptadas a dicha resolución. De este modo las imágenes que forman parte del diseño del blog se verán siempre nítidas porque nunca tendrían que agrandarse, sino todo lo contrario, dependiendo del dispositivo.
Dicho esto, y teniendo en cuenta las consideraciones que acabo de mencionar, ¿crees que el tutorial de esta entrada me serviría?
Un saludo.
Juvinao · junio 29, 2015 a las 3:57 pm
Creo que adaptando la parte de la resolución, pues este truco aún es muy vigente para el diseño responsive 😉
Saludos