Make Your Blog More Attractive - Tip 2

Hi friends!!! Many bloggers have started posting their views about various widgets which they wish to have on their blog via email as well as through comments. I'm happy with the response that I got for my previous post namely, Make Your Blog More Attractive - Tip 1. To all those who mailed me and made a comment, I'm working on your widgets. Soon, the steps to install those widgets will be published.
In this post, I will demonstrate on "How to add the special note tag within your blogger posts?". I'm sure you will be pretty confused about what that special note means. Basically, this idea developed from the shoutmeloud theme. Just have a look at the following picture - the " SPECIAL NOTE" tag.
THIS IS THE SPECIAL NOTE TAG
Hope you understood what I meant. This tag will be useful when you want to list your points, add sub headings to your post, etc...  

I don't want to take too much of your time. Let's get to the installation steps. Just follow these simple steps.
1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you make any changes in the template.
2. Search for the following code in your blog. You may use "CTRL+F" to fasten your search results.
]]></b:skin>
3. Paste the following piece of code just above the line mentioned in step 2 (the one you searched for).
.note{
background:#E3F0F2 url(http://lh4.ggpht.com/_So-xppeH7x0/TP3uIr_A5kI/AAAAAAAAAn0/I17mlOq2axM/s800/note.png) center no-repeat;
margin:0 auto;
width:90%;
display:block;
border:1px solid #6CC;
background-position:7px 50%;
padding:10px 10px 10px 45px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
font:bold 15px arial
}
4. Now, place the following tags in between the text which should be highlighted.
<span class="note">
</span>
For example, if you want the text "EXAMPLE" to appear as a special note tag, you need to use the following code. 
<span class="note">
EXAMPLE
</span>
I hope this will help your post more attractive. If you have any doubts in adding this tag to your post, then please leave your comments below. We love to receive your comments. So, keep them coming.

Enjoyed the article?
Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

    Other Recommended Posts

  • Blogger Tutorials
Sahil said on January 15, 2011 at 12:52 PM :

Great.... I was looking for that one!!!

REPLY
Mukund said on January 15, 2011 at 1:33 PM :

@Sahil: Thanks for the comment! I hope you enjoy this series. Subscribe to my blog so that you don't miss the updates.

REPLY
Sahil said on January 15, 2011 at 2:26 PM :

hey... you didn't update your previous post code to display number of comments!!!!

REPLY
Tiara1013 said on January 15, 2011 at 2:27 PM :

I am always looking up for new tip to enhance my blog and I was never failed through your article... Thanks a lot Mukund... Great Day!

REPLY
Mukund said on January 15, 2011 at 4:10 PM :

@Sahil: Yeah! I forgot. I found the code but forgot to update it!!! I have updated the post now!!! Please, do check it out!!!

REPLY
Mukund said on January 15, 2011 at 4:10 PM :

@Tiara1013: Thanks for the comment!! I hope I provide new tips that you expect from my blog!!

REPLY
Sahil said on January 15, 2011 at 5:36 PM :

@Mukund Thanks for the update...

REPLY
Suits said on January 17, 2011 at 1:29 PM :

New ideas were very much appreciated for my own blog. I've heard about your great tips from a friend of mine who use to subscribe on your blog and he was indeed right about it. Thanks a lot buddy!

REPLY
Mukund said on January 17, 2011 at 4:18 PM :

@Suits: I'm happy that I satisfied you and your friend as well! First thanks to your friend for referring my blog and then second goes to you. I hope you enjoy the other articles on my blog as well!!!

REPLY
Anonymous

Thanks. I like to decrease the height of the box. How can i do this.

REPLY
Mukund said on January 28, 2011 at 6:17 AM :

@Anonymous: Yeah! I can be done. Just mention height:90%; below the CSS I mentioned. Your job is done. I hope you understood. If not, email me and I will solve your issue!

REPLY
Anonymous

plz mention where i include this line. under which line

REPLY
Mukund said on January 28, 2011 at 11:05 PM :

@Anonymous: Just check the code mentioned in step 3. That block of code is CSS for this widget. So, add the line height:90%; below width:90%;. That's it buddy! You can contact me via email. Just hit the contact button on top of my blog.

REPLY
Analyst said on February 28, 2011 at 10:38 PM :

Can you show an example of the Tag for better assimilation.

REPLY
Mukund said on March 1, 2011 at 6:02 PM :

@Analyst: I have shown an example of the note tag. Have a look at the example I mentioned in the post!!!

REPLY
Amit said on April 11, 2011 at 6:03 PM :

its better from the SEO point of view that you customize the '.post h4' css in the same way than doing in this way....

REPLY
Mukund said on April 11, 2011 at 9:09 PM :

@Amit: Hmmm! I did not get what you meant! Please explain me a little more! I'm little poor in understanding!! LOL:)

REPLY
Analyst said on April 19, 2011 at 10:45 PM :

Can you show an example of the Tag for better assimilation.

REPLY
Amit said on April 19, 2011 at 10:45 PM :

its better from the SEO point of view that you customize the '.post h4' css in the same way than doing in this way....

REPLY
Amit M B said on April 30, 2011 at 7:59 PM :

@Mukundyou could customise h4(heading 4) tag in the same way using the above css. It is better for SEO because search engines understand heading 4 (h4) tags . . . Hope you understood what I told

REPLY
Mukund said on April 30, 2011 at 11:00 PM :

@Amit M B: You are absolutely right and I take what you said! Will consider doing the same for better SEO!! Thanks for the comment Amit!!!

REPLY
commodity tips said on June 8, 2011 at 12:01 PM :

I really appreciate your post and you explain each and every point very well.Thanks for sharing this information.And I’ll love to read your next post too.
Regards
"http://www.livesharetips.com/commodity-tips.html"

REPLY
Mukund said on June 8, 2011 at 2:59 PM :

@commodity tips: Thanks for the comment! I hope you enjoy the upcoming articles on my blog!

REPLY
Zee said on December 22, 2011 at 9:59 PM :

Awesome ....

Thanks bro...

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]