Home
Blogger

Add Notice Widget For Text Highlighting in Blogger?

Add Notice Widget For Text Highlighting in Blogger?
notice widget

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: 


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/AVvXsEj6I9ggl9fnav-c2hk2eaEQx4KDLqqzf49gaBlP7CwhvI-8hXZiXAzEOoV-LPJn6p_EBVcxfscBDGAM7GYLbt5fJi40vvqsyBoQicezqHEnpyWoHG4Oim1AxFlgNjW2nUeYS_qe-iDnhfFh/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 Save template 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-
HTML view

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


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

5 comments

  1. Do you Mean ]]> ?
    • Thanks bro.. I have forgot to add the that. Just updated the code with ]]>
  2. vai note text er color white korbo kivabe?
    • Please change the below color code

      color:#000000;

      with

      color:#FFFFFF;

      text will be white now.
Go Up