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(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>

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.

Click4more... 24 Comments

Make Your Blog More Attractive - Tip 1

Many bloggers, both newbies and experienced ones, keep asking me about the "Read More and Add Your Comment" buttons, special "Note" tag which I include in my recent posts, about the Tags and Author Name which are included below every post title and so on. I plan to publish articles in the upcoming weeks solving these issues and other issues faced by the bloggers as well. It's better that you subscribe to my blog so that, you don't miss any valuable tip that would make your blog more attractive.

In this post, I will demonstrate on "How to add the Read More and Add Your Comment buttons" to the home page of your blog. Though blogger has enabled the "Read More" feature with "Insert jump break" icon, to add the CSS stylized icons, you need to follow the instructions mentioned  in this post. Still not clear about what I'm blabbering, then have a look at the previews below - on IE, on Firefox. 

On Internet Explorer

On Mozilla FireFox

Note: Rounded corners are visible only on the latest browsers and it's not supported by IE.  However, the hack will work on IE. It will be visible as straight edges. Check out the screen shots to find the difference between the straight corners and rounded corners.

Fine. Let's install this hack on our blogs. Just follow the instructions mentioned below.

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

.rmlink a {
       color:#ffffff;
       text-decoration: none;
       float:right;
       font-family:Arial;
       padding:3px 4px 3px 4px;
       font-size: 12px;
       font-weight: bold;
       text-align: center; 
       background: #444343;
       padding-left:10px;
       padding-right:10px;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
}
.rmlink a:hover {
       color:#ffffff;
       text-decoration: none;
       background: #7b7b7b;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
}

4. Save your template temporarily. Next, expand your template checking the box on the top right corner of HTML area, that is, ensure you have a tick mark on the box.
5. Once the template is expanded, search for the following code in your template.
<data:post.body/>
6. Just download this text file - Read More Hack. Replace the above mentioned code with code present in the text file. That is, just copy the entire content in the text file and paste it instead of the code mentioned in step 5.
7. Save your template. That's it!!! Every time you make a post, just use the default "Jump Break" tag and this hack will work.

If you face any problems installing this script, you can always contact me via email or leave a comment below. You can also request for solutions regarding the problems you face when installing other widgets on your blog or request for the scripts which attracted you the most on my blog, say like the subscription box, the search bar, etc... Your problems will be addressed in the upcoming posts on my blog. So, what you waiting for??? Leave a comment and get your problem solved!!!

UPDATED CODE
Few people asked me to include the number of comments along with "Add Your Comment" and "Read More" button. The updated version would look as shown in the picture below.

So, for those who wish to have the new version of code. Just follow the same steps which are mentioned above expect step 6. Instead of the file - Read More Hack, download the following file -  Updated Read More Hack Code and replace the code as mentioned.

Click4more... 25 Comments

Create An Effective Meta Title For Your Blog

Hi friends!!! New Year Greetings from "Everything About Blogging". I wish everyone a very Happy And Prosperous New Year - 2011. Let this year bring success and happiness in all your works. Fine. Now, Let's get into business. We know that Meta Titles/Tags are one of the important factors that contribute to the SEO of a site. This post will basically explain you, how to optimize the Meta Tags so that you make the most out of it.

Meta Tags/Titles are short descriptions about our blog/website. These are the first factors which search engines and visitors look into. So, it is very important you make these tags more effective. To know more about meta tags, you might consider reading the following articles. 

Article 1 - Increase Traffic To Your Blog With Meta Tag and SEO.

Article 2 - Add Meta Tags To Each Blogger Post.

Here are the secrets to create an effective meta tag.

• Your Meta Title should be clear and precise. Make sure you include all the primary keywords in your tag.
• Your Meta Title should incorporate the most used words in your blog and relate to the actual content of your blog. Since you use the most used words in your tag, it fetches a better ranking when compared to other blogs in your niche.
• The length of your Meta Title should not exceed more than 60 characters including blank spaces.
• Above all, the most effective title tag need not be grammatically correct. It should convey what your blog actually contains and should incorporate the primary keywords of your blog.

Since a meta tag is the first factor that most of the search engine algorithms look into, it is advisable to take great care while creating it. Your suggestions for improving the meta title are welcome. So, post your ideas on improving the meta tags via comments. If you got more ideas, then you might consider writing an article for us too- Write For Us.

Click4more... 20 Comments

Why isn't my blog getting any comments?

Few days back, I had a chat with a newbie. He asked me "Why is that, your blog receives comment but, I don't receive any on my blog?" I have tried to answer this question on this post. I personally get excited when I see comments on my blog appreciating for my work. I'm sure it should be the same for many  people around the blogosphere as well. I have listed few points in this post which I feel stands as an obstacle to receive comments.

1. POOR CONTENT
Its a pretty common mistake that every newbie makes when he/she starts a blog. Their aim is to make money and they want to do it overnight. They copy and paste content from other websites. It is important to note that the content which you copied has already been indexed by Google and your new blog will nowhere stand with the blog that's already well established. So, it is very important to generate your own articles because "CONTENT IS KING".

Secondly, it is important to make your content precise. Be clean and clear with what you say. Don't make the post too lengthy unless it is required. Use bulletins or number the points, wherever required. Highlight the keywords on your post. I would suggest every one to add a bit of humor at places in your post and to share your personal experiences. Try it yourself and see the result, because it works well on my blog and probloggers,like Darren Rowse, too suggest the same.

2. LOW TRAFFIC
The second major constraint would be traffic. I have posted enough articles on increasing traffic to our blogs. So, I suggest you to have a glance at the previous entries on my blog - 
Article 1: How To Increase Traffic To My Blog?
Article 2: Improve Traffic To Your Blog.
Article 3: Increase Traffic To Your Blog With Meta Tag and SEO.
Article 4: Improve Traffic To Your Blog With Social Communities.
Having read these articles, you should have an idea where you are weak at. Optimize your site or methodology and start increasing the traffic to your blog. Apart from those, I suggest you to take part in forums/discussions related to your niche and leave your links there. It works very well, especially for blogs related to my niche (blogger tutorials, hacks, blogger widgets).

3. POOR INTERACTION
The most important factor which you leads to loss of comments and readers would be your interaction with your blog readers, fellow bloggers , forum members and other similar stuff. When some one comments on your blog, make sure you reply to their comment. Ask them to be more expressive and show some gratitude towards them. If you definitely want to make an impact, then I suggest you visit their blog and leave a comment there. This will definitely fetch more comments than what your blog is currently receiving. Also, use the social media to the best extent possible. Would stress this on my next post. Make sure you subscribe to my blog so that, you don't miss the next editions.

4. LACK OF COMMENT PROVOKING QUESTIONS/CONTENT
This is something related to the first point - content. Write on topics that would provoke more comments rather than writing some history about the topic on your article. It is advisable to write every post with a related question that would provoke users to comment on them. Secondly, ask for comments. For example, say your blog is dofollow (read more about dofollow blogs here: How To Make Your Blogger Blog DoFollow?), you may add a final tag on your blog saying - "We are a DoFollow blog. So, express your views about this post to generate a back-link for your blog".

5. LACK OF INCENTIVES & COMPLEX COMMENT PROCESS
If your blog is making good traffic and you generate a good revenue. Still, you don't receive comments. Then, you may run a contest which will temporarily increase the comments on your blog. May be, this will fetch more loyal readers to comment on your blog. Finally, make your comment process simple. Don't ask people for a login and stuff. You can enable comment moderation to prevent spam. So, stop asking people to login for commenting. Most important, make the comment section visible (USE COMMENT FORMS), not like my blog. I have a problem with the comment form, so I'm still stuck with this pop up window.

I have just enlisted a few simple ideas that can generate more comments. I'm sure there are better ways too. So, if you have any of them in your mind, please share it with our readers via comments. SEE!!! THIS IS HOW YOU SHOULD GENERATE COMMENTS:)

Click4more... 8 Comments

Add Image Captions On Hover With CSS3

I'm currently trying out few cool effects with CSS3. You might check out my entry which involves making rounded corners with CSS3 rather than the usual flat straight corners. Here, in this post , we deal with another cool effect namely, displaying the image caption only when you hover your mouse over the image. To check this effect, just hover your mouse over the image below.

Just Another Wildlife Photo
I hope you like the hover effect on this photo. This effect is visible only in the latest browsers - Firefox, Chrome, Safari and Opera, not in Internet Explorer.

Image Credit : Adamhawtin

Are you excited about this trick??? If you are not able to view this effect, it simply means your browser does not support CSS3. I'm pretty sure this trick works on the following browsers - Mozilla Firefox, Chrome, Safari and Opera. Just follow these simple steps to implement this effect on your blog.

1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do 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. Now, paste the following piece of code just above the line you searched in step 2.

#post-image {
}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}
#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}
#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
#figure:hover .caption {
margin-bottom:0px;
}
#post-image .caption {
width:100%;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
#post-image .caption b {
text-shadow: 0px 2px 0px #000;
}
#post-image .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}

