How to customize or edit the linkwithin related post widget

LinkWithin is a very popular tool that displays related posts with a thumbnail and although it is not a new tool among bloggers, many avoid using it due to lack of customization options. So, this guide will show you how to add LinkWithin a Blogger blog and how to set it up.

Here's what we'll do with this tool:

• change the position of the tool;
• Remove LinkWithin;
• Replace the title "You may also like" with any other text;
• Add circular border to image;
• Remove the ribs by separating the racks;
• Add background color;
• Change background color on hover;
• Change the color and font of the article title

Add LinkWithin Widget to Blogger

First we need to install the LinkWithin tool. To do this, we must go to the LinkWithin home page and enter the required information :

Although we can choose Blogger as our platform, we will select " Other " to run the code directly in our template and then modify it. Limit the number of posts (stories) to the width of the content area: If the width of the post container is narrow, it is recommended to display less related posts.

Click on Get Widget! » We get the code we want to use. It should look like this:

We need to copy this base code. Now login to your blogger account > select your blog where you want to add LinkWithin widget and go to "Templates" > click on "Edit HTML" button:

Click anywhere in the code area and press CTRL+F to find the following line:

Just above this line, paste the LinkWithin code.

So your blog already has a LinkWithin widget and the result will look like this:

Note. If you want to display it only on post pages, you can attach the code using conditional blogger tag .

Change the location of the LinkWithin gadget

By default, this widget will always appear at the end of your post. On the LinkWithin FAQ page, we can find a solution to this problem - just add the code below where we want the widget to appear:

A gadget will appear where we directly added the code. Although we don't want to change the position of the widget, this line is necessary so that we can customize it later.

Linkin replaces the "You may also like" text

By default, the LinkWithin tool displays the title " You may also like this ", but we can change it to whatever we want. Just add the following line highlighted in blue to the LinkWithin code:

And change the text: In this case, it will display " Similar posts " instead of " You may also like these stories ".

LinkWithin changes the background color and thumbnail style

In the template code, find ]]> And add the following CSS style just above:

.linkwithin_div{
Background: #EEEEEE; /* background color of corresponding mail container */
padding: 0 10px;
top border: 1px solid #DDBBB; /* upper limit of corresponding mail container */
bottom border: 1px solid #DDBBB; /* bottom edge of corresponding message container */
}
.linkwithin_text{
Font families: Cambria, Georgia, Sans Serif;
font size: 18px; /* Linked article title size */
Color: #898989; /* related article title color */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#link_within_logo1, a#linkwithin_logolink1 , a# linkwithin_logolink_14, a# linkwithin_logolink_15, a# linkwithin_logolink_16, a# linkwithin_logolink_17, a# linkwithin_logolink_18, a# linkwithin_log
Do not display;
}
.linkwithin_posts{
Width: 500px! important; /* Display the appropriate message container */
}
.linkwithin_post {
Limit: 0! important;
Exact space: 10px! important;
}
.linkwithin_posts to: pass {
Background: #F5F5F5! important; /* background color on hover */
}
.linkwithin_img_0 {
background: #F5F5F5;
border: 1px solid #C1C1C1;
padding: 2px ! important;
Transition: Linear every 2 seconds;
-o-change: all 0.5 linear;
- Banana jump: every 2 linear seconds;
-webkit-transition: all .2 linear;
}
.linkwithin_img_0 : pass {
background: #ffffff;
padding: 2px ! important;
opacity: 0.6;
Filter: Alpha (Opacity = 60)
}
.linkwithin_img_0 section, .linkwithin_img_0 section,
.linkwithin_img_1 section, .linkwithin_img_1 section,
linkedin_img_2 div, div.linkin_img_2,
.linkwithin_img_3 section, .linkwithin_img_3 section,
.linkwithin_img_4 section, .linkwithin_img_4 section,
.linkwithin_img_5 section, .linkwithin_img_5 section,
.linkwithin_img_6 section, .linkwithin_img_6 section,
.linkwithin_img_7 section, .linkwithin_img_7 section,
.linkwithin_img_8 section, .linkwithin_img_8 section,
.linkwithin_img_9 section, .linkwithin_img_9 section,
.linkwithin_img_10 div, .linkwithin_img_10 div,
.linkwithin_img_11 section, .linkwithin_img_11 section,
.linkwithin_img_12div, .linkwithin_img_12div,
.linkwithin_img_13 div, .linkwithin_img_13 div,
.linkwithin_img_14 div, .linkwithin_img_14 div,
.linkwithin_img_15 div, .linkwithin_img_15 div,
.linkwithin_img_16 div, .linkwithin_img_16 div,
.linkwithin_img_17div, .linkwithin_img_17div,
.linkwithin_img_18 div, .linkwithin_img_18 div,
.linkwithin_img_19 div, .linkwithin_img_19 div,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
.linkwithin_title{
Color: #242424! important; /* header color */
Font families: Cambria, Georgia, Sans Serif;
Font size: 12 pixels! important; /* font size for article title */
line-height: 24px ! important;
text aligned: center;
Text Format: No;
}
.linkwithin_title: hover {
Color: #000! important; /* post title color on hover */
}

After adding this CSS, the LinkWithin widget will look like this:

If you don't need circular thumbnails, remove the red code. The green color shows the parts that you can customize: you can apply additional styles or change the background color, text size, etc.

After making changes, click on "Save Form" button. Here's how we can set up the LinkWithin related post widget . Have fun, have fun!