How Add Custom CSS Notification message highlighting boxes.

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.

Follow Blow Step:

1. Login to your Blogger account, go to Blogger dashboard, click the arrow adjacent to 'Go to post list icon' and select 'Template' from dropdown menu. You can also select the 'Template' from left navigation menu.
2. Click 'Edit HTML'.
3. Search for (Ctrl+F) </b:skin> and paste (Ctrl+V) the following code before </b:skin>

 /* Notification Message Highlighter by 4tipsbd */
.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}
  

4. NowSave template

[warning title="Warning message" icon="exclamation-triangle"] You have successfully added CSS script now go for HTML script[/warning]

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

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

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

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

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

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

If you have any questions on this, please let me know. Happy blogging.