Notification bar for blogger with description

Every blogger want to make there blog professional and they work hard on it.but somewhere they find direct widget rather than doing some coding because it is time consuming .So again i have a new notification bar in several designs with easy to setup guide.But before moving further,i will give you description that how you can make notification bar.

what is
Notification bar is used to show latest news,immediate attention by blog or website owner.

where it is placed
the top most position where you can place your bar are on-top,on-bottom,on-left(where width will be 200px approx).So that reader can easily notice these positions

which language is used

HTML,CSS 3,Jquery / javascript are used.

How to Implement
Please Follow below steps and do not skip ant step
Step 1.
open Template >> Edit HTML >> Proceed

Step 2.
Press " Ctrl + f " , Find " <body> "

Step 3.
put this code below body

HTML

<div id="not563" align="center"> 
<span style="position:absolute;margin-left:35%;" >A fore apple dream red</span> 
<img src="http://cdn2.iconfinder.com/data/icons/picons-essentials/71/up-32.png" id="up563" / > 
</div> 
<img src="http://cdn2.iconfinder.com/data/icons/picons-essentials/71/down-32.png" id="down563" />

Step 4.
Find " ]]></b:skin> " and paste below code above this.

CSS

#not563 { background: rgb(199, 44, 44); 
font-size: 20px; padding: 10px; 
border-bottom: 2px dotted rgb(255, 82, 0); 
margin-top: -5px; width: 96%; 
margin-left: 22px; height: 20px; 
box-shadow: 0px 2px 1px rgb(255, 255, 255),0px 2px 1px rgb(231, 153, 53), 
            0px 3px 1px rgb(245, 126, 46); 
border-left: 2px dotted rgb(255, 82, 0); border-right: 2px dotted rgb(255, 82, 0); 
border-radius: 0px 0px 15px 15px; z-index: 10;  } 

#up563 { margin-left:95%; margin-top: -2px; position:relative; 
} 
#down563 { display: none; z-index:10; 
box-shadow: 0px 2px 1px rgb(255, 255, 255),0px 2px 1px rgb(231, 153, 53),
            0px 3px 1px rgb(245, 126, 46); 
border-left: 2px dotted rgb(255, 82, 0); border-right: 2px dotted rgb(255, 82, 0); 
border-radius: 0px 0px 15px 15px; border-bottom: 2px dotted rgb(255, 82, 0); 
background: rgb(199, 44, 44); padding-top: 27px; 
margin-top: -21px; padding-bottom: 6px; padding-left: 5px; padding-right: 5px;  }

Step 5.
Find " </head> " and paste below code above this.

JavaScript

<script src="http://demos.way2tutorial.com/jquery-notification-bar/js/jquery.min.js"> 
</script> <script src="http://demos.way2tutorial.com/jquery-notification-bar/js/jquery-ui.min.js"> 
</script> 
<script>
$(document).ready(function()
{ $("#down563").hide(); $("#up563").click(function()
{ $("#not563").slideUp(100); $("#down563").delay(100).slideDown(50); $("#up563").hide(); }); 
$("#down563").click(function()
{ $("#not563").slideDown(100); $("#up563").slideDown(100); $("#down563").slideUp(20); }) }); 
</script>

This notification bar is free to use, use it and make your blog more effective.if have any query please use below comment box to write.Thank you:)

Notification bar for blogger with description

0 comments:

Post a Comment

Translate