Perk up Post Engagement by CSS Message Highlighter
How to use Custom CSS Notification message highlighting boxes to keep engage readers with your Blog?
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.
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 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.
<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 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.
2 comments