Perk up Post Engagement by CSS Message Highlighter

How to use Custom CSS Notification message highlighting boxes to keep engage readers with your Blog?

2
data:blog.title
highlighting notification text

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!


CSS3 text highlighter

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 template button 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.

update message box


<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>


alert message box

<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>

success message box


<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>


warning message box

<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>

info message box


<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>


error message box


<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 Publish button 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. 
Perk up Post Engagement by CSS Message Highlighter
4 Stars stars - "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...

Post a Comment

রাব্বী ভাই আপনাকে অসংখ্য ধন্যবাদ।

Welcome Anwar vai.. onek din por apnar comment pelam. Asa kori valo acen.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *