ByMr. Sultan Posted on Design Blog

How To Add Stylish Notification Bar Top On Website

How to add stylish notification bar on website. Blog website me stylish notification bar kaise add kare iske bare me is post me details se janege.

WordPress blog me notification bar ya welcome bar add karne ke liye plugin install karni hoti hai. Aur Blogger website par hame html coding ya javascript se notification bar website me add karte hai.

Stylish notification bar for blog website

 

Is post me janege ki blogger website me stylish notification bar Kaise add karte hai. Aur notification bar kya hai. aur ishe blog website me kyo aur kaise add karte hai. To chaliye shuru karte hai

विषय-सूची

Website Notification Bar Kya Hai:-

Notification bar ko ham welcome bar, hello bar bhi kahte hai. ye blog website me kisi special news announce ke liye add kiya jata hai. ya kisi link ka promotion karne ke liye blog website me add karte hai.

To Chaliye jante hai blogger website me stylish notification bar ya announcement bar website Kaise add kare

 

 

How To Add Stylish Notification Bar In blogger Website.

Notification bar ko blog me add karne ke liye niche diye gaye step ko follow kariye.

Step 1.
1. Sabse pahle blog Dashboard Me Theme par click kare.
2. Ab Edit Html Par click kare.
3. Ab CTRL+F Dabakar search box me ]]></b:skin>  Search kare
4. ]]></b:skin>  se phale is code ko paste kar de.

 

#welcome_bar {width: auto; height: auto; display: block; text-align: center; padding: 12px; color: #fff; position: relative; font-size: 18px; font-weight: 500;}
#close_welcome_bar {display: inline-block; cursor: pointer; padding: 12px; position: absolute; top: 0px; right: 0; font-weight: bold; font-size: 18px;}
.addthis_sharing_toolbox {clear:initial!important;}
#close_welcome_bar:hover { background: #F04F3F}
#welcome_bar a{background: #fff; color: #f1ae28; padding: 8px 20px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#welcome_bar a:hover{background:#FC4F3F;color:#fff;}
.welcome-area {padding:20px;background: linear-gradient(270deg, #07d09c, #00aa7e, #c326fd, #ff08d5);
background-size: 800% 800%;
-webkit-animation: AnimationName 53s ease infinite;
-moz-animation: AnimationName 53s ease infinite;
-o-animation: AnimationName 53s ease infinite;
animation: AnimationName 53s ease infinite;}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

Step 2.
1. Ab Dubara Search box  <body>  Code ko search kare.
2.  <body>  ke niche is code ko paste kar de.

 

<div class=’welcome-area’>
<div id=’welcome_bar’>
Blognetbook notification bar <a href=’Paste URl Here‘ target=’_blank’>Check This</a>
<span data-target=’#welcome_bar’ id=’close_welcome_bar’>×</span>
</div>
</div>

Customization:-
1. Paste Your URl Here ki jagah par aap notification bar me jo link add karna chate hai wo add kar de.
2. Aur Blognetbook notification bar ki jagah Par Url Ka title add kare.

Step 3.
1. Ab Ctrl+F dabakar Search box  </body>  code serach kare.
2. Ab </body>  se phale Is script ko paste kar de.

 

<script>// Welcome bar
var button=document.querySelector(“#close_welcome_bar”);button.addEventListener(“click”,function(){var t=document.querySelector(button.getAttribute(“data-target”));t.style.display=”none”==t.style.display?”block”:”none”});</script>

Finally ab aapke blogger website me stylish Notification bar ya welcome bar add ho jayga. Is best notification bar ko stylish design me ready kara gaya hai. Aur mobile Ke liye full responsive hai.

Blog website ke other customization or blogger widget ke liye hamre blogger widget aur blog design categories wale post read kare

Blog website me stylish notification bar kaise add kare iske bare me aapko ye post kaise lagi comment karke jarur bataye.

Aur is post ko social media aur other blogger ke sath jarur share kare.


 Popular post:-

Similar Posts