Add A Sticky Floating Notification bar On Blogger - UNPLUG.DOC

In this article, I'll show you how to add a floating notification bar to your Blogger website.

The attached notification bar on the website helps us increase conversions to important pages and you can easily redirect visitors to your social media accounts. You can also display special offers to your website visitors.

It will stick to your site at the top or bottom and will easily be rejected by users. And the best part is that you can easily use this on your blogger website by following this tutorial.

This floating notification widget is composed of simple HTML and CSS and does not include any external libraries, which are the main reason for slow loading speeds.

This way you don't need to worry about page speed after using this code.

I've already shot a video on how to add a notification bar to your Blogger website and customize it to match your theme's color and fonts.

And all the necessary code for this widget will be shown below.

How to Add a Stylish Floating Notification Bar to Blogger

To add sticky floating notification bar to Blogger, you need to follow these steps.

• Step 1. Go to your Blogger dashboard and open the theme section.
• Step 2: Now click the drop down menu and back up your theme.
• Step 3: After that click on the edit html section and find the </body> tag.
• Step 4: Now paste the below code just above this code.
• Step 5: After that, change the display text, button text and link and save the code.

BODY CODE

<style type='text/css'>
    #key2sticky {
        background: #162536;
        color: #fff;
        text-align: center;
        margin: 0 auto;
        border-top: 3px solid #E26A5C;
        height: 35px;
        font-size: 16px;
        position: fixed;
        top: 0;
        z-index: 999;
        width: 100%;
        /*border-top-left-radius: 10px; */
       /* border-top-right-radius: 10px; */
        display: flex;
        /* font-weight: bold; */
        /* font-family: &quot;Arial&quot;; */
        font-color: #fff;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 7px 0px 7px 0px;
    }
    #key2sticky:hover {background:#111;}
    #key2sticky p {
        line-height: 5px;
        font-size: 15px;
        text-align: center;
        width: 95%;
        float: left;
    }
    #key2sticky p a {
        color: #ffffff;
        /* border: 2px solid #ffffff; */
        padding: 6px;
        margin-left: 10px;
        background: #e26a5c;
        border-radius: 30px;
        font-weight: bold;
    }
       .k2cross-btn {
        display: block;
        position: relative;
        right: 10px;
        float: right;
    }
    .k2cross-btn a {
        font-size: 18px;
        font-weight: bold;
        /* font-family: &quot;Arial&quot;; */
        color: #ffffff;
        line-height: 30px;
    }
    @media screen and (max-width: 480px){
    #key2sticky p {
        line-height: 4px;
        font-size: 12px;
        text-align: center;
        float: left;
    }
    }

    </style>
      
    <div id='key2sticky'>
    <p>Join Our Blogger Website For Updates <a href='https://unplug-document.blogspot.com/' target='_blank'>Click Here</a></p> <div class='k2cross-btn'><a href='javascript:hide_cross();'>X</a></div>
    </div>
    <script>
    function hide_cross() {
    crosstbox = document.getElementById(&quot;key2sticky&quot;);
    crosstbox.style.visibility = &#39;hidden&#39;;
    }
    </script>

Your floating notification bar will now be added to your blogger site.

Now you can customize it as you like. for example, you can move this notification bar up or down and it stays in that position.

You can also change the background color, text color, button color, and the width and height of the notification bar. Just follow the methods shown in the video above.

I hope you have successfully added the sticky notification bar to your Blogger website.

If you encounter any problem, feel free to ask me in the comments section or ask in our

The social media widget is now fully built and working correctly if you follow all the steps correctly. If you have questions or steps that you do not understand, please write down the questions and concerns in the comment column below.