How To Customize Or Edit The Linkwithin Related Post Service Widget
LinkWithin is a rattling pop widget that shows the related posts with a thumbnail together with although it is non a novel gadget alongside bloggers, many avoid using it for its lack of customization. So, this tutorial volition demo you lot how to add together LinkWithin on a Blogger weblog together with how to customize it.
This is what nosotros volition produce with this gadget:
Although it provides the pick to select Blogger equally a platform, nosotros volition select Other inwards lodge to implement the code take 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 move given the code that nosotros require purpose it. It should await something similar this:
Cick anywhere within the code expanse together with press the CTRL + F keys to search for the next line:
By doing therefore you lot already convey the LinkWithin gadget on your weblog together with the consequence volition move similar this:
Note: If you lot would similar to display it solely inwards postal service pages, you lot tin laissez passer on the sack enclose the code using a Blogger conditional tag.
If you lot don't desire circular thumbnails, take away the code inwards red. In light-green you lot tin laissez passer on the sack run across the parts which tin laissez passer on the sack move customized - at that topographic point you lot tin laissez passer on the sack 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 laissez passer on the sack customize the LinkWithin related posts widget. Enjoy!
This is what nosotros volition produce with this gadget:
- Change the place of the gadget;
- Remove the LinkWithin link;
- Change the "You powerfulness likewise like" championship with 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 postal service titles color together with font
Adding the LinkWithin gadget to Blogger
First of all nosotros require to install the LinkWithin gadget. For this, nosotros convey to larn to the LinkWithin homepage together with type inwards the required information:By clicking on the "Get widget!" button, we'll move given the code that nosotros require purpose it. It should await something similar this:
<script>That's the basic code nosotros require to copy. Now login into your Blogger account > select your weblog to where you lot desire to add together the LinkWithin gadget together with larn to "Template" > click on the "Edit HTML" button:
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 rattling pop widget that shows the related posts with a thumbnail together with alth How to customize or edit the linkwithin related postal service widget" style="border: 0" /></a>
Cick anywhere within the code expanse together with press the CTRL + F keys to search for the next line:
<div class='post-footer'>Just inwards a higher identify this line, glue the LinkWithin code.
By doing therefore you lot already convey the LinkWithin gadget on your weblog together with the consequence volition move similar this:
Change the LinkWithin gadget location
By default, this widget volition ever seem correct at the cease of your posts. In the LinkWithin FAQ page nosotros tin laissez passer on the sack honour solutions on how to cook this - but 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 trouble is required therefore that nosotros tin laissez passer on the sack customize it later.
Replacing the "You powerfulness likewise like" LinkWithin text
By default, the LinkWithin gadget shows the "You powerfulness likewise like" championship but nosotros tin laissez passer on the sack alter the text to anything nosotros want. Just add together the trouble below inwards bluish within the LinkWithin code:<div class='linkwithin_div'/>And alter the text - inwards this case, it volition demo "Related posts" instead of "You may likewise similar these stories".
<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 rattling pop widget that shows the related posts with a thumbnail together with alth How to customize or edit the linkwithin related postal service widget" style="border: 0" /></a>
Changing the LinkWithin background color together with thumbnails style
Within the template's code, search for the ]]></b:skin> tag together with exactly inwards a higher identify it, add together the next CSS styling:.linkwithin_div {After adding this CSS, the LinkWithin gadget volition await similar this:
background: #EEEEEE; /* Background color for the related posts container */
padding: 0 10px;
border-top: 1px corporation #DBDBDB; /* Top edge for the related posts container */
border-bottom: 1px corporation #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 corporation #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 */
}
If you lot don't desire circular thumbnails, take away the code inwards red. In light-green you lot tin laissez passer on the sack run across the parts which tin laissez passer on the sack move customized - at that topographic point you lot tin laissez passer on the sack 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 laissez passer on the sack customize the LinkWithin related posts widget. Enjoy!
