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.
Vamos a Blogger>> Plantilla>> Edicion HTML
Buscamos la siguiente linea
]]></b:skin>
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/AVvXsEg082mgpFSY13c4ngz3kj119PQg-mOMo29ECkAc84q1qrWaxn4zDsO6HMT0BV0R9Is6HXYwo5gErzxZpOHabGbf3p2rPj9Pb6_g_FMpV2OFiFAGC1q2VXEbqkxIs9ll77VUWGsKbHkA2oE/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI4u5DF7OALL_D1kDpr7oIe7orylbzND7sLEjAFFSwS1qgENtBI9p8uARwacEivS_fnWZ1eli2QMu-TtRU8I0mdmiG3lWKt5ZVEkJCbaRjGoz9EnaSqlPi2JWE_nZw5_HFBFVrGDf_tcw/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.peligro
{
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7VW3X8mskc_K6QWcTYr996v55-PRK2YNf1hEFv4yRcirJpySHCD6yY9oHX8yS887XBsRFMSY3tAPu2lGeWFF_Nu0kNByhX92q7J1SISaDctGFZ9FKI-i9Vi9q9W0tEJDL83GYK_0isU/s1600/warning.png') no-repeat 12px 8px;
color: #fff;
}
Guardamos los cambios realizados en la plantilla
Ahora agregaremos nuestras notas en una entrada: Para eso seguimos estos pasos
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>