Add Related Posts Widget to Blogger or Blogspot

It be better to display related or similar articles below your articles or posts on your blog. This way your readers would easily know that there are related articles you written and they can further read.

The steps to adding related posts widget is easy. It would take less than 3 minutes add it on your blog.

Before starting, make sure to download the related post JavaScript file or ccopy and paste its content to your desired file.js. Then make sure to upload it online where it will be available for import on your template. I recommend you to upload it on Weebly.com, SigMirror.com or HotLinkFiles.com to get a DIRECT LINK to that file.

Step 1: Most important of all, backup your template incase something go wrong or messed up. Goto www.blogspot.com "Layout" portion, then go to "Edit HTML" section. Download present template and make sure to secure the copy on your file storage device.

Step 2: Click on "Expand widget templates" and look for this code:

</head>

and on top of it insert the following code:

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://www.weebly.com/..../relatedposts_forblogger.js' type='text/javascript'/>
<!--RelatedPostsStops-->

Replace the red link above with your own direct link.

Step 3: Look for the code:

<data:post.body/>

Under it, insert the following code:

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

To limit the maximum number of related or similar articles to display under the post, just change max-results=xx by the number you like.

Finally, save your template and test. Related Posts widget should be located under your article or post. Do remember to add categories or labels before you publish your post. Otherwise, no related post will be displayed. 

Hope this tutorial helps.

Best Tool for Monitoring Social Media or Websites

I found a great site or tool for monitoring social media or social networking websites like Twitter, Facebook, FriendFeed, YouTube, Digg, Google etc. If you wanted to know what people are saying about you, an event, any person or anything,  I recommend you do a visit and perhaps, try out Social Mention services. 

They have a Realtime Buzz Widget which is very interesting, very useful and very easy to use or integrate on any blog platform whether it be Wordpress, Blogger or others. It is as easy as adding a JavaScript widget into your blog template. It does not require programming skills. all you need to do is to copy the html, set the search phrase and title, and put it on your site. The code below are the only code you'll need to add into your blog.

//See latest code on http://socialmention.com/tools/ page.
//***********************************************************
<script type="text/javascript">
// search phrase (replace this)
var smSearchPhrase = 'socialmention';
// title (optional)
var smTitle = 'Realtime Buzz';
// items per page
var smItemsPerPage = 7;
// show or hide user profile images
var smShowUserImages = true;
// widget font size in pixels
var smFontSize = 11;
// height of the widget
var smWidgetHeight = 500;
// sources (optional, comment out for "all")
//var smSources = ['twitter', 'googleblog', 'brightkite', 'delicious', 'friendfeed', 'flickr', 'identica', 'youare', 'digg'];
</script>
<script type="text/javascript" language="javascript" src="http://socialmention.com/widgets/buzz.js"></script>

The code will result to: 

In my opinion and as a person who likes to write, read and share articles online and loves the internet, I find this widget very helpful and useful. Thanks to Jon Cianciullo ,the person behind this project that allows us to easily track and measure what people are saying about you, your company, a new product, or any topic across the web's social media landscape in real-time. 

Webmaster Tools Tip for Blogger

During my research about webmaster tools, I found out that there are three major search engine that provides detailed information on how they see and crawl your website. However, they require account confirmation and website verification before you can access most of its features. Below are the steps on how you'll be able to take advantage of those search engine webmaster tools.

Google Webmaster Tools

1. Log in to https://www.google.com/webmasters/tools/ with your Google account.
2. Enter your blog URL and click Add Site.
3. You will be presented with several verification methods. Choose Meta Tag.
4. Copy the meta tag, which looks something like
   <meta content="dBw5CvburAxi537Rp9qi5uG2174Vb6JwHwIRwPSLIK8" name="google-site-verification"></meta>
5. Leave the verification page open and go to your blog Dashboard > Layout > Edit HTML.
6. Open the Blogger Dashboard and paste the code after <head> tag.
7. Click on Save Template.
8. Go back to the verification page and click Verify.

Yahoo Site Explorer

1. Log in to https://siteexplorer.search.yahoo.com/ with your Yahoo account.
2. Enter your blog URL and click Add My Site.
3. You will be presented with several authentication methods. Choose By adding a META tag to my home page..
4. Copy the meta tag, which looks something like
   <meta content="3236dee82aabe064" name="y_key"></meta>
5. Leave the verification page open and go to your blog Dashboard > Layout > Edit HTML.
6. Open the Blogger Dashboard and paste the code after <head> tag.
7. Click on Save Changes.
8. Go back to the verification page and click Read to Authenticate.

Bing Webmaster Center 

1. Log in to http://www.bing.com/webmaster with your Live! account.
2. Click Add a Site.
3. Enter your blog URL and click Submit.
4. Copy the meta tag from the text area at the bottom. It looks something like
   <meta name='msvalidate.01' content='12C1203B5086AECE94EB3A3D9830B2E'>
5. Leave the verification page open and go to your blog Dashboard > Layout > Edit HTML.
6. Open the Blogger Dashboard and paste the code after <head> tag.
7. Click on Save Changes.
8. Go back to the verification page and click Return to the Site List.

After doing those, hopefully you can now start monitoring your site on those three major search engines by using there respective webmaster tool. It will take time before it gets all the necessary data.

So, that ends my article. Hope you find this article helpful and if you have any suggestions feel free to leave a comment or shoot me an email.

Blogger or Blogspot Title Tag Optimization Tip

I know there had been lots and lots of title tag optimization tip written online. However, I thought of sharing what best and works to me among all those I have read and researched online. I made a little bit of improvement to make search engine bot crawlers read my blog title efficiently. 

We do know that blogger is part of Google, however, blogger default templates are poorly optimized. To be able to compete woth other blogs, there are few things to do and that includes optimizing your blogger title tag.

The title tag is a critical part of optimizing your blogger or blogspot blog. Its the one that search engine look over when they crawl your blog links. For example, Google only looks at the first 80 characters of your blog's post title. So say for example on your default template title is rendered like: (green for blog title and orange for post title)

Techie Boy from CDO - Tutorial on Android Layout

The above wasted 20 characters occupied by the blog title which should instead be occupied by the post title. To fix the above, it should look like:

Tutorial on Android Layout - Techie Boy from CDO

Moreover, other search engines does not just read titles. Some read meta tags for description and keywords to locate your website. So, its important to also include and place relevant meta tags on your title.

So, lets begin:

1. Go to your Layout and Edit HTML tab. Check option Expand Widgets Templates and look for the following tag:

<title><data:blog.pagetitle/></title>

2. Optimize the title by replacing the code by:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
        <h1><title><data:blog.title/></title></h1>
        <meta content='Provide description' name='Description'/>
        <meta content='Provide keywords' name='Keywords'/>
    <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
            <h1><title><data:blog.title/></title></h1>
            <meta content='Same description above' name='Description'/>
            <meta content='Same keywords above' name='Keywords'/>
        <b:else/>
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <h1><title><data:blog.pageName/> ~ <data:blog.title/></title></h1>
            <meta expr:content='data:blog.pageName' name='Description'/>
            <meta expr:content='data:blog.pageName + data:blog.title +data:blog.pageTitle' name='Keywords'/>
        <b:else/>
            <h1><title><data:blog.pageTitle/></title></h1></b:if>
        </b:if>
    </b:if>

3. Save template and your done!

Nutshell:

This tip is just one way of optimizing your blog. SEO is difficult so to speak. There are calculations and many different ways. Another way of gaining visitors is making use of widgets like Share, Facebook Fan Page, Google Connect, RSS feeds, adding your page or blog on search engines and relevant blog directories, and many, many more...

Hope you find this article helpful. Good luck and have fun!