Related Posts Widget For Blogger - Optimized Version

Display thumbnails of posts having same labels or categories at the bottom of each blog page engages the reader more and increases the pageviews. By far we have two best related posts gadgets created so far one is by linkwithin which I am sharing in this tut and another one displays just links and I will share it in my next post. This widget Loads fast and you don't need to install any scripts for this as the widget codes are stored on linkwithin servers. This tutorial is the most detailed one ever written on linkwithin so kindly follow the steps carefully. Please see a demo first,




Live Demo

Add Linkwithin to Blogger

The steps are very simple:

1. Go To Linkwithin
2. Fill up the easy blanks and do as they say. The screenshot below will help,

  3.   Keep the width to three stories i.e three thumbnails if your post width is less than 500px
  4.   Hit the Get Widget button and then click the Install Widget link on the next page as shown below,

  5.   Change the Title to Related Posts: or anything you may like as shown below,

  6.  Now Click the Edit Template Link

  7.   Replace the code that you see with this one:

<b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if></b:includable>

The above code will hide the thumbnails from appearing on homepage.
  8.   Next click the Edit Content Link and add the following additional code just above the code inside the widget,

<script>linkwithin_text='Related Posts:'</script>

Replace Related Posts:  with any text you want.
   9.  Finally hit the ADD WIDGET button.
  9.  Once you are taken to the Page Elements page of your blogger account, simply drag the widget to the bottom of your post body as shown below,

   10.  Click the "Save" orange button at the top-right corner and you are done!
Let me know if you needed any further help on this. I hope the slight customization may prove helpful to you. Peace.

Customize LinkWithin Stylesheet - Add Some colors!

Just recently while redesigning a client's website, we figured that Linkwithin can completely be customized by overriding its default stylesheet. We used Google Chrome to identify the classes and IDs. This let us change the background colors of the thumbnail images, change the title text color and margining, add cool hover effects and most importantly remove the linkwithin credit link and logo link that appears towards the bottom-right corner of the plugin.  We have created a sample style with dark theme and we would like to share the stylesheet, using which you can add your creative new looks to it and blend it perfectly with your blog looks and feel. Both BlogSpot and wordpress users would find this tutorial useful because all you would need to do is to copy and paste a simple CSS code. Lets get to work!

Live Demo

Install LinkWithin

If you have not yet installed linkwithin widget on your blog then kindly first install it:

• Read: Install linkwithin on Blogger 

Linkwithin Custom Stylesheet

Note: Wordpress users will need to paste the stylesheet below by going to Appearance > Editor. 
I will be sharing steps for blogger blogs here.

1. Go To blogger > Template
2. Backup your template
3. Click Edit HTML > Proceed
4. Search for this style tag:

]]></b:skin>

     5.   Just above it paste the following:

/* -----Linkwithin Stylesheet by www.MybloggerTricks.com----- */

#linkwithin_logolink_0 {
display:none!important;
}
#linkwithin_logo_0 {display:none;}
#lws_0 {
clear: both!important;        margin: 0 0 20px 0!important;    
}

.linkwithin_outer{
margin: 0 0 20px 0!important;    
}
.linkwithin_text {
color:#FF683F!important;
font-size:16px!important;
padding-bottom:5px!important;
}
.linkwithin_posts a {
background:#333333 !important;
border-right:1px solid #404040!important;
}
.linkwithin_posts a:hover {
background:#666666 !important;
}
.linkwithin_img_0 {
border: 2px solid #dddddd !important; padding:2px !important;  width:100px!important; height:100px!important;
}
.linkwithin_img_0:hover {
border: 2px solid #333333 !important; padding:2px !important;
}

.linkwithin_title {
color:#ffffff !important;
font-family:'tahoma', sans-serif !important;
font-size:11px !important;
line-height:14px !important;
text-decoration: none;
border-top:1px solid  #ddd !important;
}
.linkwithin_title:hover {
border-top:1px solid  #333 !important;
}

Make these changes to change the colors. Tip: Use our Color Tool

• To change the color of the text "You Might Also Like" simple change the hexadecimal color code value #FF683F
• To change the font size edit 16px
• To change the container background color in active mode edit #333333
• To change the container background color in mouse hover mode edit #666666
• To change the color of the separator between each thumbnail please edit #404040
• To change the border across each thumbnail in active mode edit #dddddd image
• To change the border in mouse hover mode edit #333333
• To change the post title links colour edit #ffffff

       6.   Save your template and you are all done!
Visit your blog and see it blended just perfectly! :)

How it works?

To force the browser to ignore official stylesheet provided by linkWithin server link and except our custom one, I simple override all attributes with the addition of !important. It's a normal practice to override styles when duplicate properties exists on a webpage. 

How to change the text?

By default linkwithin displays "You may also like these stories:" If you want a custom text like "Related stories" or "You Might also like" or any text you like please add the following code inside the linkwithin widget that must be present in your layout.

<script>linkwithin_text='You Might Also Like:'</script>

Change the highlighted text into anything you like.
If you could not locate the widget then paste the above code inside your template just below the <head> tag

Increase Stories without re-installing the widget

When you first install this plugin, linkwithin would ask for your Email Id and blog URL and then control your settings using a unique user ID. This Id would remain the same no matter how many times you delete or reinstall the plugin on your blog.

If you want to increase the number of thumbnail images then simply go to Linkwithin  and submit the same Email address with which you created the plugin for the first time and also submit the blog URL. Platform is optional. Set width to the number of stories you want to display. Each story represents a Thumbnail image.

Hit get widget and all done!  Do not copy any code and go and refresh your blog to see the plugin updated automatically.

Need help?

If you need help with regard to the alignment and margining of the plugin or any other customization related query then do let me know. Create your artistic designs and share them with all of us. I really like the linkwithin plugin. It displays posts based on relevancy linked with the labels/categories you create. It also loads fast and consumes less kilobytes of transfer data when page is loaded.  I strongly prefer it over custom widgets that increase blog load time and does not look professional. I just hope you find this tutorial helpful. Peace and blessings buddies. :)