Código blogger para título (h1, h2, h3, etc.)

Aquí les dejamos el Código blogger para título (h1, h2, h3), en SEO blogger Cómo cambiar la etiqueta partida para un mejor SEO en Blogger
En el posicionamiento de un blog son muchas las pautas que debemos tomar en cuenta para los buscadores y en este tutorial seo blogger voy a explicar la importancia de las etiquetas y como se debe de utilizar adecuadamente estas etiquetas, tienen seis tamaños (h1,h2,h3,h4,h5,h6).

Códigos blogger para cambiar los tamaños de títulos 

Etiqueta h1: Es la etiqueta más importante y terminado con la etiqueta h6 la menos importante pero que tiene que ver esto con optimizar los titulos de blogger porque los titulos de los post blogger se catalogan en la etiqueta h3 cuando deberían  estar en la etiqueta h2

Ejemplos Seo blogger optimizar etiquetas blogger
De esta manera esta blogger solo vamos a ver dos aspectos de nos interesa.

<h1>Titulo de tu blog <h1> Los buscadores lo consideran importante

<h3>Titulo de las entradas <h3> menos importancia para los buscadores

Lo que haremos en este tutorial es cambiar de etiqueta los titulos de las entradas pasandolas h2.

¿Porque h2; 

y no h1 que es la más importante? porque la etiqueta h1
corresponde al titulo del blog por ende no puede haber dos etiquetas h1

por tal razón vamos a pasar los títulos de las entradas a la etiqueta h2

Ejemplo: optimizar etiquetas con H1, H2 en blogger para que me entiendan bien vamos a ilustrar con algunos ejemplos, un blog es como un libro solo puede haber un titulo y el otro será subtitulo.

titulo del blog

titulo del tema

titulo de la entrada

subtitulo del tema
Aquí se va desarrollar  el contenido del blog o libro 

Bueno creo que ya quedo claro ahora vamos a modificar las etiquetas en la planilla sigue los pasos como se indica

1.Ingresar a Blogger> Diseño> Edición de HTML

2.click Expandir plantillas de artilugios
3: Buscar el siguiente código


<b:if cond='data:post.title'>

      <h3 class='post-title entry-title'>

     <b:if cond='data:post.link'>

       <a expr:href='data:post.link'><data:post.title/></a>

     <b:else/>

        <b:if cond='data:post.url'>

          <a expr:href='data:post.url'><data:post.title/></a>

        <b:else/>

          <data:post.title/>

        </b:if>

     </b:if>

      </h3>

    </b:if> 

4.cambia donde h3 por h2 hecho esto procedemos a agregar el estilo css
5.busca lo siguiente
]]></b:skin>
Justo antes pegamos este otro código:

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 {border-bottom:0px Dotted #000000;border-top:0px Dotted #000000;margin:.25em 0 0;padding:0 0 4px;font-size:150%;font-weight:normal;line-height:1.4em;color:#1c3c6f;}

5. Por ultimo no olvides guardar la plantilla.

Eso es todo lo que necesitas para optimizar los títulos de las entradas en blogger, ojalá les sea de gran ayuda.

Leer más

Introducción al HTML y CSS

En nuestro blog de Mi Mundo Geek, anteriormente hemos dejado a disposición de los interesados, algunos tutoriales básicos de CSS a pedido de los usuarios que deseaban aprender sobre ello; pero lo cierto es que no profundizamos sobre qué es y para que sirve.
Aquellos que desean personalizar sus plantillas del blog, necesariamente deben de tener un mínimo de conocimiento en HTML y CSS.
Al instalar un gadget, o hacer alguna personalización estética en el blog, seguramente algunos se enfrentan a ciertos códigos de los cuales a menudo ni siquiera saben el significado o no entienden para qué sirven concretamente, por eso es fundamental conocer aunque sea lo básico para entenderlo, aprender de qué se trata cada parte del código y saber reconocerlos en la planilla.

Este artículo no intenta dar clases sobres HTML y CSS, sólo intentaremos enseñar algún conocimiento básico de la manera más simple y accesible posible, por lo menos para que puedan entender un poquito mejor sobre el asunto, facilitando la aplicación de códigos y para aprender poder modificar el diseño de tu blog, o quizás hasta empezar a crear plantillas personalizadas.
Para aquellos que pretenden profundizar más en el asunto, recomiendo indagar en estas páginas webs en HTML y CSS listas para descargar que tienen una calidad impresionante y en las cuales se explican notablemente los conceptos que aquí solo mencionaremos brevemente.

Para comenzar, vamos a identificar algunos elementos en la plantilla.
Cuando hacemos clic en la opción "Editar HTML" en Blogger, nos encontramos con varias etiquetas.
El inicio de nuestro documento es HTML iniciado por la etiqueta <html>, y si se desplaza la página hasta el final, verán que hay una etiqueta de cierre que es </ html>.

Al entrar en la edición HTML en Blogger, visualizamos cuál es el lenguaje que está siendo utilizado en la página (XHTML), representadas por estas etiquetas (es importante no mover ni modificar nada en esta sección):

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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'>

1. Estructura Básica del HTML:
En Blogger, el documento HTML se compone de la siguiente estructura básica:

<html>
<head>

Dentro de estos tags está contenido el estilo de página (CSS).
Aquí podemos determinar la apariencia de los elementos que aparecen en nuestro blog.

<head/>
<body>

Entre estas etiquetas está contenida la estructura de la página, sus elementos (HTML). Es el cuerpo del documento. Aquí creamos los bloques que serán mostrados en la página como las columnas, menús, etc.

</body>
</html>

2. HTML y CSS:
Seguramente ya habrás sentido hablar de CSS y HTML, pero quizás no sabías que significa exactamente.

CSS son las siglas de Cascading Style Sheets = Hoja de estilos en cascada. Es un lenguaje para estilos que define el layout de documentos HTML.
El CSS es un mecanismo para agregar estilos, donde controlas la apariencia de las fuentes, colores, margenes, lineas, medidas, imágenes de fondo, posicionamiento de los elementos, etc.

HTML son las siglas de HyperText Markup Language, es un lenguaje que posibilita presentar la información de una página y todo aquello que esté contenido en ella.

Resumiento, HTML es utilizado para estructurar contenidos, mientras que CSS es utilizado para dar forma a contenidos estructurados.

3. CSS en Blogger:
Ya vimos que el código CSS que da el estilo a la página es donde determinamos la apariencia de de los elementos. En Blogger, comienza con :

<b:skin><![CDATA[/*

Y su etiqueta de cierre es :

]]></b:skin>.

Y siempre que quieramos agregar estilos a los elementos, debemos insertar los códigos referentes antes de la etiqueta de cierre. ]]></b:skin> .

CSS tiene un lenguaje propio, que forma una hoja de estilos y se compone de tres partes:

a) Selector
b) Propiedad
c) Valor

Siguiendo las reglas de este lenguaje, se escribe el selector y después la propiedad y el valor, separados por dos puntos y entre llaves {}.

Cuando tengamos que definir más de una propiedad, por regla general, se debe usar punto y coma para separarlas.

Ejemplo:

body{
background-color: $bgcolor;
}

Estas son las explicaciones básicas iniciales como para hacer una brave introducción al HTML y CSS.
Próximamente traeremos más tutoriales explicativos sobre CSS y HTML.
Mientras tanto, te invitamos a explorar más códigos CSS para potenciar tu sitio web y personalizar de la mejor manera tu blog.

Leer más