4. Save your template. That's it.

IMPLEMENTATION IN BLOGGER DRAFT/POST:

I suggest you to use Yahoo! Smush.it before you upload any photo to Picasa Web Album because your images will load faster when you smush them.  To get more details about Yahoo Smush.it, check this article - Tips and Tools To Speed Up Your Blog. 

Once you upload the image to Picasa Web Albums, copy and paste the URL in a temporary text file. Now, paste the following piece of code in the place where you want the image to appear in your post. That is, shift to the HTML mode in the blogger draft and paste the following piece of code.

<div id="post-image">
<div id='figure'>
<img src="URL OF IMAGE FROM PICASA"/>
<span class='caption'>
<b>YOUR IMAGE TITLE/b>
YOUR IMAGE DESCRIPTION GOES HERE
</span>
</div>
</div>

Replace "URL OF IMAGE FROM PICASA" with the actual URL of your image - the one which you temporarily saved in the text file. Also, change the appropriate text for the title and description of the image. That's all folks. Now, publish your post. You should be able to see the cool CSS effect when you hover  the mouse over the image. Share your views via comments. We love to hear from you!!!!

Click4more... 20 Comments

Making Rounded Corners With CSS3 On Blogger

Few people kept mailing me regarding the rounded corners in blogger/blogspot blogs. They wanted to show rounded corners rather than the straight edges. Since the number of mails kept increasing regarding this tutorial, I thought to make a post about them. Pretty good example to illustrate this would be consider the following boxes. Just look at the corner sections of each box.

