TOP "Blogs Tutoriales para Blogs".

http://www.mamaquieroserblogger.com/tutoriales-como-crear-un-blog-en-blogger

http://personalizaciondeblogs.blogspot.com.es/

http://creativemindly.blogspot.com/

http://www.compartidisimo.com/

Personalizar "entradas populares".

Plantilla → Personalizar → Avanzado → Añadir CSS

*Añadir el código, entero (copiar y pegar), en el recuadro blanco*

/***** post populares*****/

.popular-posts ul{

padding-left:0px;}

.popular-posts ul li {

background: #FBF8EF;/**Color de fondo**/

  list-style-type: none;

  margin:0 0 5px 0px;

  padding:5px 5px 5px 20px !important;

  border: 4px solid #F6D8CE; /**Borde y color**/

}

/***** Imagen*****/

.PopularPosts .item-thumbnail img,.featured_thumb img{

height: 70px; /**Altura de la imagen**/

width: 70px; /**Ancho de la imagen**/

padding: 0;

border-radius: 100%;

margin-right: 10px;

border: 5px solid #F6D8CE; /**Grosor del borde y color**/

}

.popular-posts ul

  li:hover {

  border:4px solid #F7BE81; /**Color del borde al pasar el cursor de mouse**/

background: #F6D8CE;/**Color de fondo al pasar el cursor de mouse**/

Aplicar al blog

Tutorial sacado de aquí

Personalizar los títulos de los posts.

Plantilla → Personalizar → Avanzado → Añadir CSS

*Añadir el código deseado, entero (copiar y pegar), en el recuadro blanco*

TÍTULO CON RECUADRO

.post h3 {
border: 2px solid #000000; /**Grosor y color del recuadro**/
margin:.25em 0 0;
padding:0 0 0px; 
font-size:170%; /**Tamaño del texto**/
line-height:1.4em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

TÍTULO CON LÍNEAS

.post h3 {

border-top: 3px solid #000000; /**Línea superior **/

border-bottom: 3px solid #000000; /**Línea inferior **/

margin:.25em 0 0;

padding:0 0 2px; 

font-size:190%; /**Tamaño del texto**/

line-height:1.9em; /**Altura de la linea inferior**/

}

h3.post-title a, h3{

color: #000000; /**Color del título**/

text-align: center; /**centrar título**/

}

TÍTULO CON IMAGEN

.post h3 {

padding-left: 20px;

background: url(URL de la imagen) center left no-repeat;

border-bottom: 3px solid #000000; /**Línea inferior **/

margin:.5em 0 0;

padding:0 0 2px; 

font-size:190%; /**Tamaño del texto**/

line-height:1.9em; /**Altura de**/

}

h3.post-title a, h3{

color: #000000; /**Color del título**/

text-align: center; /**centrar título**/

}

TÍTULO CON FONDO DE COLOR

.post h3 {
background: #90cbcd; /**Fondo del recuadro**/
margin:.5em 0 0;
padding:0 0 2px; 
font-size:160%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #ffffff; /**Color del título**/
text-align: center; /**centrar título**/
}

TÍTULO CON COLOR DE FONDO Y BORDE SUPERIOR

.post h3 {
background: #fec2bb;
border-top: 6px solid #fc8296; /**Línea superior**/
margin:.5em 0 0;
padding:0 0 2px; 
font-size:160%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #ffffff; /**Color del título**/
text-align: center; /**centrar título**/
}

TÍTULO CON COLOR DE FONDO Y TODOS LOS BORDES

.post h3 {
background: #f77e90;
border: 3px solid #000000; /**Grosor y color del recuadro**/
margin:.5em 0 0;
padding:0 0 2px; 
font-size:160%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

Aplicar al blog

• Sobre los códigos...

Border: 2px Solid #000000 |   Sirve para cambiar el aspecto, de este código debemos de cambiar las variables de border:

- (2px indica el grosor del recuadro) 

-( Solid: indica el estilo del recuadro que puede variar según el ejemplo de las siguientes imágenes) 

__________

Solid

....................

 Dotted

--------------- 

Dashed

========= 

Double

-(#000000: indica el color del recuadro | (En la entrada anterior tenéis el enlace a una web donde conseguir el código del color que queráis).

border-bottom: 3px solid #fb9db6; 

(/**Línea inferior **/)
( /**Línea superior **/)

border-top: 3px dashed #fdcfc0;
border-left: 3px double #ff99cc; ( /**Línea izquierda **/)( /**Línea derecha**/) border-right: 3px dotted #d4ffea;

Tutorial sacado de aquí

Página con códigos para el blog de los colores.

COLOR PALETTES

Personalizar caja de comentarios.

Plantilla → Personalizar → Avanzado → Añadir CSS

*Añadir el siguiente código, entero (copiar y pegar), en el recuadro blanco*

.comment-block { 

      background:#ffffff; /* Color de fondo de los comentarios */ 

      border: 2px dotted #000000; /* Estilo del borde */

      box-shadow: 10px 10px 5px #ffffff; /* Sombra de la caja */

      border-radius: 0px;  /* Redondear el borde */

      padding: 5px; /* Espacios alrededor del texto */

   }

Aplicar al blog

Sin tecnología Blogger... Eliminar.

Plantilla → Personalizar → Avanzado → Añadir CSS

*Añadir el siguiente código, entero (copiar y pegar), en el recuadro blanco*

#Attribution1 {

display:none; 

   visibility:hidden;

 }

Aplicar al blog

Centrar las pestañas de páginas.

Plantilla → Personalizar → Avanzado → Añadir CSS

*Añadir el siguiente código, entero (copiar y pegar), en el recuadro blanco*

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Aplicar al blog