Creating a Link Blog Subscribe in Blogger Navbar

Navbar is the very top of the bloggers. Blogger navbar can we modify itself, and we form our at will. In this post, we will learn how to make a link subscibe blog on blogger navbar with javascript.

With homemade navbar, we can fill it with the menu or the writings and links are desired.

Blogger Navbar Create Blog Subscribe

1. Log in to blogger dashboard, and go into design, and edit html
2. Put the code below before <div id='outer-wrapper'>

    <div id='message_box'>
    <div id='box_rss'> <img align = 'absmiddle'
    <span>
    <Img alt = "Blogger Afif - Closed Nav 'id =' close_message 'style = 'float: right; cursor: pointer; "/>
    Subscribe <strong> article: </ strong> <a href='http://feedburner.google.com/fb/a/mailverify?uri=bloggerafif&loc=en_US' rel='nofollow'> Bloggerafif Update article via feed </ a> </ span>
    </ Div>

    <script type='text/javascript'>
    / / Developed by Roshan Bhattarai
    / / Visit roshanbh.com.np for this script and more.
    / / This notice MUST stay intact for legal use
       
    $ (Document). Ready (function ()
    {
        / / Scroll the message box to the top offset of the browser's scroll bar
        $ (Window). Scroll (function ()
        {
              $ ('# Message_box'). Animate ({top: $ (window). ScrollTop () + "px"}, {queue: false, duration: 350});
        });
        / / Pls close button at the right corner of the message box is clicked
        $ ('# Close_message'). Click (function ()
        {
              / / The messagebox gets scrool down with the top property and gets hidden with zero opacity
            $ ('# Message_box'). Animate ({top: '+ = 15px ", opacity: 0}," slow ");
        });
    });

    </ Script>

3. Add the following CSS code before ]]></ b: skin>

    # Message_box {position: absolute; top: 0; left: 0; z-index: 10; background: # ECEEF5; padding: 5px; text-align: center; font-weight: bold; font-size: 12px; width: 99%; color: # 3B5998;}
    # Box_rss {padding-top: 15px; display: inline;}
    # Message_box a: hover {text-decoration: underline;}
    # Message_box a: visited {color: # C54E0B}


4. Save your template.

Excess create blogger navbar like this is that it will always move navar mengikti your browser window,

Posted in: blog, blogger, tutorial