TNB Notification Style Using HTML, CSS and Javascript

I would like to share a simple and clean notification message style for adding it on your blog or website. There are a lot of ways to shown notification message to users but this notify shows the message and disappears within second. This notification is created using CSS, Javascript and HTML code.

How it works: Everytime you reload the blog the message will popup at the side of your navbar or header, In my blog i have added text to it Welcome to TheNextBlogs you can add your own text to it some of the advantages using TNB notification are you can even remove the text and add Facebook, twitter or google+ button script to it.

Adding The TNB Notification In Template:-

Go to your Blogger Blog > Templates > Edit HTML

Find the ]]></b:skin> tag and before it add the TNB notification CSS style.

#Tnb-Notification {
display: block;
position: fixed;
top: 10%;
left: -50%;
margin: 0;
z-index: 999;
}

#Tnb-Notification b {
position: relative;
top: -5px;
padding-top: 5px;
padding-left: 16px;
padding-right: 8px;
padding-bottom: 8px;

color: $basecolor;
font-family: $basefont;
font-size: 1.5em;

background-color: $green;
}

#Tnb-Notification span {
padding: 10px;
vertical-align: top;

color: $dark;
font-family: $basefont;
font-size: 1.2em;

background-color: $basecolor;
box-shadow: 8px 5px 20px -5px rgba(0,0,0,0.5);
}

*, *:before, *:after {
box-sizing: border-box;
}

Next step lets add the HTML tag after the <body> tag in your template or anywhere you want it to appear.

<div id='Tnb-Notification'>
<b>! </b><span>Welcome to TheNextBlogs!</span>
</div>

The last and the final part is to add the Javascript code. You can add this before the </head> or </body> tag in your template.

<script>
//Tnb-notification
$(document).ready(function() {
$("#Tnb-Notification").delay(2000).animate({
"left":"0px"
});

$("#Tnb-Notification").delay(4000).animate({
"left":"-50%"
});
});
</script>

Now save your template and reload you blog to see how it works and you are all done.

Pages

Tuesday, September 2, 2014

TNB Notification Style Using HTML, CSS and Javascript

6 comments: