Personalizar blogger: Cambiando el diseño de tu blog

Las posibilidades de personalizar un blogger son muchas, si deseas conocer cómo hacerlo, no te pierdas la siguiente información que te vamos a mostrar en el siguiente artículo.

personalizar-blogger-2

Personalizar un Blogger

La información y el impulso que puede tener una persona o empresa cuando mantiene optimizada su página o plataforma, le permite obtener mejor presencia en la red. En el caso de los Blogger, son herramientas creadas para presentar y ofrecer diversos tipos de contenidos.

El Blogger se considera una herramienta ideada principalmente por la compañía Pyra Labs a finales de los años 90 y comprado por la compañía Google en el 2003. Brinda la oportunidad de disfrutar de diversas  actividades y registros o diarios online.

Los usuarios obtienen este recurso y se dedican a publicar contenidos diversos y dirigidos a un público en especial. De allí la palabra Bloguero, el cual es una persona especializada en un tema central, enfocando toda la información hacia una audiencia exclusiva; existen diversas firmas que ofrecen Blogs distintos, pero la más importante es el de la empresa Blogger.

Si deseas conocer más temas relacionados te invitamos a leer el siguiente artículo Cómo vivir de un blog , donde se muestran contenidos muy similares.

¿Cómo se hace?

Si deseamos personalizar un Blogger es importante conocer algunas herramientas que son suministradas por la propia página. El diseño puede ser modificado dependiendo de la astucia y creatividad del usuario; por tal motivo se debe saber algunas formas de lenguaje programático para poder personalizar un Blogger.

En este sentido te daremos importantes detalles y recomendaciones en función de poder expresar algunos procesos específicos. Con los procedimientos y trucos siguientes el lector puede comprender de lo que se está hablando en este texto.

Modificaciones

Para personalizar un Blogger debemos comprender que se deben hacer modificaciones en algunos aspectos de la plataforma. Existen tres aspectos  donde se deben enfocar las modificaciones y el usuario está en su deber de conocer; son de suma importancia si desea manejar las diversas formas de personalización.

personalizar-blogger-3

Editar el código HTML: en primer lugar tenemos la edición del código HTML, el cual veremos con detalle más adelante. Es un poco difícil y se deben tener conocimientos de informática, no obstante, la idea nuestra es enseñar estas herramientas; por medio de este recurso se hacen las modificaciones del Blogger utilizando ciertos códigos.

Modificación de plantillas: en cada página de Blogger se consiguen estos editores, los cuales son muy dinámicos y sencillos de manipular, los procesos son elementales ayudando a optimizar el aspecto del blog y las formas visuales del Blogger, muy sencillo y de gran utilidad. Aquí te detallaremos todo lo que debes hacer para editar y la forma de hacerlo, para que sea agradable y llamativo para los internautas.

Plantillas de terceros: puede mejorar el aspecto del blog, se presentan otros modelos creados por editores o usuarios y ser utilizadas en el propio Blogger. Aunque se pueden copiar, son elaboradas por personas que realmente conocen y manejan técnicamente el lenguaje programático.

Con estas tres herramientas podemos realizar innumerables modificaciones al Blogger. Asimismo, la personalización se logra de una forma especial y teniendo en cuenta si el usuario es creativo y tiene ganas de crear una página original y óptima.

Cambiar el aspecto

Para realizar acciones de este tipo debemos conocer algo de las herramientas HTML, esta opción ayuda a conseguir el mejor color y diseño del blog a gusto del usuario. Aunque se pueden ubicar en otras páginas, pero siempre el color propio fascina y gusta más a la propia persona.

personalizar-blogger-4

Fondo del menú de páginas

Para esto se puede utilizar la herramienta llamada Washi-tape o sencillamente aplicar Ctrl+F y aparece la línea del buscador y comenzamos a colocar lo siguiente en el mismo orden, veamos:

.PageList {text-align:center !important;}.

.PageList li {display:inline !important; float:none !important;}.

.tabs-inner .section:first-child {margin: -10px 0px 30px 0px;}

