 |
| How to add stylish notification bar for Blogger |
বর্তমান সময়ে এই ধরনের নটিফিকেশন বার একটি ট্রেন্ড। অনেক বড় বড় ব্লগ সাইটে এই ধরনের নটিফিকেশন বার দেখা যায়। এই ধরনের নটিফিকেশন বারের মাধ্যমে আপনি আপনার ভিজিটরদের মধ্যে গুরুত্ব পর্ণ তথ্য খুব সহজেই জানাতে পারবেন।
আপনি চাইলে এই নটিফিকেশন বারের কালার, ব্যাকগ্রাউন্ড কালার, বাটন সব কিছুই পরিবর্তন করতে পারবেন। এটি ওয়েবসাইটের এসইও তেও কোনো ইফেক্ট ফেলে না।
How to install Notification Bar in your Blogger Website?
নিচের ধাপ গুলো অনুসরন করে আপনি খুব সহজেই এই ধরনের নটিফিকেশন বার যুক্ত করতে পারবেন।
ধাপ-১ঃ
প্রথমে আপনার ওয়েবসাইটের এডমিন প্যানেল থেকে টেমপ্লেট অফশনে যাবেন। এর Edit HTML এ ক্লিক করবেন। এরপর আপনার সামনে আপনার ওয়েবসাইটের Html ইডিট করার অফশন আসবে। এরপর "<head>" এই লেখাটি খুজে বের করতে হবে। এরপর <head> কথাটির নিচে নিচের কোডটি বসাতে হবে।
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
অভিনন্দন! আপনি প্রথম ধাপ শেষ করেছেন।
ধাপ-২ঃ
এখন আমরা কিছু jQuery এবং CSS কোড যুক্ত করবো। সেটা করার জন্য আমাদের </head> কোডটি খুজে বের করতে হবে। এরপর </head> এই কোডটির উপরে নিচের কোড গুলো বসাতে হবে।
<style>
.tybar{width: 100%;
margin: 0;
height: 50px;
display: table;
font-size: 17px;
line-height: 50px;
font-weight: 600;
-webkit-font-smoothing: antialiased;
color: rgb(255, 255, 255);
font-family: Ruda;
border-color: rgb(255, 255, 255);
background-color: #0e1032;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
text-align: center;}
.tybar .bar-but{font-size: 17px;
font-weight: bold;
margin-left: 25px;
background: #fff;
padding: 5px;
color: #fff;
background-color: #f2132d;
line-height: 1.05;
padding: 4px 15px;
cursor: pointer;
text-decoration: none;
border-radius: 3px;}
.tybar .bar-but a{color:#fff; text-decoration: none;}
.tybar i {
float: right;
padding-right: 40px;
cursor: pointer;
line-height: 50px;
}
body{margin-top:-49.33px;}
body{margin-top:49.33px ;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;}
.toggleclose{top:-75px!important;}
.togglebody{margin-top:0!important;}
.fa-arrow-down {
position: fixed;
right: 30px;
top: -2px;
background:#00BE98;
color: #FFFFFF;
width: 40px;
height: 30px;
border-radius: 3px;
line-height: 26px!important;
padding-top: 10px;
padding-right: 0!important;
}
.tybar{z-index:99999;top:0;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;position:fixed}
.blink_me {
color:#f2132d;
margin-right:10px;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@media screen and (max-width:800px) {
.tybar{display:none;}
body {
margin-top: 0;
}
}
</style>
<script>
//<![CDATA[
jQuery(document).ready(function(){
jQuery( '.tybar i' ).click(function() {
jQuery( '.tybar' ).toggleClass( 'toggleclose' );
jQuery( 'body' ).toggleClass( 'togglebody' );
jQuery( '.tybar i' ).toggleClass( 'fa-times' );
jQuery( '.tybar i' ).toggleClass( 'fa-arrow-down' );
});
});
//]]>
</script>
ধাপ-৩ঃ এটি সবচেয়ে গুরুত্বপূর্ন। এখন আপনাকে <body> এই কোডটি খুজে বের করতে হবে। এরপর নিচের কোড গুলো <body> কোডের নিচে বসাতে হবে।
<div class='tybar'>
<span class='blink_me'>Red Text</span>Normal White Text<span class='bar-but'><a href='#'>Button Text</a></span><i class='fa fa-times'/>
</div>