ALL In One SEO PACK For Blogger By MBT

In One SEO PACK For Blogger

1. Generate sitemaps and Optimize Links

This is the most significant part which we fortunately covered in our latest series on Blogger SEO PACK. Read this series to understand clearly how many sitemaps should you create for your blog and how should you submit it to major search engines like Google, Yahoo and Bing (MSN). We also discussed ways to reduce crawl errors by optimizing hyperlinks of labels, archives and blog comments.

• Blogger SEO PACK Techniques 2012 

2. Blogger Post Content Optimization

There is a difference between a writer and blogger. A writer can be anyone who writes to attract readers interest but a blogger is a skilled author who writes to attract both readers and search engines. A Blogger adopts a technical style by giving more value to rich keywords, word selection, intro paragraph length, images in posts, links and anchor tags in posts. You must be able to make your post extremely easy to be crawled and at the same time interesting and catchy for your readers and visitors. Post content is the soul of your blog. People often add too many keywords in post titles when focus should be The following post will teach you the magic art:

• Let Search Engines and Visitors enjoy your posts Note:- This post is a really old one but it is still valid and will give you some important tips.

3.  Post Title Optimization

Now here comes the King of all your content. Post titles are the backbone of your entire blog traffic. Post title is the first thing a robot crawls and it is the first thing that appears on Search results page followed by post url and then  a snippet from the post. The choice of keywords, word limit and use of characters is something that you understand. Following posts will help you a lot:

• How To Write Search Engine Friendly Post Tiles?
• Use H2 Tag for Post titles and kick H3
• Make Homepage title appear after post title
• Post title limit
• Shall you use Underscore or Dashes in post titles?

4. Image Optimization

After the introduction of image search technology, traffic through images can simply not be avoided. Every image on your post is a source for quality traffic if you tag them properly. With tags, images have no value because robots can not read graphics unless you tell it what the image is all about by adding its description inside alt text attribute. 

• How to tag images in blogger to drive traffic?
• Optimize Images before uploading them

5. Meta Description and Keyword

As the video below suggests meta keywords are not that important for Google at least but you must write a good meta description for your homepage.

• Why Meta Description appears in all Posts?
• Meta Tag Generator tool

6. Internal Linking

Linking one post with another helps robots to better dive deep into your content and index every single post and build a relationship among them. Always link related posts with one another just the way I normally do by pointing readers to previously published tutorials that are related to my current post. 

• Internal Link Pages To Flow the PageRank Juice  Note:- Old Post but valid

7. Nofollow Do's and Donts

Nofollow was introduced to filter low quality content from good. This link attribute is very hot term when it comes to PageRank juice. To understand what it is and when and where should it be added, read the following tutorials.

• Never Tag internal links as nofollow
• When should you tag external links as nofollow
• Add nofollow to Download and DEMO links along Iframe pages

8. Directory Submission

You might have seen several badges on every new blogs. Directories today are out-dated and there is no sense in expecting traffic from them. The biggest directory so far is DMOZ but it gives me no traffic value at all but adding your site to important directories helps in your search rankings indirectly. Read carefully the post below:

• Is directory submission a waste of time?

9. How To Improve PageRank?

I put my heart and soul in the following tutorial to explain its concept:

• 3 reasons why your PageRank do not increase

10. SiteLinks

Sitelinks appear on blogs with a minim of PageRank 2.0. It displays a table of your important 8 posts on Google search results page just below your homepage. It gives a completely different look to your blog on search pages. Read more about it here:

• Tell Google What links to display in sitemap

11. Organize Labels

You must not use more than 15-20 labels in order to keep blog navigation clean and easy both for readers and search engines. Read this:

• What are blog labels or categories?
• Add and delete blog labels

12. Blog Load Time

Just as much as your readers get annoyed with slow load time of your blog or website, similar is felt by a robot. Google values load time a lot in order to provide Google users a great searching experience by taking them to sites that load faster. Not everyone uses fast broadband connection and internet speed on smart phones is comparatively slower so you must maximize blog speed as much as you can.

