Bienvenido a bloggertrucos.com un espacio para el blogger moderno donde buscar soluciones a nuestros problemas de cada día.

2

Como instalar una barra de notificaciones en Blogger

Las barras de notificaciones son muy usadas en blogs cuando tenemos un mensaje urgente y corto que queremos hacerlo llegar a nuestro visitantes. En mi blog lo he instalado para dar a conocer ofertas de hosting, dominios y otros mensajes que no necesitamos crear un post para hacerlo saber.

barra

En WordPress, por ejemplo, existen muchas alternativas para crear barras de notificaciones como The Hello Bar, la cual aparece en el encabezado de nuestro sitio y permite que los usuarios la escondan con un clic. Basado en esto, esta mismo estilo de barras se puede instalar ahora en Blogger, Veamos como hacerlo.

Instalando la barra en blogger

Lo primero que haremos en instalar un codigo antes de cerrar head

</head>

agregamos:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’></script>

<!–Blogger Notification Bar by www.MyBloggerTricks.com–>
<script language=’JavaScript’>
//<![CDATA[

var _0x519b=[“x6Ax51x75x65x72x79″,”x62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6E”,”x66x6E”,”x74x6Fx70″,”x6Cx69x6Ex65x61x72″,”x65x78x74x65x6Ex64″,”x65x61x73x69x6Ex67″,”x73x77x69x6Ex67″,””,”x74x6Fx74x61x6Cx48x65x69x67x68x74″,”x68x65x69x67x68x74″,”x62x6Fx72x64x65x72x53x69x7Ax65″,”x64x75x72x61x74x69x6Fx6E”,”x73x68x6Fx77x41x66x74x65x72″,”x23x62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6E”,”x66x69x6Ex64″,”x2Ex6Cx69x6Ex6B”,”x23x63x6Cx6Fx73x65x62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6E”,”x23x6Fx70x65x6Ex62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6E”,”x61x6Ex69x6Dx61x74x65″,”x6Fx70x65x6Ex62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6E”,”x72x65x6Dx6Fx76x65x43x6Cx61x73x73″,”x61x62x73″,”x61x64x64x43x6Cx61x73x73″,”x6Dx61x72x67x69x6Ex54x6Fx70″,”x74x6Fx70x5Fx66x69x78x65x64″,”x62x6Fx74x74x6Fx6D”,”x62x6Fx74x74x6Fx6Dx5Fx66x69x78x65x64″,”x70x6Fx73x69x74x69x6Fx6E”,”x64x65x74x61x63x68″,”x62x6Cx6Fx63x6B”,”x63x73x73″,”x62x6Fx64x79″,”x70x72x65x70x65x6Ex64x54x6F”,”x6Cx65x6Ex67x74x68″,”x2Ex6Dx75x6Cx74x69x4Dx65x73x73x61x67x65x73″,”x69x6Ex69x74″,”x6Dx75x6Cx74x69x70x6Cx65x4Dx65x73x73x61x67x65x73″,”x6Bx65x65x70x48x69x64x64x65x6E”,”x63x6Cx6Fx73x65x61x62x6Cx65″,”x63x6Cx69x63x6B”,”x70x6Fx73x74″,”x63x6Cx69x63x6Bx3Dx74x72x75x65″,”x61x6Ax61x78″,”x3Cx61x20x73x74x79x6Cx65x3Dx22x6Dx61x72x67x69x6Ex2Dx74x6Fx70x3Ax35x70x78x3Bx20x6Dx61x72x67x69x6Ex2Dx6Cx65x66x74x3Ax37x70x78x3Bx20x63x6Fx6Cx6Fx72x3Ax23x36x36x36x36x36x36x3Bx20x66x6Cx6Fx61x74x3Ax6Cx65x66x74x3Bx22x20x74x61x72x67x65x74x3Dx22x5Fx62x6Cx61x6Ex6Bx22x20x68x72x65x66x3Dx22x68x74x74x70x3Ax2Fx2Fx77x77x77x2Ex4Dx79x42x6Cx6Fx67x67x65x72x54x72x69x63x6Bx73x2Ex63x6Fx6Dx22x3Ex3Cx69x6Dx67x20x73x72x63x3Dx22x68x74x74x70x3Ax2Fx2Fx34x2Ex62x70x2Ex62x6Cx6Fx67x73x70x6Fx74x2Ex63x6Fx6Dx2Fx2Dx36x44x37x6Dx2Dx69x74x57x64x6Ex6Fx2Fx55x4Ex32x77x30x54x54x33x5Ax6Cx49x2Fx41x41x41x41x41x41x41x41x49x59x63x2Fx43x4Ax78x64x73x4Cx72x57x6Bx51x67x2Fx73x34x30x30x2Fx6Dx62x74x2Ex70x6Ex67x22x2Fx3Ex3Cx2Fx61x3E”,”x70x72x65x70x65x6Ex64″,”x65x61x73x65x4Fx75x74x42x6Fx75x6Ex63x65″,”x68x61x73x4Fx77x6Ex50x72x6Fx70x65x72x74x79″,”x23x62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6Ex57x72x61x70″,”x72x65x61x64x79″];;;(function (_0xd41ax1){_0xd41ax1[_0x519b[2]][_0x519b[1]]=function (_0xd41ax2){var _0xd41ax3={duration:500,position:_0x519b[3],closeable:true,showAfter:0,keepHidden:false,borderSize:3,height:40,easing:_0x519b[4]},_0xd41ax4=_0xd41ax1[_0x519b[5]]({},_0xd41ax3,_0xd41ax2);if(_0xd41ax4[_0x519b[6]]==_0x519b[7]){_0xd41ax4[_0x519b[6]]=_0x519b[8];} ;_0xd41ax4[_0x519b[9]]=parseInt(_0xd41ax4[_0x519b[10]],10)+parseInt(_0xd41ax4[_0x519b[11]],10);_0xd41ax4[_0x519b[12]]=parseInt(_0xd41ax4[_0x519b[12]],10);_0xd41ax4[_0x519b[13]]=parseInt(_0xd41ax4[_0x519b[13]],10)*1000;var _0xd41ax5=_0xd41ax1(this),_0xd41ax6=_0xd41ax5[_0x519b[15]](_0x519b[14]),_0xd41ax7=_0xd41ax6[_0x519b[15]](_0x519b[16]),_0xd41ax8=_0xd41ax6[_0x519b[15]](_0x519b[17]),_0xd41ax9=_0xd41ax5[_0x519b[15]](_0x519b[18]),_0xd41axa={},_0xd41axb=_0x519b[8],_0xd41axc={},_0xd41axd=_0x519b[8],_0xd41axe=function (){_0xd41axc[_0xd41axd]=_0xd41ax4[_0x519b[9]];_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),_0xd41ax4[_0x519b[6]]);_0xd41ax5[_0x519b[21]](_0x519b[20]);} ,_0xd41axf=function (){_0xd41axc[_0xd41axd]=-Math[_0x519b[22]](34-_0xd41ax4[_0x519b[10]]);_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),function (){_0xd41ax10();} );} ,_0xd41ax10=function (){_0xd41axa[_0xd41axb]=0;_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],_0xd41ax4[_0x519b[6]],function (){_0xd41ax5[_0x519b[23]](_0x519b[20]);} );} ,_0xd41ax11=function (){_0xd41axa[_0xd41axb]=-_0xd41ax4[_0x519b[9]];_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],function (){_0xd41axe();} );} ,_0xd41ax12=false;switch(_0xd41ax4[_0x519b[28]]){case _0x519b[3]:_0xd41axb=_0x519b[24];_0xd41axd=_0x519b[3];break ;;case _0x519b[25]:_0xd41axb=_0x519b[3];_0xd41axd=_0x519b[3];break ;;case _0x519b[27]:_0xd41axb=_0x519b[26];_0xd41axd=_0x519b[26];break ;;} ;_0xd41ax5[_0x519b[29]]();_0xd41ax5[_0x519b[33]](_0x519b[32])[_0x519b[31]]({display:_0x519b[30]});if(_0xd41ax6[_0x519b[15]](_0x519b[35])[_0x519b[34]]){bloggernotificationExtras[_0x519b[37]][_0x519b[36]]();} ;if(_0xd41ax12&&_0xd41ax4[_0x519b[38]]&&_0xd41ax4[_0x519b[39]]){setTimeout(function (){_0xd41axe();} ,_0xd41ax4[_0x519b[13]]);} else {setTimeout(function (){_0xd41ax10();} ,_0xd41ax4[_0x519b[13]]);} ;_0xd41ax8[_0x519b[40]](function (){_0xd41ax11();setCookie();} );_0xd41ax9[_0x519b[40]](function (){_0xd41axf();setCookie();} );_0xd41ax7[_0x519b[40]](function (){_0xd41ax1[_0x519b[43]]({type:_0x519b[41],data:_0x519b[42],success:function (_0xd41ax13){} });return true;} );} ;} )(window[_0x519b[0]]);jQuery(document)[_0x519b[49]](function (_0xd41ax1){_0xd41ax1(_0x519b[14])[_0x519b[45]](_0x519b[44]);if(!_0xd41ax1[_0x519b[6]][_0x519b[47]](_0x519b[46])){_0xd41ax1[_0x519b[5]](_0xd41ax1[_0x519b[6]],{easeOutBounce:function (_0xd41ax14,_0xd41ax15,_0xd41ax16,_0xd41ax17,_0xd41ax18){if((_0xd41ax15/=_0xd41ax18)<(1/2.75)){return _0xd41ax17*(7.5625*_0xd41ax15*_0xd41ax15)+_0xd41ax16;} else {if(_0xd41ax15<(2/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(1.5/2.75))*_0xd41ax15+0.75)+_0xd41ax16;} else {if(_0xd41ax15<(2.5/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.25/2.75))*_0xd41ax15+0.9375)+_0xd41ax16;} else {return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.625/2.75))*_0xd41ax15+0.984375)+_0xd41ax16;} ;} ;} ;} });} ;_0xd41ax1(_0x519b[48])[_0x519b[1]]({position:_0x519b[3],showAfter:0,keepHidden:true,duration:300,closeable:true,height:40,borderSize:1,easing:_0x519b[7]});} );
//]]>
</script>

