Wednesday, March 14, 2018

How to Stylish Notification bar On Blog Website

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 blog me add karte hai. kas kar ye blogspot blogger ke liye useful sabit hogi.


Is post me janege ki blogger website me 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

notification bar for blog website how to add




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 kaise add kare

Facebook messenger chat widget kaise add kare.
Stylish blogger Author box for blog website

Notification bar ya welcome bar ka demo dekhne ke liye demo button par click karke demo dek skate hai.

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>  saerch 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 serach 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 saerch 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 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 webstie me 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:-




About Author:-author Hello everyone my name is sultan i am sharing in this Blog About Blogging And technology Make Money online, Web Design, Internet Tips And tricks Etc Unique Article Everyday. Learn something new here....

Let's Get Connected:- Facebook | Twitter | Google Plus

0 comments: