Friday, October 12, 2018

October 12, 2018

How to add floating Notification Bar for blogger

Hello my friends!!

How to add floating Notification Bar for bloggerToday with that post we discuss about How to add floating Notification Bar for blogger.
 
Like you, I am also start my blog site ( www.thewonderspot.com) as a hobby. Yes, most Bloggers start a blog sites as a hobby. Also most of people interest to start a blog site for make friends, online store sales and make money. Whatever reason we started or would like to start a blog site.  With the time we try to improve our blog’s traffic, appearance and content. If you want to get more traffic for your blog site, you need to attract more readers for your web or blog site. In that point as well as the content in your blog, the appearance or layout of your blog or web site also done a great job. 


So as a blogger we try our best to make our blog sites more professional and attractive than others. So we like to add more functionality to our blog site. Because of that reason most of bloggers would like to use customized or third party template for their blogs more than the classic or default templates. Also some bloggers interested to used their own build blog template.  However, by using some HTML and CSS codes we can be doing some customization and modifications for our blog layout.  For that not required professional knowledge about HTML or CSS coding. We can be doing modifications or customization to both default blogger template and customized templates.

In that point most of bloggers interested to add some modifications like, add floating/fixed header, add floating/fixed menu bar, add floating banners and add floating notification bar. By adding additional Html and CSS codes and java scripts you can do that customization without any issue to blog site layout. Floating an object is done by fixing its position using a JavaScript code. However, we need to define which parts of the blog page you need to float. After define the part we can easily build up our code.
Already we discuss about
1.       How to add floating/fixed header for blogger
2.       How to add floating menu bar for blogger

Today we discuss about How to add floating Notification Bar for blogger

How to add floating Notification Bar for blogger.

Why we need notification bar?

We can use that notification bar for many things. Like,
  •      Embed an email signup form
  •      Link to an important page or post
  •      Link to a social profile
  •      Inform the important news or notifications for readers.
  •      For advertising purpose
  •      Help to Mobile SEO
  •     To show up the recent articles or popular posts.
  •       Best way to highlight and attract to affiliate deals, direct links and offers.
  •       To grow your followers in particular social media.

I think those notifications bars are better than popups because popups are intrusive and cover up all content of our blog pages. Also sometimes it causes to slow dawn our page speed time too. But notification bars aren’t like that. Notification bars are attractive and user friendly more than pop ups. Ok. then let see,

How to add a notification bar for your blogger

There are two ways you can add a notification bar to blogger
01.   Using the third party app like Hellobar. Its free and customizable.
02.   You can add your own custom notification bar using HTML and CSS code. Just only you have to do code it and copy paste.

Today we discuss about how to add your own custom notification bar using HTML and CSS code. We can use several methods for that task.The biggest benefit of that notification bar is, that floats or show our desired notification on the web or blog page while you scrolling. Floating notification bar will attract all of your visitors to show the desire notification that you want.

Method 01
By following 2 step process you can complete that method.

Step 01
01.   Log into your blogger blog
02.   Go to Blogger Dashboard
03.   Go to Template
04.   Then click Edit HTML Button
05.   Now find for  ]]></b:skin>  ( click Ctrl+F )
06.   Paste the below codes before or above  ]]></b:skin>

/*-------------- Floating Notification Bar start ----------------*/
#bloggernotificationBar {
    display: none;
    height: 41px;
    margin: -41px 0 0;
    padding: 0;
    position: fixed;
    width: 100%;
    z-index: 999999;
}
#bloggernotification {
    background: none repeat scroll 0 0 #000000;
    border-bottom: 3px dotted #FFFFFF;
    border-radius: 10px 13px 7px 5px;
    color: #FFFFFF;
    font-family: arial,sans-serif;
    font-size: 14px;
    font-weight: bold;
    height: 37px;
    margin: -30px 5px 5px -1200px;
    padding-top: 7px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
    width: 500%;
    z-index: 9998;
}
#bloggernotification a {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
    color: #000000;
    font-family: Calibri,sans-serif;
    font-size: 13.5px;
    padding: 1px 7px;
    text-decoration: none;
}
#bloggernotification a:hover {
    text-decoration: underline;
}
#bloggernotification img {
    display: none;
}


Step 02
01.   Again go to Template
02.   Find for <body> tag
03.   Now paste the below code just after <body> tag

<div class='openbloggernotification' id='bloggernotificationBar' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
Type Your Floating Notification Bar Message here
</div>
</div>

04.   Now save your Template.


Method 02
With that bar you can apply Transparent floating notification bar with close button. If readers wanted to get rid from the notification bar, then readers can close it easily by clicking on close button.

01.   Log into your blogger blog
02.   Go to Blogger Dashboard
03.   Go to Template
04.   Then click Edit HTML Button
05.   Then search for </body> tag. ( Click Ctrl+F )
06.   Now, copy and paste below code just before or above it.


<!—Floating Notification bar code start -->
<style type='text/css'>
#ut-notibar
{
background:url(&#39;http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/s1600/ut-bg.png&#39;)
  repeat;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 1px solid #fff;
height:28px;
font-size:13px;
position:fixed;
bottom:0;
z-index:999;
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
}
#ut-notibar:hover
{background:#333;}
#ut-notibar p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-notibar p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
</style>
<div id='ut-notibar'>
<p> Type Your Floating Notification Bar Message here
<a href='http:// https://www.thewonderspot.com' 
target='_blank'>Click here</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>
<!-- End of floating Notification bar -->

07.   Click on the save button.

Replace your message with Type Your Floating Notification Bar Message here
Replace your URL with  http:// https://www.thewonderspot.com
To change color, edit the red color highlighted code as you prefer.

** Without editing your Template and style sheets your can add above codes directly into the HTML/JavaScript gadget.

Ok, by following one of the above method you can easily add a floating notification bar for blogger. That will help to attract more readers to your notification, message, direct link, social media, affiliate deals or offers.
Now I think you have a better understand about How to add a notification bar for your blogger.
Enjoy Blogging.


For more reading THEWONDERSPOT

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>

Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

How to start a Blog?.....................................................................................................................>>>

How to Choose the Best Blogging Platform, advantages & disadvantage.................................>>>

How to make your blog SEO friendly?........................................................................................>>>


All in one SEO pack for Blogger blog.........................................................................................>>>

Thank you for reading.
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger