Blogger Tips And Tricks

1.First,go to google webmaster tools and sign in with your gmail account.

2.After you logged in, you will see this asking you to add a site.

Add your blog url(ex:bloggertipandtrick.blogspot.com).Don't add with http or www.

3.Next,it asks you to verify your site.It is just to confirm whether you are the owner or not.

CLICK on the 'verify your site' link.

Next,

4.There are two ways to verify your ownership but, there is only one way for the blogger users to add a metatag.

5.Copy the metatag.

Now,sign into your blogger account>click the layout button>Edit html and paste the metatag just after the head tag and save the changes.

Now click the verify button in the google webmaster tools and there will be a confirmation message saying that you have sucessfully verified.

Now,you have to submit a sitemap for google to crawl your site.Go back to the google webmaster dashboard or (home) and click the 'Add' link which is next to your blog name and in the Sitemaps column.

Choose 'Add general web sitemap' from the dropdown menu and type rss.xml or atom.xml next to your blog address.

or

and click the 'Add General Web Sitemap' button.

6.That's it.Now your sitemap is successfully submitted to google.Check 2 or 3 days after and you will see the detailed statistics of your blog(indexed pages,any errors,etc.)

What's the use of adding different meta descriptions to different Blogger Posts?

It is very good for SEO (Search Engine Optimisation) . Actually, why we are adding meta tags is to tell search engines what that page is all about... but, using same meta tags to all of your blog posts lessens the search engine rankings and traffic little bit.
But, if you add different unique meta tags to different Blog posts, it makes the search engines to know more about your individual blog posts and make them crawl and index your pages better and it also improves your Search engine rankings for sure ;)

So, how to add this?

For this to happen, you have to add some pieces of codes to the template.
First Sign in to Blogger dashboard » Layout » Edit html

and find this line

<b:include data='blog' name='all-head-content'/>

and add this code just below that line

<b:if cond='data:blog.url == "http://bloggertipandtrick.blogspot.com/"'>

<meta content='DESCRIPTION' name='description'/>
<meta content='KEYWORDS' name='keywords'/> </b:if>

We now added meta tags to the homepage. Next, you want to add meta description for another post, for example : http://bloggertipandtrick.blogspot.com/2009/03/how-to-add-paypal-donate-button-to-your.html

Now, what you have to do is pasting the above three lines below the present code and changing the link,description and keywords.
So, the final code now looks something like

<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.url == "http://bloggertipandtrick.blogspot.com/"'>

<meta content='DESCRIPTION' name='description'/>

<meta content='KEYWORDS' name='keywords'/> </b:if>

<b:if cond='data:blog.url == "http://bloggertipandtrick.blogspot.com/2009/03/how-to-add-paypal-donate-button-to-your.html"'>

<meta content='How to add Paypal Button to your Blogger Blog, Adding Donations to your blog' name='description'/>

<meta content='Adding,Paypal,Donate,Button' name='keywords'/> </b:if>

Just like the above procedure, you can add different meta tags to as many blog posts as you can.

Adding a Paypal donation button to your blog will give your loyal readers a chance to support(encourage) you by donating a few bucks.
If you don't have a paypal account yet,.. you can get a Free Paypal account here.

1.First,Log in to your Paypal account.



2.Click on the 'Merchant Services' tab




3.Scroll down the window and you will see an option "Donations" in the right sidebar.Click on it!

4.Now,you will see some options like Donation name/service ,donation id,etc etc...
The first field (Donation name/service) is the only thing that is required and all the remaining fields are optional.
Enter that first field,choose a button style,scroll down the window and click on "Create a button Now"

5.Now,you will see some html code... Copy it and sign in to your blogger dashboard »» Click on the layout »» Add a Page element »» html/javascript »» and paste that html code and SAVE THE CHANGES.

Adding meta tags you can get get more traffic from search engines like google,yahoo,msn,etc,especially the meta description is the most important one.

