Customize LinkWithin StyleSheet In Blogger

Linkwithin is the most commonly used service for Related Posts Widget which you can install easily in your blog or website. Where it is considered as the best Related Posts widget service, on the other hand it is so flexible that you can customize it and change it's appearence. Today in this tutorial we are going to show you how you can change the LINKWITHIN Related Posts Stylesheet and add some different colors and change the look according to your own choice. By changing the look and adding some colors to the LINKWITHIN Related Posts stylesheet, it also make your blog/website look more attractive. For this purpose you first need to install the LINKWITHIN Related Posts widget in your blog/site. 

• Check out here: How To Install The LINKWITHIN Related Posts Widget

How To Customize LinkWithin StyleSheet In Blogger:

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag.

5. Copy & paste the following CSS Styles just above ]]></b:skin> tag.

/*----- Linkwithin Stylesheet Styling Starts -----*/
#linkwithin_logolink_0
{
display:none!important;
}
#linkwithin_logo_0
{
display:none;
}
#lws_0
{
clear: both!important;
margin: 0 0 20px 0!important;
}
.linkwithin_outer
{
margin: 0 0 20px 0!important;
}
.linkwithin_text
{
color:#FF683F!important;
font-size:16px!important;
padding-bottom:5px!important;
}
.linkwithin_posts a
{
background:#333333 !important;
border-right:1px solid #404040!important;
}
.linkwithin_posts a:hover
{
background:#666666 !important;
}
.linkwithin_img_0
{
border: 2px solid #dddddd !important;
padding:2px !important;
width:100px!important;
height:100px!important;
}
.linkwithin_img_0:hover
{
border: 2px solid #333333 !important;
padding:2px !important;
}
.linkwithin_title
{
color:#ffffff !important;
font-family:'tahoma', sans-serif !important;
font-size:11px !important;
line-height:14px !important;
text-decoration: none;
border-top:1px solid #ddd !important;
}
.linkwithin_title:hover
{
border-top:1px solid #333 !important;
}
/*----- Linkwithin Stylesheet Styling Ends -----*/

6. Click "SAVE TEMPLATE".

You are all done. Refresh your blog to see the LINKWITHIN sheet styled your own way. 

This is how your LINKWITHIN WIDGET STYLE SHEET will look like after applying CSS styles:

Customization:

If you want to customize it your own way, follow the instructions below:

1. To change the color of the text "You Might Also Like", edit #FF683F to your own color value. 

2. To change the font size, edit 16px to your own value.

3. To change the sheet background color in active mode, edit #333333 to your own color value.

4. To change the sheet background color in mouse hover mode, edit #666666 to your own color value.

5. To change the color of the separator between each post thumbnail, edit #404040 to your own color value.

6. To change the border around each post thumbnail in active mode, edit #dddddd to your own color value.

7. To change the border around each post thumbnail in mouse hover mode, edit #333333.

8. To change the post title links color, edit #ffffff to your own color.

How To Change The Widget Heading Text?

By default linkwithin displays the heading text at the widget as "Related Posts Or Linkwithin". If you want to change it to "You Might Also Like:" or any text you like, just add the following code inside the LINKWITHIN Widget which is installed in your Blogger Layout Page.

<script>linkwithin_text='Related Posts:'</script>

Change the 'Related Posts' into anything text you like. 

That's All.

Happy Blogging.

Need Help?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)