Sunday, July 14, 2013

Add Simple jQuery Notification Bar To Blogger Blog

Author: Gagan Masoun
jQuery Notification BarInstall notification bar on your blog and increase affiliate sales or show famous blog posts. Today, I will show you how to make your own notification bar with easy steps. You can add popular links, social site links in notification bar or any important message which you want to give to your readers. You can use Hellobar to make notification bar. But after installation you will see the Hellobar site link on the right side of this bar. Follow this tutorial to add it now:

Install Jquery Notification Bar

  • Go To Blogger Dashboard > Design > Edit HTML (For New Interface Templates > Edit HTML)
  • Backup Your Template Before Making Any Changes
  • Click (Ctrl + F) Search </head>
  • Just Above It Paste The Following Code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
  <script src='https://blogsdaddy.googlecode.com/files/notification.js'/>
  • Now, Search For <body> In Template
  • Add the Following Script Right Below It.
<script>
    $(function () {
        $.jBar({
            type: 'fixed', // fixed/static
            delay: '1500', // Entrance delay (milliseconds)
            backgroundColor: '#de2b08', // Background Color
            borderColor: '#FFF', // Background Color
            buttonTextColor: '#FFF', // Button Text
            buttonColor: '#2c2c2c', // Button Color
            buttonColorHover: '#525252', // Button Color Hover
            calltoAction: 'Your Text Goes Here', // Call to action text
            buttonText: 'Get it Now!', // Button Text
            buttonLink: 'Your Link URL Goes Here' // Hyperlink from button
        });
    });
    </script>
  • Save Your Template & It's All Done!

Make These Changes

Customize this widget to make it perfectly geared with your Blogger blog template
  • background color:  #de2b08
  • border Color: #FFF
  • buttonTextColor: #FFF
  • button Color: #2c2c2c
  • buttonColorHover: #525252
  • calltoAction(message): Your Text Goes Here
  • button Text: Get it Now!
  • button Link: Your Link URL Goes Here
We was created lightweight widget for blogger blog to allow easy implementation and customization for you or your client’s sites. After adding this plugin on your blog you're to free to use it. We will come with more wonderful tutorial's soon. Stay Blessed and Keep In Touch :)

2 comments:

  1. that's awesome explanation. Notification bar for blogger is always a professional
    look of thinking. Thanks for sharing.

    ReplyDelete
    Replies
    1. Happy to read your comment here. Keep in touch with us

      Delete