Mundo Blogger

Prueba

Mejorar el Posicionamiento de tu Blog [Google]

En todo Blog al crear una entrada Google la guarda para mostrarla de la siguiente manera: "Nombre del Blog / Titulo de la entrada" y de esta forma si creamos una entrada con un titulo como: "Ejemplo de mi blog" y alguien coloca lo mismo en Google no saldrá nuestra entrada porque antes tendría que ir el titulo del Blog o página.

Para solucionar esto vamos a: Plantilla / Editar HTML, ubicamos la siguiente línea (está en la primera parte, no hay que buscar mucho):

Nota .- Recomiendo usar el buscador, para hallar el código al instante, lo ejecutan con: "CTRL + G" y ahí buscan lo siguiente:

<title><data:blog.pageTitle/></title>

Borramos y remplazamos con el siguiente código:

<b:if cond='data:blog.pageType == "index"'>

<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Ahora, cada vez que hagamos una nueva entrada podrán ver que en la pestaña o etiqueta en el navegador solo sale el titulo de ella, y así Google solamente guardará el titulo ya sin el nombre del Blog o página, de tal forma que se ubicará de una mejor manera en los resultados de búsqueda de Google, y el título se visualizará mejor cuando una entrada se comparta en Google+ o Facebook.

IMAGEN FLOTANTE EN BLOGGER

Para lograr este efecto nos dirigimos a: Diseño, Agregar Gadget, seleccionamos "HTML-Java SCRIPT" y pegamos el siguiente código:

Nota.- en las lineas de color azul ustedes las cambian por sus datos: Url de la imagen y Url a donde redireccionara la imagen al hacer click en ella.

Les quedara tal como la que tengo en la parte de abajo del lado derecho,pueden cambiarla al lado izquierdo solo cambian: right por left.

Como centrar el titulo de las Entradas en Blogger

Para centrar el titulo de las entradas, dependiendo de sus plantillas, deben colocar la siguiente línea debajo de la línea para el titulo de las entradas en sus plantillas:

text-align: center;

Según la antigüedad o como tengan de personalizada su plantilla (*Plantillas premium, más abajo lo muestro), la línea que les muestro arriba irá debajo de alguna de las siguientes líneas; por ejemplo mi plantilla usa la primera línea (en verde), la ruta sería: Plantilla / Editar HTML

h3.post-title {

.post-title {

.post h3 {

.post-title { margin: 0; padding: 10px;

Ahora, presionando las teclas Control + F verás un buscador que sirve para usarlo en cualquier página, coloca el comando, ejemplo: h3.post-title { y él te aproximará o ubicará en el lugar preciso.

Busquen cualquiera de las cuatro líneas que les muestro arriba en su plantilla; ahora solo tienen que ubicar la línea para centrar, debajo de la línea de titulo que ustedes usen; como ejemplo les muestro la mia.

h3.post-title {

    text-align: center;

    margin: 0;

    font: $(post.title.font);

}

En algunas plantillas antiguas, tal vez sea necesario no dejar un espacio entre: y center , quedando de la siguiente manera:

text-align:center; [notaran que ya no hay espacio entre" : y center"]

*Para una plantilla de las que se consiguen con diseños ya hechos en páginas especializadas para plantillas, es muy probable que no vean ninguno de los códigos de arriba, por lo general la parte del titulo en estas plantillas es así:

<b:if cond='data:post.title'>
<div style="text-align: center;">
<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>
</div>
</b:if>

Solo tendrían que agregarle las etiquetas <div>, que están en color rojo, como pueden darse cuenta en este caso la estiqueta div se coloca sobre el <h3 class='post-title entry-title'> y no debajo de él, el cierre del </div> va sobre el último cierre del </b:if>, la mayoría de veces es fácil saber donde termina ya que después sigue un nuevo <div>

Nota,-si el titulo de la entrada es muy largo y quieren visualizarlo en dos renglones, la forma de hacerlo es agregando el comando<br> para separar los renglones; lo único extraño sería que en la etiqueta del titulo en la pestaña se vería el <br>, pero en realidad no importaría mucho para cuando se realice una busqueda por parte de un robot (Buscador).

Como hacer "Cuadro enlazame" en tu Blog

Para agregar este cuadro la ruta sería la siguiente: Escritorio / Diseño / Añadir un Gadget / Seleccionan "HTML / Javascript" y en el cuadro de edición colocan el código para crear el cuadro.

La primera línea es la imagen de tu minibanner para que los que quieran enlazar tu página o Blog vean que minibanner van a agregar a sus páginas. Reemplaza las partes que están en color azul con los datos de tu sitio.

<br>

*Ahora, después de que agregues el cuadro de enlázanos, las personas que quieran copiarlo, podrán seleccionarlo, con solo hacer un clic sobre él.

*Notarás que hay una parte en rojo, este pedazo de código hace que al hacer clic sobre el enlace, este se abra en otra ventana o pestaña, si deseas que cuando se haga clic sobre tu enlace pase directamente a tu página o Blog en la misma ventana quita este código: target="_blank"

Para modificar las medidas del cuadro, cambia los valores en:

rows= Alto y cols= Ancho.

Si quieres que la imagen de tu minibanner se vea debajo del cuadro de enlázanos, simplemente deja la parte de su código en la parte de abajo.

<br>

En alt y title se coloca la misma información, ya que esta es la que se verá al colocar el puntero del mouse sobre el minibanner, y algunos navegadores leen el alt y otros el title.

BÁSICOS [HTML]

1. Como quitar la Navbar o la barra superior de blogger.

Para eliminar la Navbar debes ir a Plantilla | Edición de HTML, y pegar después de la etiqueta <body> este código:

#navbar-iframe {

height:0px;

visibility:hidden;

display:none;

}

</style>

Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger entonces el código debes pegarlo después de:

*Ahora ya no es necesario picar este código existe la opción dentro del apartado diseño / barra de navegación

2. Como eliminar el espació superior que queda después de eliminar la Navbar

Sólo hay que entrar en Plantilla | Edición de HTML y agregar antes de ]]></b:skin> lo siguiente:

.content {

margin-top:-30px !important,

}

3. Ocultar el mensaje que se muestra a pie del blog

Para ocultar el gadget vamos a Plantilla | Edición de HTML, y antes de ]]></b:skin> pegamos lo siguiente: #Attribution1 {display:none; visibility:hidden;}

4.Centrar título en la cabecera

Tanto si es texto como imagen puedes centrar el título en el blog accediendo a Plantilla | Personalizar |Avanzado | Añadir CSS y pegar lo siguiente:

.Header { text-align: center; }

*Recuerda que para buscar el código más fácilmente puedes usar las teclas Crtl+F o Ctrl+G.

Cambiar plantillas en Blogger

1. Abrimos nuestra cuenta en Blogger, damos click en " Herramientas para mejorar tu Blog", luego click en "Plantillas" y escogemos una de las siguientes opciones disponibles por el momento: Sencillo, Vistas dinámicas , Ventana de imágenes , Awesome Inc, Filigrana y Etérea. Ejemplo:

Le das click en in diseño , si es de tu agrado pinchas en "Aplicar al Blog" caso contrario sigues viendo las siguientes o anteriores.

Nota.- También existe una opción de "Personalizar", funciona de la siguiente manera: si te gusto una plantilla pero los colores del tema , entonces los puedes modificar.

Creando nuestro Blog

Hola, lo primero que debemos hacer es crear un Blog. En estos tiempos es muy fácil y sencillo , ya que Blogger por ejemplo tiene un editor de HTML muy intuitivo y fácil de usar (Solo bastara con escribir nuestro "Titulo" y el editor lo convierte automáticamente en formato HTML.

[Pasos para crear un Blog
y no morir en el intento]

1. Pinchar donde dice blogger y busca la imagen de los tres pasos. Luego haz clic en "Crear tu Blog ahora"

2.a. Crear una cuenta de blogger. Para ello usa cualquier cuenta de correo que ya tengas, de hotmail, yahoo, etc.

2.b. Si tu cuenta de correo es de Gmail entonces deberás usar la opción de: Accede a través de tu cuenta de Google, poniendo tu correo de Gmail y tu contraseña. Después elige"crear un blog".

A partir de este momento el correo que hayamos usado (de Gmail u otro) sera el nombre de usuario y junto con la contraseña nos servirán para entrar al panel de administración de nuestro blog.

3. Poner un título , Dirección y elegimos la plantilla del que sera nuestro futuro blog (se podría cambiar más tarde)

Algo como esto:

Que puse el titulo, la dirección y elegí la Plantilla Filigrana, seguidamente le damos a crear blog.

Ahora nos aparecerá esta imagen, significa que ya creamos el blog; le damos click en donde dice: Empezar a crear entradas.

4. Bueno llego el momento de crear nuestra primera entrada o"Tema", para eso ingresamos el titulo , contenido .

5. Ahora insertaremos una imagen,para ello le damos click al icono de imagen ( tal como se muestra en la siguiente imagen)

Nos saldrá eta imagen donde elegiremos las imagenes. le damos click en "Elegir Archivos"

Y le damos click en "Agregar las imágenes seleccionadas" y automáticamente nos aparecerá centrada y configurada en nuestra entrada.

En seguida le damos click a "Actualizar" y ya tenemos nuestro primer blog creado a partir de unos sencillos pasos.

6. Crear nuestra primera pagina en nuestro blog:

Ingresamos a blogger , mediante nuestro correo y contraseña . y hacemos click en " Herramientas para mejorar tu blog", como muestro en la imagen:

En la siguiente imagen pinchamos donde dice "Paginas"

Ahora pinchamos en editar " pagina principal", es aconsejable ponerle: Inicio, Indice,Portada , según sea el caso. Esa pagina nos servirá para publicar todas las novedades en nuestro blog (en mi caso le puse Inicio)

Luego crearemos la segunda pagina: Paginas - Pagina nueva y elegimos "pagina en blanco" , le ponemos un nombre ,en mi caso le puse blog.

Con el proceso anterior podremos crear mas paginas de ser necesario.

7. Bueno ahora nos centraremos a insertar gadgets a nuestro blog;

Bien ahora nos vamos a la opción "Diseño" y pinchamos donde dice agregar gadget y seleccionamos uno de la ventana que se nos abre.

Para el ejemplo: he seleccionado el botón +1 de Google y el traductor. ( esta operación se hace uno por uno) Los gadgets son editables ,quiere decir que se puede personalizar a gusto de cada usuario.

El blog nos estaría quedando de la siguiente manera: con los elementos agregados.