CSS ROUNDED CORNERS EXAMPLE

CSS STRAIGHT CORNERS EXAMPLE

The former looks curved while the latter is flat. That's the trick we are going to learn in this post, that is, to add rounded corners on blogger/blogspot blogs. You may use them in displaying a note(like I do) or may be on the navigation bars or to display HTML codes withing blogger posts and so on. So, you may use them where ever you want. Remember that, this trick will  be visible only in the latest versions of Mozilla Firefox, Chrome, Safari and Opera and not in IE. Check out the browser specific attributes table below.

Enough of the stories!!! Let's implement this trick on our blogs now!!! 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 do 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. Now, paste the corresponding piece of code just above the line you searched in step 2. Paste according to your choice; not all of them.

EXAMPLE 1 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example1 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

EXAMPLE 2 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example2 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

EXAMPLE 3 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example3 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
border-radius: 36px 12px;
}

EXAMPLE 4 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example4 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}

4. Once you have pasted the code. Save the template. Now, your ready to display them in the place you want. Just use a span or div tag to use the CSS3 of your choice. That is, paste the following code any where in the template area or as a HTML/JavaScript using "Add A Gadget" option on blogger design page or within your posts.

<div class="example1">PLACE YOUR CONTENT HERE</div>

5. Now, save your code. That's it!!!

Instead of adding pictures for rounded corners, if you make use of CSS, the time to load your site will be reduced enourmously. That's the biggest advantage with this trick. You might consider reading the following articles for speeding up your blogger/blogspot blog - Article 1 : Speed Up Your Blogger Blog, Article 2 : Speed Up Your Blogspot Blog, Article 3:  Tips And Tools For Speeding Up Your Blog. Express your views about this post via comments!!!

Click4more... 21 Comments