How To Customize Or Edit The Linkwithin Related Postal Service Widget

LinkWithin is a really pop widget that shows the related posts with a thumbnail in addition to although it is non a novel gadget with bloggers, many avoid using it for its lack of customization. So, this tutorial volition present yous how to add together LinkWithin on a Blogger spider web log in addition to how to customize it.

This is what nosotros volition produce with this gadget:

• Change the place of the gadget;
• Remove the LinkWithin link;
• Change the "You mightiness likewise like" championship with whatsoever 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 transportation service titles color in addition to font

Adding the LinkWithin gadget to Blogger

First of all nosotros quest to install the LinkWithin gadget. For this, nosotros bring to become to the LinkWithin homepage in addition to type inward the required information:

Although it provides the selection to direct Blogger equally a platform, nosotros volition select Other inward fellowship to implement the code straight into our template in addition to therefore modify it. Select the release of posts (stories) according to the width of the content expanse - if the width of the posts container is narrower, therefore it is recommended to display fewer related posts.

By clicking on the "Get widget!" button, we'll endure given the code that nosotros quest piece of job it. It should await 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 really pop widget that shows the related posts with a thumbnail in addition to alth How to customize or edit the linkwithin related transportation service widget" style="border: 0" /></a>

That's the basic code nosotros quest to copy. Now login into your Blogger account > select your spider web log to where yous desire to add together the LinkWithin gadget in addition to become to "Template" > click on the "Edit HTML" button:

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

<div class='post-footer'>

Just higher upward this line, glue the LinkWithin code.

By doing therefore yous already bring the LinkWithin gadget on your spider web log in addition to the upshot volition endure similar this:

Note: If yous would similar to display it alone inward transportation service pages, yous tin enclose the code using a Blogger conditional tag.

Change the LinkWithin gadget location

By default, this widget volition ever seem correct at the destination of your posts. In the LinkWithin FAQ page nosotros tin honour solutions on how to create this - only 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 alter the gadget location, this describe of piece of job is required therefore that nosotros tin customize it later.

Replacing the "You mightiness likewise like" LinkWithin text

By default, the LinkWithin gadget shows the "You mightiness likewise like" championship but nosotros tin alter the text to anything nosotros want. Just add together the describe of piece of job 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 really pop widget that shows the related posts with a thumbnail in addition to alth How to customize or edit the linkwithin related transportation service widget" style="border: 0" /></a>

And alter the text - inward this case, it volition present "Related posts" instead of "You may likewise similar these stories".

Changing the LinkWithin background color in addition to thumbnails style

Within the template's code, search for the ]]></b:skin> tag in addition to precisely higher upward 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 await similar this:

If yous don't desire circular thumbnails, take away the code inward red. In greenish yous tin come across the parts which tin endure customized - at that spot yous tin apply to a greater extent than styles or alter 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!