Create Sticky Floating Bar Fixed at top in blogger’ blog

क्या
आपने देखा है कि कुछ popular
websites अपनी
site पर sticky Floating bar  का इसतेमाल करती हैं जहां वे नवीनतम घोषणाएँ या ब्लॉग, ब्लॉग पोस्ट, privacy
policy में किए गए
बदलाव या कुछ महत्वपूर्ण पदों को अपने उपयोगकर्ताओं को बता सकती हैं। वे अपने
उपयोगकर्ताओं को सोशल नेटवर्किंग साइटों पर आपका अनुसरण करने के लिए भी कह सकती हैं।

क्या आप भी अपने ब्लॉग के लिए Floating bar चाहते है ?

हमने इस sticky Floating bar को
टॉगल फीचर के साथ बनाया है जहां आपके उपयोगकर्ता अपनी इच्छा के अनुसार इस sticky बार
को दिखा या छिपा सकते हैं । 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
 *{
   margin:0px;
   padding:0px;
   box-sizing: border-box;
 }
        
 :root{
    --HUBpro_BG_Color: #000; 
    --HUBpro_Font_Color: #FFF;
 }
    
#HUB_notification {
min-width: 100%;
max-width: 100%;
margin:0px!important;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:100;
text-align: center;
min-height: 45px;
max-height:45px;
overflow: hidden;
background-color: var(--HUBpro_BG_Color);
box-shadow: 1px 2px 9px #1B1B1B;
border-bottom: 2px solid #1B1B1B;
}
    
.HUBpro_Notifications_innerWrap {
text-decoration: none;
color: #FFF056;
font-family: oswald, arial, sans-serif;
font-size: 13px;
font-weight: bold;
margin-top: 14px;
position: relative;
}
        
.HUBpro_All_Notifications{
 margin-left: 80px;
 margin-right: 80px;

 }        

.HUBpro_All_Notifications a {
text-decoration: none;
color: var(--HUBpro_Font_Color)!important;
text-shadow: 0px 0px 2px #242729!important;
font-size: 14px;
}
.HUBpro_Notification_HeadLines {
margin-left: 10px;
}
.HUBpro_Notification_HeadLines a:hover {
border-bottom: 1px dotted #FFF056;
}
        
#button { 
position: fixed; 
top: 0px; 
right: 15px;
z-index: 999999999999; 
font-size: 25px; 
color: var(--HUBpro_Font_Color); 
cursor: pointer; 
padding: 10px 10px;
min-height: 40px;
max-height:40px;
width: 40px;
}
        
#HUB_id { 
position: fixed; 
top: 1px; 
left: 10px;
z-index: 999999999999; 
font-size: 19px; 
color: var(--HUBpro_Font_Color); 
cursor: pointer; 
padding: 10px 10px;
min-height: 40px;
max-height:40px;
opacity: 0.4;
}
    
#HUB_id a{ 
color: var(--HUBpro_Font_Color);
text-decoration: none;
font-weight: bold;
} 

#HUB_id:hover{
  opacity: 1;          
}
        
.open{
overflow: hidden;
background: var(--HUBpro_BG_Color);
min-height: 40px;
max-height:40px;
border:unset!important;
position: fixed; 
top: 0px; 
right: 15px;
border-left: 2px solid #1B1B1B;
border-right: 2px solid #1B1B1B;
cursor: pointer;
width: 40px;
z-index: 999999999999;
font-size: 25px!important;
border-radius: 0px 0px 5px 5px;
box-shadow: 1px 2px 9px #1B1B1B;
border-bottom: 2px solid #1B1B1B;
padding: 8px 8px;
color: var(--HUBpro_Font_Color); 
}

</style>

<span id='button' class='fa fa-arrow-up' aria-hidden='true'></span>

<div class='HUB_notification' id='HUB_notification'>
<span id='HUB_id'><a href='http://www.hubpro.in/' title='HUBpro'>HUBpro.in</a></span>
    <div class="HUBpro_Notifications_innerWrap">
        <div class="HUBpro_All_Notifications">
            <span class="HUBpro_Notification_HeadLines">
            
            <i class="fa fa-line-chart" aria-hidden="true"></i> Trending Today: <a class="HUBpro_Notification_text" href='http://www.hubpro.in'>HOME</a> 
            
            </span> 

            <span class="HUBpro_Notification_HeadLines"><i class="fa fa-bullhorn" aria-hidden="true"></i> Announcement:  <a class="HUBpro_Notification_text" href='#'>Like Us On Facebook</a> </span>
            </div>

        </div>

</div>

<script type='text/javascript'>       
   $(function() {         
$('#button').click(function(e) { 
                
    if ($('#HUB_notification').is(':visible')) {   
     $(this).removeAttr("id").removeClass("fa fa-arrow-down").addClass("open fa fa-arrow-down"); 
     $('#HUB_notification').fadeToggle(); 
    } else { 
    $(this).attr("id", "button").removeClass("open fa fa-arrow-down").addClass("fa fa-arrow-up"); 
    $('#HUB_notification').fadeToggle(); 
    } 
    });     
});
       
</script>

<span class="HUB_Notification_HeadLines"><i class="fa fa-bullhorn" aria-hidden="true"></i> Your Heading:  
<a class="HUB_Notification_text" href='#facebook.com/hubpro.in'>
Like Us On Facebook
</a> 
</span>

#000