Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
En este tutorial veremos como personalizar los encabezados y los sub-encabezados de blogger con CSS. Igual como aparece en este blog o en otros que seguramente han visto.



Antes de Comenzar veremos una demostración 

Comencemos: 

  • Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML>>Marcamos "Expandir Plantilla de Artilugios"
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
]]></b:skin>

  • Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS  
.post h4 {
background: url("http://aux2.iconpedia.net/uploads/4300999232032834341.png") no-repeat 3px center transparent;
background-size:20px 20px;
font-size: 12px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 2px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}
.post h2 {
background: url("http://3.bp.blogspot.com/-gLnHp4LoL-Q/T-hYlORTm3I/AAAAAAAAA0s/IN1bvxW-hwg/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}
.post h3 {
background: url("http://icons.iconseeker.com/png/fullsize/crystal-clear-actions/star-10.png") no-repeat 3px center ;
background-size:25px 25px;
background-position:20px;
transparent;
text-align:left;
font-size: 18px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
border-radius: 90px;
-moz-box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}


.post h3 a, #content h1 a:visited {
    color: #000;
font-size:17px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0 0 2px;
    padding: 4px 0 0;
}
.post h3 a:hover {
    color: #000;
font-size:18px;
    text-decoration: none;
}

  • Paso 4: Guardamos los cambios efectuados en nuestra plantilla 
Para utilizarlo en nuestras entradas  
  • Paso 5: En nuestra entrada elijaremos entre Encabezado, Subencabezado, Encabezado Secundario
Nota:-  Si quieres puedes cambiar los iconos de cada encabezado ROJO
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar