Install "Related Content" Widget On Blogger Mobile Template

Related content widgets on any site or blog can help in increasing "average  time on site" by your visitors. These widgets shows the content on the website or blog which is related to the content on which user is already. This can get you more page views because visitors can visit other pages on the website due to his interest in that particular content.

In this tutorial I will show you how to install related content widget on blogger desktop version template and mobile version template also.


You can install these type of widgets from nrelate and linkwithin.

nrelate Related Content Widget

For Desktop Version Template

• Goto nrelate.com and click on Install on the navigation menu.
• Select 'Related Content' from the products.
• In the platform click on the Blogger Logo.
• Scroll down the page to Installing without signing up for an account (installing with default settings) and select the link according to your choice "Install on post pages only" and "install on Homepage and post pages".
• Now, click on Add nrelate Widget button

• Now, in Add Page Element select your blog, delete title and click on Add Widget and you have done!

To change the widget setting you can Partner Login on nrelate website by registering your account first. You can change color, style, thumbnail size and other setting of this widget by logging in partner site.

For Mobile Version Template

• First You need to Install nrelate version for desktop version template on blogger. If you have already installed skip this step.
•  Goto blogger and login and then goto to your blog Layout.
• Now click  "Edit" on nrelate widget.

• Now a pop up window will open including the code of nrelate, in this window check the address bar for widgetId. For example your widgetId is XYZ, copy your widget id.

• Now goto your blogger template and click on Edit HTML button.
• Check on Expand Widget Templates and now search for you widget id by pressing Ctrl+F and pasting your widgetId in the find box.
• Now look for the code below

 <b:widget id='XYZ' locked='false' title='' type='HTML'>  
 <b:includable id='main'>  

• Replace the above code with the code below:

 <b:widget id='XYZ' locked='false' mobile='yes' title='' type='HTML'>  
 <b:includable id='main'> 

Don't Forget To replace XYZ with your nrelate widget id.

• Now, save your template.
• Now, click on customize mobile template in the template window of blogger.

• Choose Custom mobile Template and click on save.
• Your work is done now, widget will be flashing on mobile version of your blogger blog.

 Also Read:  How to add custom link to your blogger header image