Tutoriales Sobre Blogger: Hermosas cajas de Notificaciones para Blogger con CSS

En este tutorial veremos como crear cajas de notificaciones para blogger con CSS. Ya hemos visto uno tutoriales sobre cajas de notificaciones para blogger

• Crear Caja de Notificaciones para Blogger con CSS
• 4 Caja de Notificaciones para Blogger con CSS

Antes de comenzar veremos una demostración: 

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 el siguiente código CSS

/** Caja de Notificaciones por Tutoriales-Blogger.info */ .notification {     line-height: 30px;     cursor: pointer;     clear: both;     height: 30px;     margin: 8px 0px 8px 0px;     padding: 20px 25px 10px 60px;     -moz-border-radius: 4px;     -webkit-border-radius: 4px; } .notification strong {     margin-right: 5px; } .notification p {     font-size: 11px;     padding: 0px;     margin: 0px;     color: #333333; } .message p {     font-size: 11px; } .warning {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyWuZ1CUYnTsEfCw8pTjOQNRvLOTrpkOEMs_z1vLedyuL_mazxBJFEJ-z8avf5ASIE0Ggi4kPF0kbZfZuCpB1-gNySFjx5yqoEfKCBj2ESwDH5yHDC4ZHFcWDLlIjJWVeYaBKIxCs7TNJD/s1600/error.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #FFC237;     background-color: #FFEAA8;     color: #826200; } .success {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipnMOE8OGMt4jH7ccWPH6l80QJPzLFkV0JeHkDv-ghbzbUjIJV2l1XQU853eD4QKjfN1GtIEoq2L3sO8w0fiY8cyodTLrsssPaZ6FiXDGSuCRevLcq75W933w2l6dgtrMYcwSOF9Cfurq1/s1600/accept.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #99C600;     background-color: #EFFFB9;     color: #3C5A01; } .failure {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnmH8fsoilms0qZ3l4CGrl7uFXPz8YCu6EiwdBPVbuCk6sUtZAXDv8IAaKjNF06MbAuSR8atb98GVSoARB3KgkcVAhHQ9G77D9zlYR5GjHRAhtmovQXwDaJrmkFIlRz8-JT_Z36WEHmZup/s1600/exclamation.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #EB5339;     background-color: #FCCAC2;     color: #AC260F; } .information {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLh8x2SjilvdcDINwCowr46BUv0jvcatgfjEGr99L8uz0Iok9YwXlokBAQrbnJcuu8C2n55ye9PSJoN6fyKM4NB_QfDNn4zIQKz3MS-lf5g8MR4CX16TOdizVxcts30fuc0zE111EEJBNS/s1600/information.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #418ACC;     background-color: #D0E4F4;     color: #235685; } .lightbulb {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhY9z2-ThcfzmS2IQcG4kFAqF1GN1rMb8VsX5c5GCJdErRq89Wegnl9_GfFEsOHo6GMELHCxY9iEMyRiHk1AKaO1d_B7EEKHbc-4kxZmgJgIhRie_p9phnQeLuaKvMGXF1lKxWWZdVO0Vh/s1600/lightbulb.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #D3A350;     background-color: #FEF0CB;     color: #835F21; } .messages {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNTLZN-zwdtO63gRO1Yuut_OVas9Q2aoMBok3tSxkKmnwhOXIHiL6JZIXddMHr637Ey98SayhTpUdKOL4tJjACCxL9PclB9yTHzXN1dQ5wICQr79M5h9XIPpJqy9m_Czj1EN7f-_7hY_GI/s1600/email.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #42B4FF;     background-color: #9DDFFF;     color: #835F21; } /** Caja de Notificaciones por Tutoriales-Blogger.info */

• Paso 4: Todabia en la plantilla buscamos la siguiente linea (Ctrol + F)

</head> 

• Paso 5: Justo por encima de </head> pegamos el siguiente código 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() {     // Closing notifications     // this is the class that we will target     $(&quot;.hideit&quot;).click(function() {     //fades the notification out         $(this).fadeOut(700);     }); }); </script> 

Nota:-  Para aquellos que tengan el codigo jQuery evitar el Paso 5

• Paso 6: Dentro de una entrada pegamos el siguiente codigo HTML para cada caja de notificaciones

Caja de Notificación de Advertencia: 

<div class="notification warning hideit"> <strong>ADVERTENCIA &nbsp;</strong>Caja de Notificación de Advertencia</div>

Caja de Notificación de Información:  

<div class="notification information hideit"> <strong>INFORMACION &nbsp;</strong>Caja de Notificación de Información</div>

Caja de Notificación de Aceptación:  

<div class="notification success hideit"> <strong>ACEPTADO &nbsp;</strong>Caja de Notificacion de Aceptacion&nbsp;</div>

Caja de Notificación de  Peligro: 

<div class="notification failure hideit"> <strong>PELIGRO&nbsp;</strong>Caja de Notificación de Peligro</div>

Listo ya estaríamos disfrutando de nuestras cajas de notificaciones para blogger