Add Fancy Notification Boxes in Blogger (with 4 styles)

Add Fancy Notification Boxes in Blogger

Notification boxes are a great way to update your visitors with new updates to your blog posts. You can write an important message in the notification box or you can also write a disclaimer in an alert box for your readers.

It didn't take me more than 2 hours to design these responsive and fancy notification boxes for Blogger. I will surely be using them from now on in my blog posts and I am giving them to all Blogger or Blogspot users completely free!

The good news is these message boxes are responsive and have 4 different styles such as success, alert, warning and error message. Now let's get to work and add these fancy notification boxes in blogger:

Notification Boxes in Blogger

Add Fancy Notification Boxes in Blogger:

In this tutorial we will add four different notification boxes: success, alert, warning, error. I used amazing Oswald font and Font Awesome icons for giving fancy touch to our notification boxes. So first we will add their source links in our template then we will add CSS and ultimately I will share HTML for each box that you will use while writing your blog post.

The Source Links:

  • Go to your Blogger account > Theme > Backup Template.
  • Click on Edit HTML
  • Search for <head> tag and just below that tag paste the following source links to Font Awesome and Oswald
  <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>  
Note: You can skip this step if you have already added these fonts in your template!

 

The CSS:

  • Now search for ]]> </b:skin> (Hint: Click anywhere in the code and press CTRL + F for find box to appear! ) 
  • Above that tag paste the following CSS code.
/* Styling Notification boxes TopEarningBoy*/
.teb-alert-message{position:relative;display:block;
  padding:20px;margin:20px 0;border:1px solid;font-family:oswald; box-shadow: 0 8px 6px -6px #ccc; font-size:18px;}

.teb-alert-message p{margin:0px !important;padding-top:5px;
  line-height:24px;}

.teb-alert-message span{font-size:21px !important; 
  text-shadow: 2px 5px 3px rgba(0,0,0,0.2); padding-right:5px;}

.teb-alert-message.success{background-color:#ffbd4a;
  border-color:#cc973b;color:#805f25}

.teb-alert-message.success a,.teb-alert-message.success span{color:#805f25}

.teb-alert-message.alert{background-color:#5271ff;
  border-color:#3d53bc;color:#253374}

.teb-alert-message.alert a,.teb-alert-message.alert span{color:#253374}

.teb-alert-message.warning{background-color:#fff952;border-color:#beb93d;color:#6d6b23}

.teb-alert-message.warning a,.teb-alert-message.warning span{color:#6d6b23}

.teb-alert-message.error{background-color:#d24c4c;border-color:#ab3e3e;color:#592020}

.teb-alert-message.error a,.teb-alert-message.error span{color:#592020}

.teb-fa-check-circle:before{content:'\f058'; font-size:30px; padding-right:10px;text-shadow: 2px 5px 3px rgba(0,0,0,0.2);}

.teb-fa-info-circle:before{content:'\f05a'; font-size:30px; padding-right:10px;text-shadow: 2px 5px 3px rgba(0,0,0,0.2);}

.teb-fa-exclamation-triangle:before{content:'\f071'; font-size:30px; padding-right:10px;text-shadow: 2px 5px 3px rgba(0,0,0,0.2);}

.teb-fa-exclamation-circle:before{content:'\f06a'; font-size:30px; padding-right:10px;text-shadow: 2px 5px 3px rgba(0,0,0,0.2);}
 

  • Save your template!

The HTML:

Success box Blogger

<div class="teb-alert-message success">
<i class="fa teb-fa-check-circle"></i><span>Success message!</span>Your Message goes here!</div>

Alert Box

<div class="teb-alert-message alert">
<i class="fa teb-fa-info-circle"></i><span>Alert message!</span>Your Message goes here!</div>

Warning Box

<div class="teb-alert-message warning">
<i class="fa teb-fa-exclamation-triangle"></i><span>Warning message!</span>Your Message goes here!</div>

Error box blogger

<div class="teb-alert-message error">
<i class="fa teb-fa-exclamation-circle"></i><span>Error message!</span>Your Message goes here!</div>

  • Now while writing blog post, you will switch to the HTML mode and paste any of these codes.
  • Replace Your Message goes here with your custom message.

Over to you!

Need any kind of help, feel free to contact or comment in the section below. Hope these fancy notification boxes enhance your blogging experience. Add the boxes in your blogs and let me know in the comments. Thanks for taking out time and reading my tutorials. May Allah bless you all!

If you like our tutorials then don't forget to follow us on Facebook and Twitter. We are always active to help and live up to your expectations!

No comments:

Powered by Blogger.