How to Add Related Post Widget to Blogger [ With Pictures ]

2 comments

You can promote your blog in many ways, such as sharing your posts on social media, interlinking them, backlinking, etc. Related posts are one way to promote the blog as well.

So you may have questions about how it is a way of promoting

A related post is a way to promote your blog from within the blog. But how is it? If you have a related post widget on your blog, it will appear whenever any visitor visits your site. If the visitor scrolls down the page at the end, you will see posts related to the topic, and the chances are very high that they will also click on that post because they may have an interest in that topic. So users will definitely check that content also.

So the question is, how do you install it on your blog?

To install it, you can follow the steps below, but before you go and follow the steps, make sure you have created some content and a label for your blog. The content can be around 5 to 6 blog posts, and each one should have one label.

There are two ways in which you can install the related post widget on Blogger. The first is through a website that provides direct installation. With this method, you don't need to take a deep dive into HTML code.

If you are not good at finding or coding, then you can choose the second method, which I have described below in the article. If you are familiar with HTML and CSS, you can take a look at the edit HTML option within Blogger. Which is the first method.

First Method

If you have selected this method, then I am assuming that you know a small part of coding and can understand and edit the code.

Let's take a small deep dive into HTML and CSS coding.

1. Go to the blogger dashboard and sign in with your account.

2. Navigate to the theme section from the sidebar of the dashboard. 

Theme section

To make the theme error-free, make sure you restore the theme by clicking on the customize drop-down button. 

3. Go to the layout section and add a widget, then paste the below code into the widget.

Layout Section of blogger

<script src="//cdn.rawgit.com/salmanarshad2000/blogger-related-posts-widget/v1.0.4/related-posts.min.js" defer></script>

4. Then go to the theme section, click on the customize drop down, click on edit HTML, and add this CSS code just above the ]]></b:skin>.

Edit html blogger

#blogger-related-posts ul { padding: 0; list-style-type: none; text-align: center;

}

#blogger-related-posts li {

    float: left;

    margin: 0 1%;

    width: 18%;

}

#blogger-related-posts a {

    display: block;

}

#blogger-related-posts span {

    display: block;

    margin: 0 auto .5em;

    width: 72px;

    height: 72px;

}

#blogger-related-posts ul:after {

    content: "";

    display: block;

    clear: both;

}

Second Method (Easy Installation) 

If you decide on this method, there is nothing wrong with it. Because you like the easy way. Follow the steps below carefully to install the widget. Make sure to back up your template before installing the widget.

1. Sign up for an account on "Add this website."

Add this sign up

Login with your account.

2. Navigate to the tool section, then click on the "add new tool" option.

Tools

3. Click on the Related Posts Tool.

Related Post Tool

If you want, you can use this website to install, share buttons, follow, list building, link promotion, and website tip jars without having to look at code.

4. From the select tool type menu, choose the footer tool, then click continue.

Footer tool

You can change various settings if you want.

5. After making the settings, click on the Activate Tool.

Activate Tool add this

Then you will be redirected to the Add this website dashboard.

6. Click on the "get the code" option. Copy the code from there, and paste the code just above the </body> tag.

Get the code

That's all there is to it; using this tool, you can effortlessly install the related post widget without having to enter any code.

So which one of the methods will you try? Tell me in the comment section.

And are you able to install it? If not, comment down below, and I will answer you.

Share this article if you find it helpful.

Sharing is caring.

SAQUIB SHAIKH
SAQUIB SHAIKH
My name is Saquib Shaikh and I am a Technology enthusiast. I like to write about everything from smartphones to tech gadgets.

Related Posts

2 comments

  1. how to add related post without using any script

    ReplyDelete
    Replies
    1. There is no way to use related posts without coding. You can consider changing the theme, which has a related post widget already.

      Delete

Post a Comment