Como puedes ver el código instala la librería jQuery, si ya la tienes puedes omitir el primero código:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’></script>

Ahora buscamos esta parte (extendiendo los artilugios):

]]></b:skin>

y agregamos el código CSS que nos dará el estilo de la barra en tu blog:

/* —-Blogger Notification bar by www.MyBloggerTricks.com—– */

#bloggernotificationWrap{
display: none;
margin: 0;
padding: 0;
position: fixed;
margin-top: -41px;
z-index: 999999;
width: 100%;
height: 41px;
}

#bloggernotification {
width: 100%;
height: 28px;
margin: 0px;
padding-top: 7px;
text-align: center;
background: none repeat scroll #2E2F2E;
position: relative;
box-shadow:0px 1px 3px #666;
z-index: 9998;
text-decoration: none;
color: #cccccc;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
border-bottom:2px solid #fff;
}

 

#bloggernotification a{
text-decoration: none;
color:#FFFC00;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
outline: none;
}

#bloggernotification a:hover{
text-decoration: underline;
}

#bloggernotificationWrap #closebloggernotification{
display: block;
position: absolute;
top: 0;
right: 23px;
height: 40px;
width: 21px;
background: url(https://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/s400/light.png) no-repeat 0 center;
cursor: pointer;
}

#bloggernotificationWrap #closebloggernotification:hover{
background-position: -21px 50%;
}

