745.893 temas | 5.025.515 mensajes | seremos forros, pero somos una bocha
Viejo PINOS dijo: 05.07.14
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_...szgoHOMwq3PdNk

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!

0 Comentarios | Registrate y participá


Herramientas
Iniciar Sesion

Recordarme

Top de Usuarios