Top Ad unit 728 × 90

Best

Tạo Notification Bar (thanh thông báo) cho Blogger

Home Blogger Navbar Blogger tips Tips - Design Tạo Notification Bar (thanh thông báo) cho Blogger
, ,
Bài viết này mình sẽ giới thiệu tới các bạn một thủ thuật khá hay đối với Blogspot, đó là tạo Notification Bar. Về bản chất nó giống như một dạng sticky menu cố định trên đầu blog, nhưng cái hay là khách truy cập blog của bạn có thể cho phép nó ẩn/hiện bằng việc nhấp chuột vào hình mũi tên trên nó. Các bạn có thể viết trên Notification Bar một dòng thông báo hoặc một đoạn quảng cáo gì đó. Sau đây là cách thực hiện (các bạn nên sao chép lại mã nguồn của template để đề phòng khi có lỗi trong quá trình thao tác) :

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ đóng </head> :


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

<!-- Blogger Notification Bar by kjmagic.blogspot.com -->

<script language="JavaScript"> 
//<![CDATA[
var _0x519b=["\x6A\x51\x75\x65\x72\x79","\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x6E","\x74\x6F\x70","\x6C\x69\x6E\x65\x61\x72","\x65\x78\x74\x65\x6E\x64","\x65\x61\x73\x69\x6E\x67","\x73\x77\x69\x6E\x67","","\x74\x6F\x74\x61\x6C\x48\x65\x69\x67\x68\x74","\x68\x65\x69\x67\x68\x74","\x62\x6F\x72\x64\x65\x72\x53\x69\x7A\x65","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x73\x68\x6F\x77\x41\x66\x74\x65\x72","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x69\x6E\x64","\x2E\x6C\x69\x6E\x6B","\x23\x63\x6C\x6F\x73\x65\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x23\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x61\x6E\x69\x6D\x61\x74\x65","\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x61\x62\x73","\x61\x64\x64\x43\x6C\x61\x73\x73","\x6D\x61\x72\x67\x69\x6E\x54\x6F\x70","\x74\x6F\x70\x5F\x66\x69\x78\x65\x64","\x62\x6F\x74\x74\x6F\x6D","\x62\x6F\x74\x74\x6F\x6D\x5F\x66\x69\x78\x65\x64","\x70\x6F\x73\x69\x74\x69\x6F\x6E","\x64\x65\x74\x61\x63\x68","\x62\x6C\x6F\x63\x6B","\x63\x73\x73","\x62\x6F\x64\x79","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x6C\x65\x6E\x67\x74\x68","\x2E\x6D\x75\x6C\x74\x69\x4D\x65\x73\x73\x61\x67\x65\x73","\x69\x6E\x69\x74","\x6D\x75\x6C\x74\x69\x70\x6C\x65\x4D\x65\x73\x73\x61\x67\x65\x73","\x6B\x65\x65\x70\x48\x69\x64\x64\x65\x6E","\x63\x6C\x6F\x73\x65\x61\x62\x6C\x65","\x63\x6C\x69\x63\x6B","\x70\x6F\x73\x74","\x63\x6C\x69\x63\x6B\x3D\x74\x72\x75\x65","\x61\x6A\x61\x78","\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x22\x6D\x61\x72\x67\x69\x6E\x2D\x74\x6F\x70\x3A\x35\x70\x78\x3B\x20\x6D\x61\x72\x67\x69\x6E\x2D\x6C\x65\x66\x74\x3A\x37\x70\x78\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x23\x36\x36\x36\x36\x36\x36\x3B\x20\x66\x6C\x6F\x61\x74\x3A\x6C\x65\x66\x74\x3B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x54\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x34\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x36\x44\x37\x6D\x2D\x69\x74\x57\x64\x6E\x6F\x2F\x55\x4E\x32\x77\x30\x54\x54\x33\x5A\x6C\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x49\x59\x63\x2F\x43\x4A\x78\x64\x73\x4C\x72\x57\x6B\x51\x67\x2F\x73\x34\x30\x30\x2F\x6D\x62\x74\x2E\x70\x6E\x67\x22\x2F\x3E\x3C\x2F\x61\x3E","\x70\x72\x65\x70\x65\x6E\x64","\x65\x61\x73\x65\x4F\x75\x74\x42\x6F\x75\x6E\x63\x65","\x68\x61\x73\x4F\x77\x6E\x50\x72\x6F\x70\x65\x72\x74\x79","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x57\x72\x61\x70","\x72\x65\x61\x64\x79"];;;(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>


(Nếu blog của bạn đã có thư viện jQuery thì có thể xóa đoạn màu xanh đi)


  Bước 2: Chèn đoạn code sau vào trước thẻ ]]></b:skin> :

 
/* ---- Blogger Notification bar by kjmagic.blogspot.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXELihoXWwaVBfw7W2bnX4lOMSFmPtJ1NfYwXa9nUuXPh-D2TPQPsQkkv5K9BCLx5dB_n8MjKuHfSqE87hCLw0eXftsmsBGDwhPdcJPkNSeZwBxQjMZFtbs9ET6gSjy5vHQOaqRMnN7WE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXELihoXWwaVBfw7W2bnX4lOMSFmPtJ1NfYwXa9nUuXPh-D2TPQPsQkkv5K9BCLx5dB_n8MjKuHfSqE87hCLw0eXftsmsBGDwhPdcJPkNSeZwBxQjMZFtbs9ET6gSjy5vHQOaqRMnN7WE/s400/light.png) no-repeat right 50%; 
} 


* Các bạn có thể thay đổi những phần màu vàng theo ý thích của mình:
#cccccc:  Màu text
#2E2F2E:  Màu nền
#FFFC00:  Màu link


Bước 3: Chèn đoạn code sau vào trước thẻ đóng </body> :

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

Nhập nội dung bạn muốn hiển thị <span id='closebloggernotification'/></div><span id='openbloggernotification' style='top: -6px;'><span/></span></div>

<br/><br/>

Đó là tất cả những gì cần làm. Nếu có bất cứ thắc mắc gì, các bạn có thể để lại comment bên dưới. Chúc các bạn thành công !
Blogger Comments
Facebook Comments

Không có nhận xét nào:

Đăng ký: Đăng Nhận xét (Atom)
Hình ảnh chủ đề của fpm. Được tạo bởi Blogger.