Perk up Post Engagement by CSS Message Highlighter

We all know that post or content is the king of any Blog. If you have more quality content then there is a chance to keep readers engaged with your Blog. But most of us we write bigger content with monotonous design. For making a ideal content you must use graphics, quotes, test highlighter and more importantly splitting the large article into small paragraph. This gives your article a fresh looks and readers don’t feel annoying to read large article.

While writing a Blog posts then we often use different messages such as updates, alert, notification, information, warning, error etc. But we don’t use any message highlighter; as a result readers don’t notice or give any special attention on your messages. So we need to pay special attention to develop those message highlighters.

Live Demo

By adding separate color and text we can make it more eye-catching for our Blog readers. And they will love to read your content with full energy. For this reason I am going to share sets of notification message highlighter to spice up you’re your content and you will able to perk up post engagement by 30% more. Trust me!

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML->

Step 3 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Copy the script from below and Paste it above/before ]]></b:skin>

/* Notification Message Highlighter by http://www.bloggerspice.com */
.bstext{color:#FFF;margin-bottom:15px;border-radius:3px;padding:10px}
.bssuccess{background-color:#AA5CB8}
.bsalert{background-color:#5BA5DE}
.bswarning{background-color:#C619CC}
.bsupdate{background-color:#1D89E5}
.bsinfo{background-color:#18A8AA}
.bserror{background-color:#d9534f}
.headertext{font-size:16px;background-color:rgba(0,0,0,0.30);padding:8px 10px;margin:-10px;margin-bottom:10px}
.headertext > .fa{margin-right:5px}
.bloggerspice {overflow: hidden;}

Step 5 Now again find the </head> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 6 Copy the script from below and Paste it above/before </head> 

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Step 7 hit the Save templatebutton from the top.

You have successfully added CSS script now go for HTML script. 

Highlighting the Notification Message

After implementing the CSS script now we have to add HTML script for highlighting the specific text. In Blogger we can do it by switching the Blog Post writing editor into HTML view.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click the New Post button from the top.

Step 3 Now from post editor click on HTML button.

Step 4 And Copy any script from below and Paste it there.

<div class="bloggerspice bsupdate bstext" icon="info-circle" title="Update message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-bullhorn"></i>Update message</div>
This is a Sample Message for Update Box.</div>
</div>

<div class="bloggerspice bsalert bstext" icon="info-circle" title="Alert message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-cut"></i>Alert message</div>
This is a Sample Message for Alert Box. </div>
</div>

<div class="bloggerspice bssuccess bstext" icon="check-circle" title="Success message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-check-circle"></i>Success message</div>
This is a Sample Message for Success Box. </div>
</div>

<div class="bloggerspice bswarning bstext" icon="exclamation-triangle" title="Warning message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-exclamation-triangle"></i>Warning message</div>
This is a Sample Message for Warning Box. </div>
</div>

<div class="bloggerspice bsinfo bstext" icon="info-circle" title="Info message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-info-circle"></i>Info message</div>
This is a Sample Message for Info Box. </div>
</div>

<div class="bloggerspice bserror bstext" icon="exclamation-circle" title="Error message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-exclamation-circle"></i>Error message</div>
This is a Sample Message for Error Box. </div>
</div>

Customization

• Please replace the text with your notification message.  

Step 5 Finally hit the Publishbutton to publish your article.

Now check your Blog post and see beautiful notification message highlighter box. I am sure this will help to perk up post engagement and you will notice that soon. Thank you.