Add Notice Widget For Text Highlighting in Blogger?

Add Notice Widget For Text Highlighting in Blogger?

Comments: 6
data:blog.title
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(http://1.bp.blogspot.com/-MRf2IqLzoig/VRBK0OELMGI/AAAAAAAAKfk/H0Hjl7a7Y6o/s1600/BS%2BNotice.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.

Speak Your Mind

Do you Mean ]]> ?

Thanks bro.. I have forgot to add the that. Just updated the code with ]]>

vai note text er color white korbo kivabe?

Please change the below color code

color:#000000;

with

color:#FFFFFF;

text will be white now.

very good,thanks
please take look on my blog : http://adel-tech.blogspot.com/

Sorry Bro I don't know arabic

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *