How important is the meta description tag ?
-this is a very frequently asked question by blogger all around the world.

These days the importance of the meta description is less and less important. The meta description was originally and important factor for a higher position in search engines ranking. On that time search engines weren`t so "wise", and the meta descriptions where full of spammy keywords.

Now search engines are more wiser and spamming your meta description might can bring to get penalized or even banned. It`s not easy to recover your blog from a ban. Be aware, if you decide to use meta descriptions don`t make them look spammy and don`t stuff the them whit lots of keywords.

If you have a relevant meta description google may use it as a snippet for search results description , else it will use a piece of text from your content or instead google may use your ODP (DMOZ) directory description.

A well written meta description can attract more visitors through search engines search results , but be careful , don`t use the same description for all your pages ,google and some other search engines may threat this as duplicated content.
Try to keep your description tag bellow 150 characters (including spaces), don`t repeat any word more than twice ,a high keyword density may can bring to get penalized. Write accurate ,relevant and unique descriptions for each particular page, write them for humans instead of search engines.

In conclusion, the meta description tag is useless for your ranking. It has no weight in google algorithm.

Related tutorials:

Read more...

Blogcatalog is a great blog directory which aggregates member activity across other popular networks. Blogcatalog offers many features ,you can follow other users and other users can follow you. By following someone you will see their updates (newest blog posts , profile changes , friends list updates...) on your dashboard. The bad part of this social blogger community is that the links are NoFollow , but using it well can bring you lots of visitors.

Sign up , it worth! Your blog will be ranked, with a higher rank you will be in a higher position on the blogs list in your category. Your score is depending on the number of reviews and the ratings what your profile visitors gave to your blog. Talk with other bloggers and get them to vote your blog. Following others and being active will help go gain followers and more traffic for you. Add your communities to your profile ,maybe some of your visitors will follow you on other networks ,too. The key to get traffic from social networks is to talk with others , make friend , join groups , to be active. For example if you are an addicted to blogging join my Blogcatalog Group: Bloggers Group

Blogger is a very large social blog directory with more than 125.000 blogs ranked, 4.500 groups to join and it`s in the top 1000 websites in the world with an Alexa rank of 294. According to Alexa.com Blogcatalog is online since 25-Apr-2004 and has 32.927 sites linking in.
Blogcatalog offers a large range of free widgets like Recent Readers Widget , News Feed Widget , Communities Widgets and more.

The Blogcatalog Community Blog is a place to highlight great blogs and bloggers, share the latest blogging and social media news, review tools for bloggers and keep you up to date on what's going on at Blogcatalog.

Related tutorials:

Read more...

These days I spent many hours designing and creating my template because I want to make it look professional and beautiful. I`m still working on my template but soon it will be ready. During this time I used many effects like changing an image on mouseover (hover). This can be done with three methods ,one using a short javascript code and one using a bit longer CSS code, one using CSS sprites.

1. Using javascript
This code doesn`t need any CSS code , just change the URLs of the images.

<img src='http://first-image.jpg' onmouseover="this.src='http://second-image.jpg'" onmouseout="this.src='first-image.jpg'"/>

2. Using CSS
This method is more advanced, place the first piece of code , the CSS part right before ]]></b:skin> ,the HTML part of the code can be placed anywhere between <body> and </body> or even inside a gadget (sidebar).
The CSS part of the code:

.class-name {
display:block;
background-image:url(http://first-image.jpg);
width:100px;
height:100px;
}
.class-name:hover {
background-image:url(http://second-image.jpg);
}

The HTML part of the code:

<a class='class-name'></a>

NOTE: Use the same class name at both of codes , you can use any name. Change the width and height attributes to the size of you image , if the first and second images have different size place the width and height attribute of the second image after the line with the URL of the second image.

3. Using CSS Sprites
I will write more about this method in another post more detailed.

Related tutorials:

Read more...

These days I was searching for problems of bloggers to solve when I noticed that none of Blogger blogs have the comment avatar images on the right side. Only Wordpress blogs have this feature to set the position of the avatar images. I`ve spent two days finding a solution when I decided to customize the entire comments area. I think my comments area is now pretty cool, but it`s difficult to install it. Please read with attention, follow the steps bellow carefully and BACK UP your template!

Here is an image about my comments area, later in this tutorial I will show you how to customize it:

Installing this comment area form
This is pretty difficult, read with attention!

1. Go to your Dashboard, Layout , Edit HTML and check in the Expand Widget Templates checkbox.

2. Find the following code (Ctrl + F and type in comments-block):

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

3. Replace the above code with the following one:

<div id='comments-block3'> <b:loop values='data:post.comments' var='comment'> <div id='comment-header'> <div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'> <div id='comment-profile-image'> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> </div> <div id='comment-name-url'> <a expr:name='data:comment.anchorName'/> <b:if cond='data:comment.authorUrl'> <a class='comments-autor-name' expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <a class='comments-autor-name'> <data:comment.author/></a> </b:if><a class='says'>says:</a> </div> <div id='comment-date'> <span class='comment-timestamp'> <a class='comment-permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </div> <div id='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p class='comment-body'> <data:comment.body/></p> </b:if> </div> </div> </div> </b:loop> <div align='right' class='js-id-json14358458433' id='comments-form-script-js14876248' style='margin:0 10px 0 0; height:10px;'><a href='http://seo-tips-blogger.blogspot.com' rel='dofollow' style='font-family: Arial, Tahoma, Verdana; font-size:10px; color:#484848; text-decoration:none;'>BY SEO TIPS BLOGGER</a><!--comments-form json14358458433 - don`t edit!--></div> </div>

4. Find the following codes and remove them:

Your code may be a little different , search for the starting tags

#comments-block {

margin:1em 0 1.5em;

line-height:1.6em;

}

#comments-block .comment-author {

margin:.5em 0;

}

#comments-block .comment-body {

margin:.25em 0 0;

}

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.1em;

}

#comments-block .comment-body p {

margin:0 0 .75em;

}

Customizing the comments area

Find the ]]></b:skin> line and place the following code BEFORE it!

#comments-block3 {

padding:0;

margin:0;

float:left;

overflow:hidden;

}

#comments {

padding:0;

margin:0;

}

#comment-name-url {

width:465px;

float:left;

}

#comment-date {

width:465px;

float:left;

}

#comment-header {

float:left;

border:1px dotted rgb(187, 187, 187);

padding:5px 0 5px 10px;

margin:5px;

background: rgb(238, 238, 238);

}

.avatar-image-container {

background:url(http://i645.photobucket.com/albums/uu178/coolboycsaba/no-avatar4.jpg);

width:48px;

height:48px;

float:right;

margin:5px 10px 5px 5px;

}

.avatar-image-container img {

border: 1px solid white;

width:48px;

height:48px;

}

a.comments-autor-name {

color:#088A08;

font-weight:bold;

font-size: 12px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

a.says {

color:black;

font-weight:bold;

font-size: 12px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

.says a:hover {

text-decoration: none;

}

a.comment-permalink {

color:#088A08;

font-weight:normal;

font-size: 10px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

1. Change the size of the avatar image

Customize the size of the comments to fit to your template:

First change the size of the avatar images:

.avatar-image-container {

background:url(http://i645.photobucket.com/albums/uu178/coolboycsaba/no-avatar4.jpg);

width:48px;

height:48px;

float:right;

margin:5px 10px 5px 5px;

}

.avatar-image-container img {

border: 1px solid white;

width:48px;

height:48px;

}

To change the size of the avatar images replace the red marked values to any number of pixels. Use the same at all red marked code lines.

Now change the size of the comments area:

#comment-name-url {

width:465px;

float:left;

}

#comment-date {

width:465px;

float:left;

}

The size of the comments area is depending on the size of the main-wrapper and on the size of the avatar image: e.g:

(main-wrapper)550px - (avatar image)48px - (paddings , margins and borders)37px = 465px

The padding and margins size is in bold because it`s always 37px, calculate the size of your comments area size and use the result as the value of the red marked code lines.

2. Change the colors
To change the background color of the comments change the red code line , to change the color of the border change the blue code line to any color.

#comment-header {
float:left;
border:1px dotted rgb(187, 187, 187);
padding:5px 0 5px 10px;
margin:5px;
background: rgb(238, 238, 238);
}

e.g:

#comment-header {
float:left;
border:1px dotted red;
padding:5px 0 5px 10px;
margin:5px;
background:#FF00FF;

To change the color of the comment author name change the red marked code line , to change the color of the comment posted date change the blue marked code line, to change the color of the says word change the green marked code line.

a.comments-autor-name {

color:#088A08;

font-weight:bold;

font-size: 12px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

a.says {

color:black;

font-weight:bold;

font-size: 12px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

a.comment-permalink {

color:#088A08;

font-weight:normal;

font-size: 10px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

3. Change the border types

Here are the border types to chose from, every comment have a border.

#comment-header {

float:left;

border:1px dotted rgb(187, 187, 187);

padding:5px 0 5px 10px;

margin:5px;

background: rgb(238, 238, 238);

}

Dotted

-this is the default , don`t change the red marked code

Dashed

-to use this type of borders change the value of the red marked word to dashed

Solid

-change the red marked word to solid

4. Change the No-Avatar image:

.avatar-image-container {

background:url(http://i645.photobucket.com/albums/uu178/coolboycsaba/no-avatar4.jpg);

width:48px;

height:48px;

float:right;

margin:5px 10px 5px 5px;

}

Change the URL (marked with red) with the URL of your image, please change it or download the image and upload it to your own host or photobucket , don`t steal my bandwidth!

Save your template!
Well done! If you have followed all the above steps carefully your comments area is pretty cool and it`s ready to use!
NOTE: Please don`t remove that small link at the end! Thanks my reading our blog!

Related tutorials:

Read more...

Help us to grow our blog! Contribute to our community by interacting with us and by sending us your posts about your SEO experiences or blogger template editing.
Your name with the name of your website/blog will be displayed with a DoFollow link to your website/blog at the end of your article.
You will receive some visitors from this blog. More higher is the quality of your post than more higher will be the number of visitors.

The rules - read them!

Don`t submit duplicated or stolen articles!
Don`t submit the article to other blog ,select: submit only to this blog or if you have submitted allready to another blog please don`t submit it!
Write only about thinks what you know about ,write accurate post.

How to send an article:

Send your post via email to me:

Please send your article to seo_tips_blogger@yahoo.com

Please include:

your name

the name of your website/blog

the address of your website/blog

the title of your post

the content of your post

Thanks for contributing to OUR community!

Related tutorials:

Read more...