|
|
|
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkQQ026dqVjywjO9_uLKbmBtamrscButzbUGItZrz-N32gCCmnYaNragq1IPh82SAUoBOJukhMrt3UVsAbJiLFnrc7TvurJHezRhBrKNYkwJkpeRCxLJsHNh2enLIpIHmC1iZoMU9KP8I/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
}
background:#E3F0F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkQQ026dqVjywjO9_uLKbmBtamrscButzbUGItZrz-N32gCCmnYaNragq1IPh82SAUoBOJukhMrt3UVsAbJiLFnrc7TvurJHezRhBrKNYkwJkpeRCxLJsHNh2enLIpIHmC1iZoMU9KP8I/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>
</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
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.
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!
Great.... I was looking for that one!!!
REPLY@Sahil: Thanks for the comment! I hope you enjoy this series. Subscribe to my blog so that you don't miss the updates.
REPLYhey... you didn't update your previous post code to display number of comments!!!!
REPLYI 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@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@Tiara1013: Thanks for the comment!! I hope I provide new tips that you expect from my blog!!
REPLY@Mukund Thanks for the update...
REPLYNew 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@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!!!
REPLYThanks. I like to decrease the height of the box. How can i do this.
REPLY@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!
REPLYplz mention where i include this line. under which line
REPLY@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.
REPLYCan you show an example of the Tag for better assimilation.
REPLY@Analyst: I have shown an example of the note tag. Have a look at the example I mentioned in the post!!!
REPLYits 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: Hmmm! I did not get what you meant! Please explain me a little more! I'm little poor in understanding!! LOL:)
REPLYCan you show an example of the Tag for better assimilation.
REPLYits better from the SEO point of view that you customize the '.post h4' css in the same way than doing in this way....
REPLY@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@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!!!
REPLYI 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.
REPLYRegards
"http://www.livesharetips.com/commodity-tips.html"
@commodity tips: Thanks for the comment! I hope you enjoy the upcoming articles on my blog!
REPLYAwesome ....
REPLYThanks bro...
Use the tab below to comment. No spam please!!!
POST YOUR COMMENT