How to create related posts widget in blog template

conanclose 5:44 AM HTML Editing, HTML Learning

The related posts widget is a very important feature in a blog. It displays title and a short description of other similar posts written by you under the same label. This will draw the attention of your readers thus increase the traffic. This is a simple process. You have to just add some scripts to your blog’s HTMK document. The detailed procedure is as under-

Blog related post widget

Click template and take a backup of it.

Next Click edit HTML(Now the HTML file will open)

Click anywhere in the open HTML file.

Press and hold ‘CTRL’ key and hit ‘F’(Now the HTML search box will open in the top right hand corner of the HTML document.

The scripts for related post are to be added in the head section of the document i.e. between and tags. Therefore we need to find “”.

To find copy and paste it in the HTML search box in the top right hand corner of the HTML document and press enter.

Now the tag will be highlighted and we have to paste the script above .

During the process or on a later date you may need to relocate the script therefore it is advisable to add a comment in the start and in the end.

Read on - How to Verify your Blog or Siteownership at Google Webmaster

Now carefully copy and paste the following script above the tag.

The above code is designed to show 5items as related posts and you can change the figure 5 to display the number of posts to be shown as desired by you.

This script will display a post summary of 70 characters. To change the number of characters in the post summary please change the figure 70

Read on - Comments in HTML What is the need How towrite Comments in HTML

To add the styles to your widget add the following CSS code.

This code will also go in the head section and as you have just pasted a script in the head section and you are already there so please paste the following script above the tag.

Customize as per your choice by carefully editing the codes in green color.

Check this code in the above script-

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

If you don’t edit it, the thumbnail or the Image will appear exactly round. As you go on reducing the figure 50 to a smaller number it will start converting to a rectangular shape so please edit is ad per your wish.

Read on -How to set your blog header image alignment using BloggerTemplate Designer

Replace summarycolor;, E5E5E5,and linkcolor with the CSS color codes of your choice.

change 120px to change the size of the widget area.

Change 82 to change the size of the thumbnail.

Finally you have to locate the “>” tag just above the “” tag. So please paste “” in the HTML search box and press enter key. The “” tag will appear like given in the image below.

Finding a tag

Now paste the code given below just above the “” tag.

You can change this text for example “YOU MAY ALSO LIKE TO READ” or “YOU MAY BE INTERESTED IN” etc.

Read on - SearchEngine-How it works, index websites and decides Precedence web pages

That’s all and you are done.

Safely save your template.

Note – The Related Posts are displayed depending on your labels. So if you have not properly defined your labels or a label contains only one post, the widget may not appear or you may get an error message.