Meta tags are the tags which describes your site and tells the search engines what your site is all about.Adding meta tags is an important factor in SEO.(Search Engine Optimisation).Meta tags allows search engines to index your web pages more accurately. In other words,Meta tags communicate with the search engines and tells more information about your site and make it index correctly and accurately.

We must add two main meta tags to the head section of the template.One is the Meta description which describes your site and another one is Meta Keywords which tells about your site keywords(what your site is all about)

Here is how to add meta tags to your blogger(blogspot) blog:

1.Sign in to your blogger dashboard>click the 'layout' button[see the screenshot below]



2.Click on the 'Edit html' tab



Here is the code you have to add

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/>


DESCRIPTION HERE:Write your blog description
KEYWORDS:Write the keywords of your blog
AUTHOR NAME:Write the author's name(Your name)

3.Add the above code just after this

<b:include data='blog' name='all-head-content'/>



Don't forget to add description and keywords and save the changes.

You may want to create a scrolling text box with code for your viewers to copy. Here is the way to do that. Copy the code below into Edit Html part of your Post Editor :

<textarea style="WIDTH: 332px; HEIGHT: 70px" onfocus="this.select();" name="textarea" cols="14">PUT CONTENT HERE</textarea>

This will look like the following :

PUT CONTENT HERE

If you want set background :

<textarea rows="10" cols="40" style="background:#6699ff;">YOUR TEXT HERE.....</textarea>

This will look like the following :

YOUR TEXT HERE.....

To configure the reactions widget follow these steps.
1.Sign in to blogger account.

2.Go to layout Page.

3.Click on the "edit" link under the blog posts

4.On the pop up window check the "Reactions" widget.Click save.



If you are using the default blogspot template, the widget would appear in your blog.If not you have to add some code to your blog's template To do that follow these steps.

1. Go to edit Html page of your blog.

2.Check the "Expand widget templates"

3.Find the following code in your template:

<data:post.body/>

4.Then immediately after this line add the following code.

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

Save and Preview your blog.

For example your Blog Header Page Element widget code looks like this :  <b:widget id='Header1' locked='true' title='MY BLOG (Header)' type='Header'/>  You can see this by login at Blogger.com and click on Layout link on Dashboard. Then click Edit Html subtab of Template tab. Scroll down in Template code box to see above code. This code is wrapped in the Header section code like this :  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='MY BLOG (Header)' type='Header'/> </b:section>  As you can see in the first line the number of maximum widgets in the header section is set to one. This makes it impossible for you to add new widgets in the header. Also Showaddelement is set to No.  To add more page elements in header change this code to :  <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'> <b:widget id='Header1' locked='true' title='MY BLOG (Header)' type='Header'/> </b:section>  Set the maxwidgets to the number of widgets you want to put in the header section plus one. This makes it easier to rearrange the widget order in the header. Also change showaddelement to Yes. This will add a "Add Page Element' link to the header on the Layouts page.  You can do the same with the Blog Posts section code :  <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section>  Add a maxwidgets=x code and change showaddelement to yes. Save Template and click on Page Elements subtab of Template tab. You can now add any page Elements to the header and Blog posts. Do the same for the footer.

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

These codes are from the template of this blog. The first block of codes tells me that the width of the Header is 750 pixels. The second block says the main column width is 400 pixels. The last two block of codes tells me that both the sidebars are of width 150 pixels.

Look for this in your template.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

Then you will replace it with this code:

.sidebar .widget, .main .widget {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}

.main .Blog {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}

That will give you a nice border around your posts and your sidebar widgets!

You can change your border width editing above code.

If You need to remove this Subscribe to: Posts (Atom) link,Then Follow the instructions below.



log in to your dashboard--> layout- -> Edit HTML-->Check "Expand Widget Templates"

scroll down to where you see this:-

<b:include name='feedLinks'/>



Now Delete this code and preview the template before saving to check if any errors occured or not.

Now click "Save Template" and refresh your site.

First you must upload these 3 images to your hosting image service.Replace "URL of your own image" with your real Urls.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Now follow these steps to replace codes :-

(A)Scroll down to where you see this:-

<data:newerPageTitle/>

Replace above line with

<img src='URL of your own image'/>

(B)Scroll down to where you see this:-

<data:olderPageTitle/>

Replace above line with

<img src='URL of your own image'/>

(C)Scroll down to where you see this:-

<data:homeMsg/>

Replace above line with

<img src='URL of your own image'/>

4.Click on "Save Templates" and Refresh your site.

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

<p class='post-footer-line post-footer-line-1'> <span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span>

4.Replace  <data:post.author/>  of above code with your new name.
5.Click on "Save Templates" and Refresh your site.

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

<p class='post-footer-line post-footer-line-1'> <span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span>

4.Replace <data:post.author/>  with below code.

<a href="URL OF YOUR BLOG"><img src="URL OF YOUR PICTURE" /></a>

5.Click on "Save Templates" and refresh your site.
Note : Remember to give your real information to URL OF YOUR BLOG and URL OF YOUR PICTURE.  

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

<p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if>

4.Replace the line <data:postLabelsLabel/>  of above code with your own name,like" CATEGORIES".
5.Click on "Save Templates" and refresh your site.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:-

<p><data:post.body/></p>

Add Page Popularity Widget

Paste the below code just after <p><data:post.body/></p>.

<img expr:src='"http://foxrecord.appspot.com/rating?url=" + data:post.url + "&amp;title=" + data:post.title' />

Add Top popular pages widget

Paste the below code just after <p><data:post.body/></p>.

<script src="http://foxrecord.com/scripts/gettop.js" type="text/javascript"></script>

4.Click on "Save Templates" and you are done.

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

<p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if>

4.Replace the line  <data:postLabelsLabel/>  with below code.
<img src="URL OF YOUR IMAGE " alt="BLOG TITLE" />

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

<span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span>

4.CUT above code and paste it in the same blog widget below this line :

<div class='post-body'>

5.Click on "Save Templates" and refresh your site.

If you're displaying your email address on your web site,It may be a reason to receive a ton of spam emails to your inbox.Although it's very difficult to protect yourself from receiving spam email, there is a way you can still display your email address on your web site and protect it at the same time.

Normally we use the following code to create email link with in your web page.

<A HREF="mailto:you@yourdomain.com">Contact Us</A>

Contact Me

Replace above code with below code,If you want to protect your email address from spam bots.

<A HREF="&#109;&#97;&#105;&#108;&#116;&#111;:you&#64;yourdomain.com">Contact Me</A>

Contact Me

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

#header-wrapper { width:800px; margin:0 auto 10px; border:1px solid $bordercolor; }

Note :- width:660px can be different value.
3.Now Replace the above code with the below code.

#header-wrapper { width:800px; margin:0 auto 10px; border:1px solid $bordercolor; display:none; }

Done. above code hides your blog header.
4.To use a image instead header,find the below code.

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='your header title' type='Header'/> </b:section> </div>

5.Now paste the below code just after the above code.

<a href="URL_OF_YOUR_BLOG"><img src="URL_OF_THE_IMAGE" alt="Home" /></a>

6Click on "Save Templates" and you are done.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

  </head>
3.Add below code into your template just above the </head> tag.

#belowheader-wrapper { width:890px; margin:0 auto 10px; overflow: hidden; }

Note : You can change width:890px to equal the width  to your Header wrapper.
4.Now Scroll down to where you see this:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Your header title' type='Header'/> </b:section> </div>

5.Now paste the below code just after the above code.

<div id='belowheader-wrapper'> <b:section class='belowheader' id='belowheader' preferred='yes'/> </div>

6.Click on "Save Templates" and you are done.