.tabs-inner .section:first-child ul {border-top: 0px solid #000;border-bottom: 0px dotted #000;}

.tabs-inner .widget ul {background-image: url(https://1.bp.blogspot.com/-Xj8sRQXmTOg/V0_lihNaDKI/AAAAAAAAAEQ/m87XGFP5sJYCBp90iSu5NFgkWpJsUY0DwCLcB/s1600/fondo-menu-blogger-washitape.png);height: 60px;margin-bottom: 0;margin-top: 0;margin-left: -30px;margin-right: -30px;}

.tabs-inner .widget li a {display: inline-block;padding: 26px 20px 15px 22px;font:normal bold 12px Arial; text-transform: uppercase;letter-spacing: 3px;color: #fff;border-$startSide: 0px solid #fff;border-$endSide: 0px solid #fff;}

.tabs-inner .widget li:first-child a {border-$startSide: none;}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {color: #666;background-color: transparent;text-decoration: none;}

Estos códigos pueden modificarse para variar el tamaño, color, aspecto y forma del fondo del menú. Algunos Bloggers tienen códigos ya escritos que pueden utilizarse y colocarlos en la relación o respuesta que se encuentra encerrada entre las llaves  {}; otro aspecto a considerar es ir elaborando el diseño e inmediatamente abrir otra pestaña para ir verificando la personalización.

Fondo de menú cuadrado

Vamos a continuar; si deseamos utilizar un fondo de menú de páginas cuadrado, es importante realizar los pasos que describen a continuación. Pero como habrán observado, cada comando comienza con un punto y luego la indicación hacia donde se va a realizar la declaración, veamos:

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

.tabs-inner .section:first-child {margin: -10px 0px 30px 0px;}

.tabs-inner .section:first-child ul {border-top: 0px solid #000;border-bottom: 0px dotted #000;}

.tabs-inner .widget ul {background: #8fb59e;height: 50px;margin-bottom: 0;margin-top: 0;margin-left: -30px;margin-right: -30px;}

.tabs-inner .widget li a {display: inline-block;padding: 20px;font:normal bold 12px Arial;text-transform: uppercase;letter-spacing: 3px;color: #fff; border-$startSide: 0px solid #fff;border-$endSide: 0px solid #fff;}

.tabs-inner .widget li:first-child a {border-$startSide: none;}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {color: #666;background-color: transparent; text-decoration: none;}

Vemos que el orden se genera cuando se colocan los valores o códigos dentro de las llaves. Usted puede fácilmente modificarlos y poco a poco ir llevando un registro de los valores, tamaños, modelos y colores, que posteriormente puede guardar y llevar por medio de un registro personalizado.

Fondo del menú redondeado

Al igual de como se ha venido realizando, en este caso intentamos personalizar un Blogger diseñando bordes redondeados, lo cual en muchos casos le otorga una apariencia especial, pero veamos cómo se realiza:

.PageList {text-align:center !important;}

.PageList li {display:inline !important;float:none !important;}

.tabs-inner .section:first-child {margin: -10px 0px 30px 0px; /*posición*/}

.tabs-inner .section:first-child ul {border-top: 0px solid #000;border-bottom: 0px dotted #000;}

.tabs-inner .widget ul {background: #8fb59e;border-radius: 50px;height: 50px;margin-bottom: 0;margin-top: 0;margin-left: -30px;margin-right: -30px;}

.tabs-inner .widget li a {display: inline-block;padding: 20px;font:normal bold 12px Arial;text-transform: uppercase;letter-spacing: 3px;color: #fff;border-$startSide: 0px solid #fff;border-$endSide: 0px solid #fff;}

.tabs-inner .widget li:first-child a {border-$startSide: none;}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {color: #666;background-color: transparent; text-decoration: none;}.

Para ampliar toda la información suministrada aquí, te sugerimos la lectura del siguiente post, Herramientas para crear un blog donde podrás conocer más de este y otros temas.

Estilo del menú de páginas

Una de las grandes características informativas de los blogs, es la forma y diseño de los menús. Cada uno puede representar una diferencia cuando se desea ofrecer datos relacionados con el contenido; a continuación  describiremos los códigos a ingresar para personalizar un menú.

personalizar-blogger-5

Con línea arriba y abajo

Recuerde abrir simultáneamente una página de Blogger, en la cual puede ir verificando los cambios que vaya realizando a medida que intenta cambiar algunos valores y códigos. Para realizar menús con líneas arriba y abajo se debe establecer lo siguiente:

.PageList {text-align:center !important;}

.PageList li {display:inline !important;float:none !important;}

.tabs-inner .section:first-child {margin: -10px 0px 30px 0px;}

.tabs-inner .section:first-child ul {border-top: 2px solid #8fb59e;border-bottom: 2px solid #8fb59e;}

.tabs-inner .widget ul {height: 50px;margin-bottom: 0;margin-top: 0;margin-left: -30px;margin-right: -30px;}

.tabs-inner .widget li a {display: inline-block;padding: 20px;font:normal bold 12px Arial;text-transform: uppercase;letter-spacing: 3px;color: #8fb59e;border-$startSide: 0px solid #fff;border-$endSide: 0px solid #fff;}

.tabs-inner .widget li:first-child a {border-$startSide: none;}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {color: #666;background-color: transparent;text-decoration: none;}

Con línea arriba y puntitos abajo

A continuación describiremos la forma en cómo se puede personalizar el menú del Blogger, colocando línea arriba y puntitos abajo, siempre fíjate bien cada valor para que las modificaciones se hagan de manera perfecta.

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

.tabs-inner .section:first-child {margin: -10px 0px 30px 0px; /*posición*/}

.tabs-inner .section:first-child ul {border-top: 2px solid #8fb59e;/*bordes del menú*/border-bottom: 2px dotted #8fb59e;/*bordes del menú*/}

.tabs-inner .widget ul {height: 50px;margin-bottom: 0;margin-top: 0;margin-left: -30px;margin-right: -30px;}

.tabs-inner .widget li a {display: inline-block;padding: 20px;/*espacio entre pestañas*/font:normal bold 12px Arial;text-transform: uppercase;letter-spacing: 3px;color: #8fb59e; border-$startSide: 0px solid #fff;border-$endSide: 0px solid #fff;}

.tabs-inner .widget li:first-child a {border-$startSide: none;}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {color: #666;background-color: transparent; text-decoration: none;}

Toda esta codificación debe colocarse de manera continua, manteniendo el espacio en los dos puntos, así como colocar seguidamente y sin espacio la configuración que viene después del punto y coma, son aspectos vitales para personalizar un blogger.

Crear códigos propios

Para crear el diseño tal como deseamos, tenemos que implementar una serie de valores que tiene relación con algo de lenguaje programático, pero si se analiza bien observamos que son una secuencia de varias palabras y números que pueden aprender a modificarse.

Es importante siempre si desea profundizar más en este aspecto, realizar diversas prácticas previas, teniendo un blogger de muestra previa. Estos códigos tiene un significado, donde al ser revisados, se apreciara una represión cada vez al desear su personalización; un aspecto del Blogger, veamos:

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

Todos los Blogger llevan estos códigos al comienzo y sirven para centrar las pestañas. Si se desea modificar el margen, solo se deben cambiar las palabras en inglés center, right o left, (Centrar, derecha o izquierda).

Esta parte del código lo llevan todos, y se utiliza para centrar las pestañas. Si quieres un margen con medidas específicas, basta con cambiar center por right o left, según quieras derecha o izquierda, respectivamente.

Si deseamos crear una personalidad  en el blog o sencillamente crear un diseño propio es importante conocer ciertas acciones relacionadas con los  códigos, son sencillos. Por ejemplo, el color negro es representado por el código #000, mientras que el tamaño de la línea se especifica con los siguiente 0px, cambiando el 0 por el valor en mm que deseamos.

.tabs-inner .section:first-child {margin: -10px 0px 30px 0px; /*posición del menú*/}

.tabs-inner .section:first-child ul {border-top: 0px solid #000;/*bordes del menú arriba*/

border-bottom: 0px dotted #000;/*bordes del menú abajo*/}

En este caso, si queremos colocar la línea punteada dejamos colocado la palabra «dotted», por el contrario, si buscamos que sean a rayas, colocamos «dashed»; para colocarla lineal cambiamos a «Solid». Para que la página tenga líneas hacia los lados debemos cambiar  border-left y border-right con el resto de código igual.

Plantillas internas

Como  explicamos previamente, cada Blog contiene una serie de plantillas prediseñadas que pueden ser utilizadas para optimizar y mejorar el aspecto del Blogger.

A continuación te daremos algunos consejos  y pequeños trucos que pueden servirte si no se desea utilizar el lenguaje de códigos HTML.

Procedimiento

Comenzamos dirigiéndonos al editor de plantilla, el cual se encuentra en el perfil o escritorio de blogger; hacemos clic en «Plantilla» y se abre una ventana, allí aparecen una serie de modelos predeterminados agrupados por categorías.

En este grupo no aparecen las plantillas dinámicas; son otra forma de editar diseños y ofrecen más recursos para la personalización de un Blogger.

Tamaño

Seguidamente ajustamos el tamaño del Blogger, ampliando el ancho para que el mismo pueda verse mejor en cualquier pantalla, bien sea de dispositivo móvil, tableta u ordenador, sin perder cualidades visuales.

Utilizamos entonces la siguiente configuración: Blog completo 1024px, (Que se hace a través de una barra desplazándose con el mouse) y la barra lateral derecha a 300 px.

Esta configuración se realiza motivada a las pantallas de cualquier dispositivo y equipo, funciona mejor con una pixelación de 1024 px. Hace algunos años esta configuración tenía que colocarse en 800 o 600 px, pero hoy en día la mayoría de las pantallas tienen una resolución que oscila entre los 1220 y 1280 px.

No obstante, el ancho de la barra lateral derecha se puede hacer a gusto, y para eso debemos ir realizando una revisión de cómo va quedando la configuración. Posteriormente, debemos hacer lo siguiente:

Ubicamos el botón de avanzado en el mismo menú de «plantillas» y modificamos todo lo que deseamos y que se encuentra en el blog. Podemos iniciar cambiando los colores, la fuente, el título, así como los tipos de gadgets y el cuerpo de entrada; no hay límites solo se debe ir seleccionando y dedicar un poquito de tiempo para establecer la personalización de un blogger a nuestro estilo.

Los colores

Es importante saber algo de diseño gráfico para combinar y realiza contraste de colores que no perturben la visualización ni moleste la intención de los usuarios. Cada color debe estar en combinación de forma uniforme en combinación con las fuentes, En  cuyo caso no intensifiques tanto los contrastes y utiliza el color de las fuentes un poco más fuertes.

Las fuentes

Toma en cuenta el gadgets  y la entrada para colocar un solo tipo de letra, sencilla y sin exageración, lo importante es poder leer la información que se suministra. Asimismo, utiliza sólo un tipo de fuente para crear una sensación de calidad, no realices tantos cambios de colores, con solo dos combinaciones de letras y colores basta.

En cuanto a los colores, elige dos (o tres) colores principales y úsalos a lo largo de toda la plantilla.

Para terminar de realizar los cambios, pulsamos guardar, la cual se encuentra en la parte superior derecha y nos dirigimos al Blogger para apreciar como ha quedado el diseño. Es importante ir verificando eventualmente la personalización de un blogger para evitar posteriores equivocaciones y no perder tanto tiempo en su elaboración.

Plantillas externas

Esta estrategia es una de las más sencillas, sobre todo si no tienes mucho tiempo para desarrollar una plantilla de diseño espectacular. Por otro lado, existe la posibilidad de pensar y observar que las plantillas creadas no cumplen con lo que queremos; en este caso podemos utilizar  plantillas externas las cuales son elaboradas por otros Bloggers.

Por tal motivo, no deberías estar buscando en las miles de páginas que existen y utilizar las páginas que te recomendamos a continuación, son confiables y han sido probadas por muchos usuarios quienes han dado buenas recomendaciones:

  • Premium Blogger Templates, viene en las versiones gratis y de pago (tiene algunas de pago).
  • Gooyabi Templates también en ambas versiones.
  • Dcrazed, solo pago.
  • Themexpose, de las mejores gratuitas.

Los archivos descargados vienen en «un .zip» e incluyen un enlace con la página donde se pueden realizar modificaciones, algunas incluso insertan una carpeta con la documentación y el archivo índex.

¿Cómo se instalan?

En primer lugar después de estar en la página, seleccionamos la plantilla que más nos guste, luego la descargamos en el equipo. Posteriormente, ubicamos la carpeta donde se descargó y ubicamos el archivo XML, el cual previamente se debe descargar en alguna de las páginas nombradas anteriormente y lo ingresamos.

Con solo colocar el archivo en la página del Blogger, en la pestaña de plantillas o ingresando la configuración Ctrl+F,  queda lista la plantilla para ser usada. Por el contrario, si queremos modificarla entonces es importante hacer lo siguiente:

Tenemos que ingresar a la acción de los códigos HTML y esto es inevitable, porque no se puede modificar de otra forma. Al ingresar entonces y ya conociendo los parámetros de tamaño, color, menús, así como todo lo indicado previamente, realizamos los cambios necesarios.

Inclusión de las redes sociales

Si por algún motivo el código HTML incluye la configuración para redes sociales, debes buscarlo en cada una de ellas. Si abres cualquier red social, te diriges a preferencias del menú y ubicas los códigos HTML, esos te sirven para incluirlo en la plantilla y poder tener los enlaces respectivos en las plantillas.

Con esta información terminamos y deseamos también que la misma pueda servirte para personalizar un Blogger, no dejes de visitar nuestro perfil donde te ofrecemos diversas alternativas en cuestiones de marketing.

(Visited 192 times, 1 visits today)

Deja un comentario