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

Antes de comenzar veremos una 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(http://2.bp.blogspot.com/-fo0Y8_Jx21Y/USsNzjwEg2I/AAAAAAAABWQ/J2ZydO_dWUw/s1600/error.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #FFC237;     background-color: #FFEAA8;     color: #826200; } .success {     background-image: url(http://4.bp.blogspot.com/-UszcUAA2Ilg/USsNzshIDKI/AAAAAAAABWI/o99vHOw0gvY/s1600/accept.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #99C600;     background-color: #EFFFB9;     color: #3C5A01; } .failure {     background-image: url(http://2.bp.blogspot.com/-GxOY8UpGKVM/USsN0A0oB8I/AAAAAAAABWY/w5AW038Cb3c/s1600/exclamation.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #EB5339;     background-color: #FCCAC2;     color: #AC260F; } .information {     background-image: url(http://3.bp.blogspot.com/-dtOmp_Joqtg/USsN0fBDlFI/AAAAAAAABWc/yrPCYsjjR4M/s1600/information.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #418ACC;     background-color: #D0E4F4;     color: #235685; } .lightbulb {     background-image: url(http://2.bp.blogspot.com/-NiWT2UWVICI/USsN0uiaIHI/AAAAAAAABWo/65eG45bVgHk/s1600/lightbulb.png);     background-position: 15px center;     background-repeat: no-repeat;     border: 2px solid #D3A350;     background-color: #FEF0CB;     color: #835F21; } .messages {     background-image: url(http://4.bp.blogspot.com/-BBNH8UZbtZA/USsNziW1iXI/AAAAAAAABWM/bV5FC2eeI_A/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  

- - 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