Plugins Tutorials

How to add a Notification Bar Strip on WordPress Powered Website

Pinterest LinkedIn Tumblr

Most of of the Website owners display ads or run a promotional campaign on the top or at the bottom of the Website. Such kind of notification must be stick on top of the content without disturbing them but if you are using WordPress, its very easy to manage Notification bar by using WordPress plugins, I will provide the best WordPress plugins for Ad bar, as well If you don’t like WordPress plugin to distract your site, you can still run a Ad or Notification bar by using the following piece of code and instruction from “Put a Floating Ad Bar Strip on Your WordPress Site“. Although with Hello Bar you can drive more attention to your most important website content with the cost of Hello Bar promotion same as with other WordPress Plugins. But with premium Plugin like Fading Menu with Notification Bar and Social Icons, You can set the text manually (with a simple text editor that will allow you to add links and change color on the fly), or set it to always show your latest tweet, facebook notification and important content. This will allow you to always have an up to date notification bar with your latest news.

WordPress Notification bar ad strip

Adding a Floating Notification Bar 

In case, if you don’t like WordPress Plugin, you can add the following snippet after the </head> tag. Go to Appearance > Edit and select your header.php file and add the following piece of code above the <body> tag:

<div id="notification-bar">
<a href="http://www.wparena.com/">Drive more attention to your most important website content </a>
</div>

Style Your Notification Bar

< /hr>
You must give some style to your ad strip, otherwise  it will not float properly when the site visitors scroll down the page and it will display as a text link, so it is very important to give a style to it as follow, open your theme style sheet file(style.css) and add the div class into it and save the file:

#notification-bar {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  margin-bottom:15px;
  background-color: ##FFF9B8;
  color: #333;
  border-bottom: solid #000000;
  padding: 5px 0 5px 0;
  text-align: center;
  font-size: 12px;
  font-family: Georgia, "Times New Roman;
  font-weight: bold;
}

If you have activated admin bar for yourself and user, better to disable it, so it will not disturb your important content on ad strip. If you have different user roles on your site and want to manage their layout for Admin bar, than you can use WP Custom Admin Bar: This gives you options to change who sees the Admin Bar based on their user role, change or override the default styling or remove the Admin Bar altogether.

 WordPress Header / Footer Notification Bar Plugins

Fading Menu with Notification Bar and Social Icons

WordPress fading css3 menu plugin

Fading Menu with notification Bar is a WordPress Plugin that will allow you to add your navigational menu (main menu or custom menu defined by you) along with notification bar at the top of your browser. Simply scroll down your browser a bit to see it in live action!

uAnnounce – Premium Announcements for WordPress

uAnnounce WordPress plugin

uAnnounce is a Premium Announcement plugin for WordPress. The announcements are thin colored stripes that contain a message and appear at the top of the page. uAnnounce allows you to schedule announcements to appear on your blog, you can use this to draw your visitors’ attention to an important message you may have. It supports a wide range of conditions that influence on which pages, blog posts and/or to users with which particular browsers the announcement should be displayed. It also features multiple skins to cover the basic announcement types, such as Alert, Error, Warning, Info.

Live preview | Detail

Foobar – WordPress Notification Bars

Foobar - WordPress Notification Bars

The Foobar is a plugin for WordPress that allows you to add a highly customizable bar to the top of your blog or website. You can display different notifications on different pages and define a default bar that will display on all your pages.

Live preview | Detail

attentionGrabber: WordPress Notification Bar

attentionGrabber is a plugin for WordPress that allows you to add a notification bar to your website.
With this plugin you can easily display custom texts, Twitter posts and Feeds RSS . Also, the huge list of features lets you fully customize the notifications look.

Widgetized Stickybar

Widgetized Stickybar

Widgetized Stickybar is a plugin for WordPress that allows you to add a highly customizable widget bar to your blog or website. As it is said in the title, bar contains widget areas, where you can place any widgets available in your WordPress dashboard. As an administrator you decide where to stick the bar: top, bottom, right or left edge. You also can customize size, colors, opacity, number of columns and other parameters of the bar. Widgetized Stickybar is a perfect way to extend functionality of your website.

Live preview | Detail

Free WordPress Header / Footer Notification Bar Plugins

Easy Heads Up Bar

Easy Heads Up Bar

This plugin adds an easy to use notification bar to the top of your WordPress website with a linked call to action

General Display Options

  • Your Heads Up Bar appears on the top of the websites page
  • No Limit! You can create as many Heads Up Bars as you need
  • If you have multiple Bars they will show randomly
  • The Bar can be limited to just the Home Page, Interior Pages OR the can be displayed on all pages

Detail

WP-TopBar

WordPress top bar

Creates a TopBar that will be shown at the top (or bottom) of your website. Customizable and easy to change the color, text, image, and link. Live preview to see your TopBar from the Options page.

Detail

Quick Notice Bar

Quick Notice Bar

This plugin will help the admin to publish highlighted notice on WordPress site header. Any message like offline notice, update notice, tweets, special offers, latest post can be set to attract visitors in 1st sight.

Detail

ViperBar

ViperBar adds an attractive bar to your site header, which you can use to increase blog or newsletter subscribers. It includes built in styling, Aweber & Feedburner integration, conversion rate tracking, split-testing, themes, and much more. ViperChill, a blog on Viral Marketing, is the creator of this plugin. If you want to take your blog to the next level, you should read this post on WordPress SEO.

Detail

Notification Toolbar

This is a toolbar placed on the footer of your blog and it will show your custom notifications on it. This plugin is developed based on the Static Toolbar plugin.

Detail

WP Attention Boxes

Sometimes you just want to call out attention to a particular important message, or quote, or a collection of links, in a bright yellow box, or similar, in a Blog post. And you might do this a lot in your blog entries.

Detail

Foobar Lite Notification Bars

The Foobar is a cool notification / alert bar that sits at the top of the page and draws in the visitor’s attention.

features

  • A cool notification bar at the top of your site that draws the attention of the visitor
  • Options to set the message text, height and speed of the Foobar
  • Options to customize the background,text and link colors to match your theme
  • See a preview of the Foobar within the admin
  • Advanced options to help troubleshoot issues

Detail

Noor Mustafa Raza

I am a WordPress Developer and Designer, author @WPArena. I am providing Free WordPress consultation and can help you to install WordPress in a secure way to small businesses and bloggers.

Write A Comment

Pin It