How to customize or edit the linkwithin related post widget
LinkWithin is a very popular puzzle that displays related posts in small amounts, and although it is not a new tool for bloggers, many people avoid using it because there is no no customization options. So this guide shows you how to add and configure LinkWithin to the Blogger blog.
Here is what we do with this widget:
Although we can select Blogger as our platform, we can choose " Other " to insert and modify the code directly in our template. Select the number of messages according to the size of the content: if the inbox is small, it is recommended to display similar messages.
Click the " Get Gadget! " to get the code you need to use it. It should look like this.
Click anywhere on the code box to find the next line and press CTRL+F.
Here is what we do with this widget:
- Change the location of the widget;
- Delete the connection;
- Replaces "You might like" in any other article;
- Add rounded edges to images;
- Remove boundary posts;
- Increase the background color;
- Change the background color when the mouse moves;
- Change the color and font of letterheads
Add LinkWithin Widget to Blogger
First we need to install the LinkWithin tool. To do this, you must go to the LinkWithin home page and enter the necessary information.Click the " Get Gadget! " to get the code you need to use it. It should look like this.
This is a master code that we need to copy. Now login to your Blogger account > Select the blog you want to add to the LinkWithin tool and go to "Template" > Click on the "Edit HTML" button.
Click anywhere on the code box to find the next line and press CTRL+F.
Just above this line post the LinkWithin code.
So you already have the LinkWithin tool on your blog and the result will be the followingKeep in mind. If you only want to display it on post pages, you can include the code in the Blogger status tag .Change device location in Link
By default, this puzzle will always appear at the bottom of your posts. On the LinkWithin FAQ page, you can find solutions to solve this problem ; Add the code below that we want the puzzle to look like.This will show that we have successfully added the widget. Although we don't want to change the location of the widget, it is important to configure this line later.Replaced "You might like it" link text.
By default, the LinkWithin tool displays the title " You might like it", but you can modify the text as you wish. Just add the line below to the LinkWithin code with the blue symbol.And change the text; In this case, instead of " Related Posts ", it says " You might like these stories ".
Change Linkbine background color and add nail style
Search in model code ]]> And just add the following CSS style..linkinside_div {After adding this CSS, the LinkWithin tool looks like this.
Context #EEEEEE; /* Background color for related post title */
Screen: 0 10 pixels;
Top border: 1 solid pixel #DBDBDB; /* Top border of associated message header */
Bottom border: 1 solid pixel #DBDBDB; /* Bottom border of associated message header */
}
.link_text {
Font family: Cambria, Georgia, Sans-serif;
Font size: 18 pixels; /* Connected mail header size */
Color Matrix #898989; /* Associated mail holder */
}
un#enlacedentro_logoenlace_0, un#enlacedentro_logoenlace_1, un#enlacedentro_logoenlace_2, un#enlacedentro_logoenlace_3, un#enlacedentro_logoenlace_4, un#enlacedentro_logoenlace_5, un#enlacedentro_logoenlace_6, un#enlacedentro_logoenlace_1,#enlacedentro_logoenlace_1,#enlaceo un #enlacedentro_logoenlace_15, un #enlacedentro_logoenlace_16, un #enlacedentro_logoenlace_17, un #Linkkin_Loglink_0, #Linkkin_Loglink_0, #Linkkin_Loglink_0
Screen screen yes;
}
posts in .link {
Width: 500px! Important; /* Width of associated message header */
}
posts in .link {
Border 0! Important ;
Ground - Right: 10 pixels! Important;
}
.linkinin_posts Scroll to ፡
Background: #F5F5F5! Useful; /* Mouse background color */
}
.linkinside_img_0 {
Background # F5F5F5;
Limit: 1 solid pixel #C1C1C1;
Ground: 2 pixels! Important;
Transition: All .2s linear;
-o-transition: all 0.5 are linear;
Transition-Banana: All .2 are linear;
- webkit transition: all linear .2;
}
.linkinin_img_0 ፡ scroll scroll {
Clean background #ffffff;
Ground: 2 pixels! Important;
Clear transparency .6;
Filter-alpha filter (darkness = 60)
}
.linkinside_img_0 div, div.linkinside_img_0,
.LinkSide_img_1 div, div.linkinside_img_1,
.link_img_2 div, div.linkin_img_2,
.inlink_ide_img_3 div, div.linkinside_img_3,
.link_img_4 div, div.linkin_img_4,
.link_img_5 div, div.linkin_img_5,
.LinkSide_id_img_6 div, div.linkinside_img_6,
.linkinside_img_7 div, div.linkinside_img_7,
.linkinside_img_8 div, div.linkinside_img_8,
.LinkSide_img_9 div, div.linkinside_img_9,
.link_img_10 div, div.linkin_img_10,
.link_img_11 div, div.linkin_img_11,
.link_img_12 div, div.linkin_img_12,
.linkinside_img_13 div, div.linkinside_img_13,
.link_img_14 div, div.linkin_img_14,
.link_img_15 div, div.linkin_img_15,
.link_img_16 div, div.linkin_img_16,
.link_img_17 div, div.linkin_img_17,
.link_img_18 div, div.linkin_img_18,
.link_img_19 div, div.linkin_img_19,
.linkin_img_20 div, div.linkin_img_20 {
-webkit-border-radius: 100px;
-Moses-Boundary-Radius: 100 pixels;
Bounding radius: 100 pixels;
}
.Linkin_ Title {
Color: #242424! Useful; /* Header color */
Font family: Cambria, Georgia, Sans-serif;
Font size: 12 pixels! Important; /* Post title font size */
Line height: 24px! Important;
Text alignment: centered;
Text layout: None;
}
.linkinin_title ፡ scroll scroll {
Color: #000! Important; /* Set title color to move */
}
If you don't want round thumbnails, delete the code marked in red. The green color indicates customizable components; Here you can apply additional patterns or background color, text size, etc.
After making changes, click the "Save Template" button. This is how you can configure the linked publishing tool LinkWithin . comfort!
