How To Setup Linkwithin Related Posts Widget In Blogger And Customize It

For those of you who are using Blogger, Linkwithin widget site just instructs you to paste the code within the </body> tag.

But with this method, you cannot make changes or customize it.

For instance if you want to centralize the row of thumbnails under the blog posts to make it neater or use a different title instead the default "You might also like". 

If you want to customize or hack it as I have just mentioned, this is what you do:

STEP ONE: Get The Widget

1. Go to: http://www.linkwithin.com/learn

2. Type in your email, blog URL and select the number of thumbnails you want them to appear below your post.

3. IMPORTANT: For the Platform box, select "Other".

4. Then click the "Get Widget" button.

5. You should get a set of code like this:

<script>
var linkwithin_site_id = XXXXXXX;
</script>
<script>linkwithin_text='Related Posts:'</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

  STEP TWO: Where To Paste The Code

1. Log into your Blogger Dashboard.

2. Click on "Theme".

3. Click on "Edit HTML".

4. Look for this this line:

<div class='post-footer'>

How to look for this line:

Press down "Ctrl" and "F" and a bar with an empty box will pop up below your computer screen.

Now copy the above code and paste it inside the empty box. Automatically it will highlight it for you among all the code.

6. Now paste the code above (#5) just ABOVE <div class='post-footer'>.

7. Finally click "Save template" button above.

8. That's all. Now you should be able to see a row of thumbnails under your blog post.

But you notice the row of thumbnails is aligned to the left. And the the title above is: "You might also like".

Probably you might like to centralize the row of thumbnails and also use your own title, something like: "More Interesting Posts Here" or "Related Posts".

Just like what I have done to this blog.

Here are tips what you need to do to make these two changes.

Centralize Linkwithin Thumbnails

1. You need to add this line:

<center><div class='linkwithin_div'/></center>

ABOVE the code.

2. So now it should look like this:

<center><div class='linkwithin_div'/></center>
<script>
var linkwithin_site_id = XXXXXXX;
</script>
<script>linkwithin_text='Related Posts:'</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

3. Click the "Save template" button.

Replace "You might also like" Title

1. Go back to the code which you have just customized, now add this line:

<script>linkwithin_text='XXXXXXXXXXX'</script>

2. Replace XXXXXXXXX to whatever title of your choice.  

3. Then click "Save template" button.

So if you make both changes as suggested, then the whole code should look like this:

<center><div class='linkwithin_div'/></center>
<script>
var linkwithin_site_id = 704661;
</script>
<script>linkwithin_text='XXXXXXXXXX'</script>
<script src='http://www.linkwithin.com/widget.js'/>
<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>

4. Hope you understand and get it done without any problem