Tutoriales Sobre Blogger: Crear block de notas para blogger

OK! Después de varias semanas sin tutoriales, debido a un problema que eh tenido con mi ordenador a vuelto y con muchos tutoriales que de seguro les serán de ayuda.

En este tutorial veremos como crear block de notas para blogger usando CSS. Ya hemos visto varios estilos de notas, aunque este estilo de notas me agrada muchos mas. Dandalo un toque mas profecional a nuestro blog.



Antes de comenzar veremos una demostracion:

Demostración:

Comencemos:

• Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos nuestro código CSS.

.informacion, .tips, .peligro {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.informacion {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitp-1KMNCLTVV8m-pGLzKzgyn3atklIzBfAZegQEi_YuUJV4YKLKFV9WxUBC8ChLWcqULQM07jlw9mgOL7mit-bTQbqFJzzQXyzn_Yxx0yAeOTBnQuRm5LvUWQgFoKuM040SwDLnR1dGo/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj59LgsbGgxgWk_z6hW_i68SfdlPGLgqwDDaSJb6NR62I7hmyFXcnFQUhuyXZnd8GHDHjrpIwBJzZmRb3ve8c9y5R3qm1ZHP_ft7giswo0Mtm3b5RYQ4fVmRiYbw30SFfhzJXzK0C0X3g/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.peligro
{
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0zvYk26mk7Q1BC92z0LhUdcQZLJME_-jDdp-7SoiqN_lhLtsxobnOQdUJ5XsQYXU4Tgomz-dkCPG2Y6hkUEbdpl49h8IiFvcF-fiRquffo2QIeIV1j-4DQnN0EKAK1ggfSNeGBvpI8ns/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

• Paso 4: Guardamos los cambios realizados en la plantilla 

Ahora agregaremos nuestras notas en una entrada: Para eso seguimos estos pasos 

• Paso 5: Dentro de una entrada pegamos el siguiente código HTML

Para información: 

<div class="informacion">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

Para Tips: 

<div class='tips'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div> 

Para Peligro

<div class='peligro'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>