Tutorial: Cómo personalizar tu blog en Blogger para micronichos con plantilla gratuita

[Geg1]

Aquí el Tutorial más completo para convertir tu blogger en un micronicho​

Empezando, por lo más sencillo: Cosas a eliminar

​

para eliminar el molesto "Página principal" que vemos al final de cada entrada, haremos lo siguiente:


Iremos a Plantilla>Personalizar>Avanzado>Añadir CSS

y añadiremos lo siguiente:

#blog-pager {visibility:hidden; display:none;}

Seguimos con "Suscribirse a entradas (ATOM)"

Iremos a Plantilla>Personalizar>Avanzado>Añadir CSS

y añadiremos lo siguiente:

.feed-links {
visibility:hidden;
display:none;
}

Para eliminar el "Reconocimiento" que dice: "Con la tecnologia de Blogger":


Iremos a Plantilla>Personalizar>Avanzado>Añadir CSS

y añadiremos lo siguiente:

#Attribution1 {display:none; visibility:hidden;}

Para eliminar la navbar de Blogger:


Iremos a Plantilla>Personalizar>Avanzado>Añadir CSS

y añadiremos lo siguiente:

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}

Dándole un estilo sencillo y bonito a nuestro blog:
​

Para bordear la entradas de tu blog y darle un aspecto como este:

.post-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 20px 0;
}
.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

Modificando estas dos variables, obtendremos un borde redondeado o default (0px)

-moz-border-radius:0px;
-webkit-border-radius:0px;

Modificando esta variable, hara mas ancho el borde (1 px) y podrás cambiarle el color en #000.

border: 1px solid #000;

Tabla de colores HTML aquí.


Para agregar un acerca del autor (By: ayudarbloggers.com)


Iremos a Plantilla>Editar HTML

y buscaremos esta linea:

<div class='post-footer-line post-footer-line-1'>

Abajo de ella, pegamos lo siguiente:

<div class='acercadelautor'>
<img alt='Foto de perfil' border='0' src='URL IMAGEN FOTO' style='float:left; margin:0 10px 10px 0; width:80px; height:80px; border-radius:50px;' title='NOMBRE EXACTO G+'/><a href='URL PERFIL G+?rel=author' target='_blank' title='Perfil en Google Plus'><strong>NOMBRE DE PERFIL VISIBLE:</strong></a>
<p>BREVE DESCRIPCION PERSONAL</p>
</div>

Después iremos a Plantilla>Personalizar>Avanzado>Añadir CSS

y añadiremos lo siguiente:

.acercadelautor {
background: #e7e7e7;
border: 1px solid #ccc;
letter-spacing: normal;
color: #00000;
text-transform: none;
font-size: 14px;
padding: 5px;
margin: 10px 0 20px 0;
}
.acercadelautor strong {
color: #00000;
font-weight: bold;
font-size: 16px;
text-decoration: underline;
}
.acercadelautor a{
color:#00000;
}

Para centrar la Cabecera de BLOGGER:

iremos a Plantilla>Personalizar>Avanzado>Añadir CSS

y añadiremos lo siguiente:

.header .widget {
text-align:center;}
.header img {margin:0 auto;}

★Por último les dejo la plantilla optimizada para los anuncios de Adsense:

https://mega.co.nz/#!UVM32JDB!g88CL_1GWyfIoKW-XT270FiyKt65IszgoHOMwq3PdNk

Para ver un ejemplo de blog:

DEMO

Pronto pondré un ejemplo con adsense.

*COMENTAR ES AGRADECER
*TAMBIEN EXISTE EL BOTON AGRADECER, SI CREES QUE TE GUSTO ESTE TUTORIAL, DALE AL BOTON "Me agrada"
*COMPARTELO EN LAS REDES SOCIALES!

 

[Carlos Arreola]

¿Alguna imagen de cómo queda o ejemplo de algún blog así? Se ve interesante

 

[Geg1]

¿Alguna imagen de cómo queda o ejemplo de algún blog así? Se ve interesante

Perdon carlos, ahi subo un ej!

Enviado desde mi GT-I8190L mediante Tapatalk

 

[Galbatorix]

No me gustó. Parece copy/paste, los ejemplos no son claros, no se puede ver la demo.

Opino que hay que ser más prolijo al escribir, sobre todo en tutoriales, donde es muy importante asegurar la comprensión. Te pongo por ejemplo esta línea:

y buscaremos esta linea:

dónde el ejemplo no se copió y no sabemos que es lo que hay que copiar.

El concurso de tutoriales no es un sorteo, se trata de aportar contenido de calidad no ir por el dinero como a una rifa. Tu aporte falla en muchos aspectos básicos y no se logra el objetivo del tutorial que es acrecentar un conocimiento o mejorar una habilidad.

Te dejo una estrellita, y no te desanimes, esperaremos que tus próximos aportes tengan la calidad necesaria para competir.

* * * * *​

 

[Geg1]

No me gustó. Parece copy/paste, los ejemplos no son claros, no se puede ver la demo.

Opino que hay que ser más prolijo al escribir, sobre todo en tutoriales, donde es muy importante asegurar la comprensión. Te pongo por ejemplo esta línea:



dónde el ejemplo no se copió y no sabemos que es lo que hay que copiar.

El concurso de tutoriales no es un sorteo, se trata de aportar contenido de calidad no ir por el dinero como a una rifa. Tu aporte falla en muchos aspectos básicos y no se logra el objetivo del tutorial que es acrecentar un conocimiento o mejorar una habilidad.

Te dejo una estrellita, y no te desanimes, esperaremos que tus próximos aportes tengan la calidad necesaria para competir.

* * * * *​

He modificado para poner la web demo desde mi movil y se me ha jodido en post 🙁



Enviado desde mi GT-I8190L mediante Tapatalk

 

[GatoRyuzaki]

Si no me equivoco la url del demo es esta.
Para la otra guarda el post en borrador :s

 

[Geg1]

Si no me equivoco la url del demo es esta.
Para la otra guarda el post en borrador :s

Las uñas de gel

Enviado desde mi GT-I8190L mediante Tapatalk

 

[pedro salinas]

Esa url que pasastes esta en wordpress :distant:

 

[epsilo99]

no anda el demo.....

 

[miguel0n]

MUy cencillo no pasa nada

 

[Geg1]

Uf bueno disculpen es que estoy desde el cel..

La demo es: www. lasuñasdegel .com

No funciona aqui por conflicto con la ñ

Enviado desde mi GT-I8190L mediante Tapatalk

---------- Post agregado el 13-may-2014 hora: 12:34 ----------

No me gustó. Parece copy/paste, los ejemplos no son claros, no se puede ver la demo.

Opino que hay que ser más prolijo al escribir, sobre todo en tutoriales, donde es muy importante asegurar la comprensión. Te pongo por ejemplo esta línea:



dónde el ejemplo no se copió y no sabemos que es lo que hay que copiar.

El concurso de tutoriales no es un sorteo, se trata de aportar contenido de calidad no ir por el dinero como a una rifa. Tu aporte falla en muchos aspectos básicos y no se logra el objetivo del tutorial que es acrecentar un conocimiento o mejorar una habilidad.

Te dejo una estrellita, y no te desanimes, esperaremos que tus próximos aportes tengan la calidad necesaria para competir.

* * * * *​

He arreglado los problemas y está la demo online!

pasate y mira!

Saludos

---------- Post agregado el 13-may-2014 hora: 14:51 ----------

@pedro salinas;
[MENTION=18257]epsilo99[/MENTION]
[MENTION=41405]GatoRyuzaki[/MENTION]


Agregada la DEMO! Saludos y espero sus comentarios

 

[Geg1]

Que les parecio? 🙁 le e puesto mucho empeño a este tutorial, y asi se basan mis plantillas para nichos

Enviado desde mi GT-I8190L mediante Tapatalk

 

[kibrot]

Esperaré el ejemplo con adsense para probarla en uno de mis blogs

 

[Allan Cano]

Al fin lo implemente y quedo perfecto. Excelente post bastante bueno 😛8:.

 

[spitfire]

Muy buen tuto Geg1 , justo estaba buscando para eliminar el reconocimiento de Con la tecnologia Blogger, pero tengo una duda, nos puede perjudicar borrar el reconocimiento? G no nos podria borrar el blog de un dia para el otro? gracias.

 

[Geg1]

Muy buen tuto Geg1 , justo estaba buscando para eliminar el reconocimiento de Con la tecnologia Blogger, pero tengo una duda, nos puede perjudicar borrar el reconocimiento? G no nos podria borrar el blog de un dia para el otro? gracias.

no para nada1!jaja

Enviado desde mi GT-I8190L mediante Tapatalk

 

[spitfire]

Ok, gracias, tengo dos sugerencias que podrias agregar a tu tuto, no se como se hacen, pero tal vez tu si y yo estoy necesitando eso para agregarlo a mi blog

1-En la barra vertical de navegacion agregue varios enlaces a las distintas etiquetas y asi parece que fueran categorias
pero me gustaria saber como hacer para que al ver las etiquetas por ejemplo hosting se mostrara arriba de las entradas de esa categoria una leyenda diciendo Articulos en la categoria hosting y asi sucesivamente para todas las categorias creadas con las etiquetas

en este mismo punto debo destacar que al no haber entradas en la categoria seleccionada muestra una leyenda que dice
No hay ninguna entrada con la etiqueta gomerias. Mostrar todas las entradas
perio quedaria mejor modificarlo para que se leyera
No hay ningun articulo en la categoria gomerias.

como se podria hacer?

2-Como puedo hacer para que en la pagina pincipal del blog, antes de las entradas se muestre una pequeña descripcion del sitio, a modo de presentacion del mismo?

muchas gracias, espero que te sirva mi sugerencia, spitfire.

no para nada1!jaja

Enviado desde mi GT-I8190L mediante Tapatalk

 

[Abraham777]

Me ha encantado el tuto, pero el efecto de los bordes redondeados no funciona 😡

Me gustaria ver si alguien lo puede probar con adsense.

Saludos.

 

[Valentozer]

Muy bueno!!

¿Que es mejor para hacer un micronicho, wordpress o blogger?
Casi todo lo que he visto ha sido con wordpress y muy poca gente tira al blogger.