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

Geg1 · 12 May 2014

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 · 12 May 2014

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

Geg1 · 12 May 2014

Carlos Arreola dijo:
¿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 · 12 May 2014

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 · 12 May 2014

Galbatorix dijo:
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 · 12 May 2014

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

Geg1 · 12 May 2014

GatoRyuzaki dijo:
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 · 12 May 2014

Esa url que pasastes esta en wordpress :distant:

epsilo99 · 12 May 2014

no anda el demo.....

miguel0n · 12 May 2014

MUy cencillo no pasa nada

Geg1 · 12 May 2014

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 ----------

Galbatorix dijo:
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 · 15 May 2014

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 · 18 May 2014

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

Allan Cano · 13 Jun 2014

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

8:.

spitfire · 1 Jul 2014

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 · 1 Jul 2014

spitfire dijo:
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 · 3 Jul 2014

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.

Geg1 dijo:
no para nada1!jaja

Enviado desde mi GT-I8190L mediante Tapatalk

Abraham777 · 16 Jul 2014

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 · 16 Jul 2014

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.