How To Customize Or Edit The Linkwithin Related Postal Service Widget

LinkWithin is a real pop widget that shows the related posts amongst a thumbnail together with although it is non a novel gadget amidst bloggers, many avoid using it for its lack of customization. So, this tutorial volition exhibit you lot how to add together LinkWithin on a Blogger weblog together with how to customize it.

This is what nosotros volition create amongst this gadget:

• Change the place of the gadget;
• Remove the LinkWithin link;
• Change the "You powerfulness too like" championship amongst whatever other text;
• Add rounded borders to images;
• Remove the edge that separates posts;
• Add a background color;
• Change the background color on mouse over;
• Change the post service titles color together with font

Adding the LinkWithin gadget to Blogger

First of all nosotros quest to install the LinkWithin gadget. For this, nosotros convey to teach to the LinkWithin homepage together with type inward the required information:

Although it provides the selection to conduct Blogger equally a platform, nosotros volition select Other inward gild to implement the code straight into our template together with and then modify it. Select the let on of posts (stories) according to the width of the content expanse - if the width of the posts container is narrower, together with then it is recommended to display fewer related posts.

By clicking on the "Get widget!" button, we'll last given the code that nosotros quest operate it. It should hold off something similar this:

<script>
var linkwithin_site_id = XXXXXXX;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="LinkWithin is a real pop widget that shows the related posts amongst a thumbnail together with alth How to customize or edit the linkwithin related post service widget" style="border: 0" /></a>

That's the basic code nosotros quest to copy. Now login into your Blogger account > select your weblog to where you lot desire to add together the LinkWithin gadget together with teach to "Template" > click on the "Edit HTML" button:

Cick anywhere within the code expanse together with press the CTRL + F keys to search for the next line:

<div class='post-footer'>

Just inward a higher identify this line, glue the LinkWithin code.

By doing thus you lot already convey the LinkWithin gadget on your weblog together with the effect volition last similar this:

Note: If you lot would similar to display it solely inward post service pages, you lot tin enclose the code using a Blogger conditional tag.

Change the LinkWithin gadget location

By default, this widget volition ever look correct at the terminate of your posts. In the LinkWithin FAQ page nosotros tin detect solutions on how to fix this - merely add together the code below where nosotros desire the widget to appear:

<div class='linkwithin_div'/>

This volition brand the gadget to display correct where nosotros added the code. Even if nosotros don't desire to modify the gadget location, this business is required thus that nosotros tin customize it later.

Replacing the "You powerfulness too like" LinkWithin text

By default, the LinkWithin gadget shows the "You powerfulness too like" championship but nosotros tin modify the text to anything nosotros want. Just add together the business below inward bluish within the LinkWithin code:

<div class='linkwithin_div'/>
<script>
var linkwithin_site_id = XXXXXXX;
</script>
<script>linkwithin_text='Related Posts:'</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="LinkWithin is a real pop widget that shows the related posts amongst a thumbnail together with alth How to customize or edit the linkwithin related post service widget" style="border: 0" /></a>

And modify the text - inward this case, it volition exhibit "Related posts" instead of "You may too similar these stories".

Changing the LinkWithin background color together with thumbnails style

Within the template's code, search for the ]]></b:skin> tag together with exactly inward a higher identify it, add together the next CSS styling:

.linkwithin_div {
background: #EEEEEE; /* Background color for the related posts container */
padding: 0 10px;
border-top: 1px company #DBDBDB;  /* Top edge for the related posts container */
border-bottom: 1px company #DBDBDB;  /* Bottom edge for the related posts container */
}
.linkwithin_text {
font-family: Cambria,Georgia,sans-serif;
font-size:18px; /* Size for the related posts championship */
color:#898989; /* Color for the related posts championship */
}
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#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none;
}
.linkwithin_posts {
width: 500px !important; /* Width for the related posts container */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #F5F5F5 !important; /* Background color on mouseover */
}
.linkwithin_img_0 {
background: #F5F5F5;
border: 1px company #C1C1C1;
padding: 2px !important;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.linkwithin_img_0:hover {
background: #ffffff;
padding: 2px !important;
opacity:.6;
filter:alpha(opacity=60)
} 
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
.linkwithin_title {
color: #242424 !important; /* Color for titles */
font-family: Cambria,Georgia,sans-serif;
font-size: 12px !important; /* Font size of posts titles */
line-height: 24px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #000 !important; /* Color of posts titles on mouseover */
}

After adding this CSS, the LinkWithin gadget volition hold off similar this:

If you lot don't desire circular thumbnails, take the code inward red. In light-green you lot tin run across the parts which tin last customized - at that spot you lot tin apply to a greater extent than styles or modify the background color, text size, etc.

After you've made the changes, click on the "Save Template" button. So this is how nosotros tin customize the LinkWithin related posts widget. Enjoy!

Share this post