Custom Robots Header Tags for Better SEO - Blogger

Blogger is continuously improving search preference feature, Add Custom Robots Header Tags are very important for every blogger for better SEO. In this post i will tell you how to enable custom robots header tags in blogger. You have to be careful to setup custom robots text because if you do something wrong Google will not index your page in search engine. Follow the instructions carefully and it'll positively help you to boost your web site traffic.

Step 1: To enable these tags, go to Blogger > Settings > Search Preferences, click Edit next to "Custom robots header tags," and select Yes.

Step 2: Select Yes Option and customize setting shown in the below image.

You must learn about tags when should you use them.

all:  There are no restrictions for indexing or serving. This is default for all pages

noindex:  Do not show this page in search results and do not show a "Cached" link in search results.

nofollow:  Do not follow the links on this page

none:  Equivalent to noindex, nofollow

noarchive:  Do not show a "Cached" link in search results.

nosnippet:  Do not show a snippet in the search results for this page

noodp:  Do not use metadata from the Open Directory project (DMOZ) for titles or snippets shown for this page.

notranslate:  Do not offer translation of this page in other languages in search results.

noimageindex:  Do not index images on this page.

unavailable_after: [RFC-850 date/time]: Do not show this page in search results after the specified date/time. The date/time must be specified in the RFC 850 format. Example: 17 May 2012 15:00:00 PST

Step 3: Now click on ""Save changes" button > Done

That's all! If you have any doubt or need help about it, please leave comment.

Creating a basic form in HTML

Insert the following code:
<FORM action="mailto:er.sachinsaini@gmail.com" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD>
<DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD>
<DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD>
<TEXTAREA name="comment" cols="30" wrap="virtual"rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>

And you will have a form like this:

Name:
Email:
Comment:

Make sure you change, in the code, the e-mail address which I have in bold italics underlined.
Also make sure to cram the code into a small amount of lines. (Do not put <FORM action="mailto:er.sachinsaini@gmail.com" method="post" enctype="text/plain"> on two lines).
This html tip will allow you to connect and get input from users.

Advanced Tables in website/Blog

Here is how to create a basic table, so you will understand the following info.
Now that you've learned that, wouldn't it be nice to have a few handy table html tips?
Here they are:

First, we should already know that
<table style="text-align: left; width: 100%;" border="3"
cellpadding="2">
<tbody>
<tr ="">
<td style="vertical-align: top;">Html Table1<br>
</td>
<td style="vertical-align: top;">Html Table2<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Html Table3<br>
</td>
<td style="vertical-align: top;">Html Table4<br>
</td>
</tr>
</tbody>
</table>
<br>
is the code for a table.
And the table will look like this:

Html Table1	Html Table2
Html Table3	Html Table4

I shall also stress that if any code does not work properly when you have cut and pasted it, try putting it into only one line.

Second, let's introduce captions:
<table style="text-align: left; width: 100%;" border="3"
cellpadding="2">
<CAPTION>The Caption</CAPTION>
<tbody>
<tr ="">
<td style="vertical-align: top;">Html Table1<br>
</td>
<td style="vertical-align: top;">Html Table2<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Html Table3<br>
</td>
<td style="vertical-align: top;">Html Table4<br>
</td>
</tr>
</tbody>
</table>
<br>
See the change? It causes this:
The Caption

The Caption

Html Table1	Html Table2
Html Table3	Html Table4

(Remember that you can use these tricks in between the <caption> and </caption> to spice up the caption text) 

Creating tables in Blog or website - HTML code

This html tip will allow you to create tables like this one:

Html Table1	Html Table2
Html Table3	Html Table4

The code for that table was:
<table style="text-align: left; width: 100%;" border="3"
cellpadding="2">
<tbody>
<tr ="">
<td style="vertical-align: top;">Html Table1<br>
</td>
<td style="vertical-align: top;">Html Table2<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Html Table3<br>
</td>
<td style="vertical-align: top;">Html Table4<br>
</td>
</tr>
</tbody>
</table>
<br>

When inserting the above code, make sure you put the top two lines onto ONE line.
If you would like to add another cell in an existing row, simply put in another
<td style="vertical-align: top;">Html Table2<br>
</td>
in the appropriate location.
If you would like to add a new row, put in a
</tr>
<tr>
in the appropriate location.
Obviously, be sure to change the Html Table text in my example.
You can also fiddle around with the numbers in the code of this html tip, especially stuff in the first line.
This tip can lead to more advanced table formatting.
If you liked this tip, you will probably also like this tip, which is about forms.

GET SHARING TOOLS FOR YOUR SITE

Just add the following code into your Head section of your website and its done.

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

<script type="text/javascript">stLight.options({publisher: "21502eb6-d8a0-4344-81d8-6bcf66fa859d", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
var options={ "publisher": "21502eb6-d8a0-4344-81d8-6bcf66fa859d", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "blogger", "digg", "twitter", "googleplus", "linkedin", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

see the result on this blog
HOLLYWOOD FANTASY

Facebook like box for blogger - scroll down type

How to Add this Widget in Blogger :

1. Open Blogger in your browser and log in to your account.
2. Now go to Layout option tab.
3. Click on Add a Gadget and then select HTML/JavaScript.
4. Now copy and paste the code mentioned below in HTML/JavaScript area.

*********************************************

<!-- Widget on http://codeshares.blogspot.in start -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>


<div id="dialog" title="Get updates via Facebook">
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/codeshares&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=true&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:258px;" allowtransparency="true"></iframe></center>
<center style="float:right; margin-right:10px;">
<span style="font-size:xx-small; color:#000; text-decoration:none;">Get this gadget at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href=" http://codeshares.blogspot.in/">Facebook like Box</a></center>
</div>
<!-- Widget on http://codeshares.blogspot.in End -->

*********************************************

***Replace the red  text with the link of your facebook page

and its done. Enjoy. More to come....

Do comment, your feedback will help us in improving this codesharing site.

Popular Posts Widget with Hover Effect for Blogger

A Popular Posts widget shows the list of most popular posts on your blog along with an image thumbnail and a snippet of the post. One can add Blogger's official Popular posts widget by Clicking on Blog Title → Layout → Add a Gadget → Popular Posts. For making this widget more attractive make sure that you have checked image thumbnail and snippet box. Blogger provides CSS for this widget in their default CSS file. We will overwrite these CSS rules and add new rules to make it even more attractive.

The widget we will add shows the Thumbnail and Post Title when page is fully loaded. When hovered over, a bouncing snippet effect takes place. You can see the demo of this widget by clicking on the below link. The popular post widget is on the right sidebar, just scroll a bit.

Procedure of adding this widget to Blogger

First of all go to Blog Title → Template → Edit HTML. Search for the tag ]]></b:skin> by pressing Ctrl + F. Add the below given code just above ]]></b:skin>

*******************

/* Popular Post Customization on codeshares.blogspot.in */
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
/* Popular Post Customization on codeshares.blogspot.in */

******************

After adding the code click on Save Template. You are done. Your visitors can now see attractive Popular posts list on the sidebar of your blog.

my posts in alphabetical order

Listing post titles in alphabetical or chronological order by Greenlava

In this tutorial I will show you how to list the titles of your blog’s 2000 most recent  posts. If you are looking for an alternative to Blogger’s Archive gadget, then this might be it. This list can also be used as a Table Of Contents. This list is made possible with the use of Yahoo! Pipe.

continue on Greenlava's website