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