• 11 useful tips to reduce blog load time

13. Best Traffic Tip

One of my blogging article of faith is posting daily and posting several times per day if you can afford. All the tips shared above are meaningless if you are not providing search engines with fresh content daily. Blogging is about daily updates and if you are not providing thirsty internet with innovative ideas daily then you are surely;y going to loose the wild race of traffic.

• Publish several posts per day to boost traffic!

Removing "Showing post with label...show all posts"

Step 1.

If you are using the old Blogger interface:

• Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

• Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Now find (CTRL+F) this code in the template:

<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>

Step 3. Delete the code from above and replace it with this one:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Save Template Now You Are Done 

Templates For Blogger

1. Template Collection From Spice Up You Blog [click here]

2. Template Collection From MyBloggerTricks [click here]

3. Template Collection From Bloggertemplates [click here]

30+ “Horizontal” Navigation Menus For Blogger With CSS & HTML Codes

Navigation menu or tab menu is the heart of every web page or blog. It provides the path way to all important pages of the website. To create a Navigation menu you must have good knowledge of CSS and HTML. But since more and more designers are sharing their tutorials online, coding has become far easier. I have brought to you a total of 30 High class navigation menus along with their CSS and HTML Codes from across the web. You just need to copy and paste the codes and that’s it!

The Horizontal Navigation Menus below are mostly created by Christopher and Highdots and some by me. I have modified most of the codes in order to make them work in blogger and have also made them pretty easy to be understood by most of you. Further all images are uploaded in my Picasa web album so no effort required on your side.

How To Add These Navigation Menus To Blogger

To add your selected navigation menu to your blogger template follow these steps,

1. Go To Blogger > Layout
2. Click Add a Gadget or Add a Page element
3. Choose HTML/JavaScript widget
4. Simple Paste the Navigation Menu Code inside HTML/JavaScript widget
5. Hit Save
6. Drag HTML/JavaScript widget and drop it just under your Blog Header, as shown below,

    7.   Finally view your blog to see something hanging below your Blog Header/Logo.

See Live Demo of MBT Navigation Menu #3

To change the links, Edit this part of the HTML in all codes below,

<li><a href="#" ><span>Link 1</span></a></li>
  <li><a href="#" ><span>Link 2</span></a></li>
  <li><a href="#" ><span>Link 3</span></a></li>
  <li><a href="#" ><span>Link 4</span></a></li>
  <li><a href="#" ><span>Link 5</span></a></li>
  <li><a href="#" ><span>Link 6</span></a></li>
  <li><a href="#" ><span>Link 7</span></a></li>

Replace the hash(#) sign with your Page Links /URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line,

<li><a href="#" ><span>Link n</span></a></li>

As a designer I always look for inspiration that can be useful for both my readers and for my designing projects.  I hope the resource below will be of great use to Bloggers from all platforms and to designers. Start choosing your favorite Navigation Menu and do not hesitate to ask me if you needed help in customizing it.

Live demo 1 :: Live Demo 2

Tip:- To See Demo Of Other Menus, Simply Copy Paste The Code Inside MBT HTML Editor and Hit Preview To See It Live.

MBT Navigation Menu [Click Here]

How to show post summaries with thumbnail on homepage for blogger

Automatic showing post summaries with thumbnail for blogger used in blogger posts and all this work is done by the script automatically, you just don't need to locate your image the script will do all work for you automatically. Just you have to write your post and publish it with one image in post related to post.

Lets start with its installation

Now Login to Blogger Go to Layout > Edit HTML in your Blogger dashboard and check the "expand widget templates" box.

Find the closing </head> tag in your blog template, and paste the following section of code immediately before it:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; 
div.innerHTML = summary;
}

//]]>
</script>

Note in above codes we can change the numeric numbers according to our need

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

Now find this code <data:post.body/> in your template and replace it with belowcodes.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More...</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Preview Your template if its showing thumbnail with "Read More", Save it.