#bloggernotificationWrap.bottomPosition #closebloggernotification{
background-position: right 50%;
}

#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{
background-position: -42px 50%;
}

#bloggernotificationWrap #openbloggernotification{
display: block;
position: absolute;
top: -6px;
right: 15px;
padding: 0 7px;
background: #2E2F2E;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
cursor: pointer;
z-index: 1;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow:0px 1px 3px #666;
}

#bloggernotificationWrap #openbloggernotification span{
display: block;
width: 21px;
height: 34px;
background: url(https://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/s400/light.png) no-repeat right 50%;
}

Guardamos los cambios. Hasta aquí ya tenemos todo listo, solo falta agregar el mensaje que mostraremos en la barra dentro de las capas. Tenemos dos opciones: Podemos agregar el siguiente código debajo de la etiqueta BODY o antes de cerrarla, o usando un gadget HTML en cualquier parte del sitio.

Cualquier opción que queramos, debemos agregar el siguiente código:

<div class=’openbloggernotification’ id=’bloggernotificationWrap’ style=’display: block; margin-top: 0px;’><div id=’bloggernotification’>

Aqui va el mensaje

<span id=’closebloggernotification’/></div><span id=’openbloggernotification’ style=’top: -6px;’><span/></span></div>

Ahora la barra creada solo muestra un mensaje, como puedes ver no hay enlaces. Para poder agregar enlaces  debemos de agregarles clases asi:

<a class=‘link’ href=’URL target=’_blank’>Enlce</a>

Para que los enlaces se vean correctamente, debes de usar la clase link como se muestra en color rojo. Si quieres cambiar los colores de la barra, textos y enlaces, puedes revisar los valores en #bloggernotification

Guarda los cambio y mira tu barra de notificaciones en Blogger funcionando!

Fuente

Show Comments

No Responses Yet

Leave a Reply