Add Notice Widget For Text Highlighting in Blogger?

Notice widget is essential for adding any special notes or message. Typical notice widget can be seen in yellow color background with a pen or pencil. This widget is Ideal for highlighting any 2/3 line plain text. This is just for grabbing attention of the readers. I have already share notice widget and in this tutorial I am going to share another one. I hope you would love it.

Recommended: How to add special note or notice text widget in Blog post?

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

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

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

Step 4 Copy and Paste any code from below code above ]]></b:skin>

.notice{
border:5px solid #0472DF;
margin:5px 0px 10px 0px;
padding:10px 10px 10px 60px;
background:#6EE4F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8GNsKy9Kv1o3gs-v4VtOILtrVlhNv74PAgUE6oQ8gAEwvaenuGcNBhaBNewAUiypg6A1uhG1EmCZZjAuFA_ub3M7jSgFf_y1FQTz3JC_bsU8yU0zLvKXLJGP-sDKBeb-G2Zp_h9uuuyMo/s1600/BS+Notice.png);
background-position:left;
background-repeat:no-repeat;
width:90%;
text-align:justify;
color:#000000;
word-wrap:break-word;
font-style:bold;
font-size:14px;
font-weight: bolder;
font-family:Helvetica, Arial, sans-serif;
border-radius:10px;
-webkit-border-radius:1.0px;
-moz-border-radius:1.0px;
-o-border-radius:1.0px;
-ms-border-radius:1.0px;
border-radius:1.0px;
}
.notice:hover
{
-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */
box-shadow: 5px 5px 45px #B8D5E3;
}

Step 5 hit the Savetemplate button.

How to make this widget work?

For make this widget work you have to add the code in HTML view while writing a post. Just write a post and from Post Editor Select HTML mode. Now add the below code-

<div class="notice">Paste Your Note/Text Here</div>

Customization

Alter Paste Your Note/Text Here with your note or notice text. After complete your writing switch HTML view to Compose view and publish your post.

Now check your Blog Post and see your note or notice has highlighted like above image.