Customize LinkWithin Stylesheet - Add Some colors!

linkwithin stylesheetJust recently while redesigning a client's website, we figured that Linkwithin can completely be customized by overriding its default stylesheet. We used Google Chrome to identify the classes and IDs. This let us change the background colors of the thumbnail images, change the title text color and margining, add cool hover effects and most importantly remove the linkwithin credit link and logo link that appears towards the bottom-right corner of the plugin.  We have created a sample style with dark theme and we would like to share the stylesheet, using which you can add your creative new looks to it and blend it perfectly with your blog looks and feel. Both BlogSpot and wordpress users would find this tutorial useful because all you would need to do is to copy and paste a simple CSS code. Lets get to work!



Live Demo

Install LinkWithin

If you have not yet installed linkwithin widget on your blog then kindly first install it:

Linkwithin Custom Stylesheet

Note: Wordpress users will need to paste the stylesheet below by going to Appearance > Editor. 
I will be sharing steps for blogger blogs here.
  1. Go To blogger > Template
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. Search for this style tag:
]]></b:skin>
     5.   Just above it paste the following:
/* -----Linkwithin Stylesheet by www.MybloggerTricks.com----- */

#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;
}
Make these changes to change the colors. Tip: Use our Color Tool
  • To change the color of the text "You Might Also Like" simple change the hexadecimal color code value #FF683F
  • To change the font size edit 16px
  • To change the container background color in active mode edit #333333
  • To change the container background color in mouse hover mode edit #666666
  • To change the color of the separator between each thumbnail please edit #404040
  • To change the border across each thumbnail in active mode edit #dddddd image
  • To change the border in mouse hover mode edit #333333
  • To change the post title links colour edit #ffffff
       6.   Save your template and you are all done!
Visit your blog and see it blended just perfectly! :)

How it works?

To force the browser to ignore official stylesheet provided by linkWithin server link and except our custom one, I simple override all attributes with the addition of !important. It's a normal practice to override styles when duplicate properties exists on a webpage. 

How to change the text?

By default linkwithin displays "You may also like these stories:" If you want a custom text like "Related stories" or "You Might also like" or any text you like please add the following code inside the linkwithin widget that must be present in your layout.
<script>linkwithin_text='You Might Also Like:'</script>
Change the highlighted text into anything you like.
If you could not locate the widget then paste the above code inside your template just below the <head> tag

Increase Stories without re-installing the widget

When you first install this plugin, linkwithin would ask for your Email Id and blog URL and then control your settings using a unique user ID. This Id would remain the same no matter how many times you delete or reinstall the plugin on your blog.
If you want to increase the number of thumbnail images then simply go to Linkwithin  and submit the same Email address with which you created the plugin for the first time and also submit the blog URL. Platform is optional. Set width to the number of stories you want to display. Each story represents a Thumbnail image.
Hit get widget and all done!  Do not copy any code and go and refresh your blog to see the plugin updated automatically.

Need help?

If you need help with regard to the alignment and margining of the plugin or any other customization related query then do let me know. Create your artistic designs and share them with all of us. I really like the linkwithin plugin. It displays posts based on relevancy linked with the labels/categories you create. It also loads fast and consumes less kilobytes of transfer data when page is loaded.  I strongly prefer it over custom widgets that increase blog load time and does not look professional. I just hope you find this tutorial helpful. Peace and blessings buddies. :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

27 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Another great unique trick thanks a lot mohammed for this informative post.

    Regards,
    Ahmed Safwan
    FOunder of ToStartBlogging.Com

    ReplyDelete
  2. Superb Tutorial, Just Loved this :)
    Proudly Owner of HackingSociety.in Tech blog

    ReplyDelete
  3. wow man, u did it again, waiting for this one, & the color absolutely suites my blog www.hot-gallery.in

    thnx Mohammed :)

    ReplyDelete
  4. nice trick friend, I am also using link within to show my relaed posts in my both blogs (blog tricks plus, medical clinic) but could not let my mind to think such one...... However If it is appropiate you can use some templates provided by blogger as they contain related post width in original template.

    ReplyDelete
  5. Usefull For Linkwithin users Thanks Mohammad

    Resently Posted CSS : Google Style Blue Search Button Hover & acti...

    ReplyDelete
  6. Very usefull tutorial ... thanks a lot :D

    ReplyDelete
  7. Working but My home ,older ,newer page links changes position.How to solve it.
    Not working on Fansofapk |Works on Azadfunclub

    ReplyDelete
  8. The widget is good.

    But what is its use.....

    Already thumbail based version of related posts are available. They are 100% customizable also .....

    NetInfoz Blog Tips|Tricks Blogger

    ReplyDelete
  9. nice article Mr Ahmedzai...i am a novice and just do it for the love of it...no money or fame...i cud not bring the thumbnails and "linkwithin" is still there...but thanks to u

    ReplyDelete
  10. Nice post buddy..
    Please check my blog too.
    http://bloggingsentral.cc.cc
    and say me what should i do to improve like yours..

    ReplyDelete
  11. Very nice men, thumbs up. then, how can i change the size of the image. because too long for me?

    ReplyDelete
  12. Loved! Worked!


    daniellewu.com

    ReplyDelete
  13. Hello,

    this worked really well, however I was wondering if you could help me with the image hovering. I'm trying to have it less opaque until you hover. For some reason, the change in code only worked for the first posts on a page. Please visit my website (my email address is under the 'contact' section): http://daniellewu.com

    ReplyDelete
  14. Regarding linkwithin, I have it - (http://NineRed.blogspot.com) but I can't seem to get an answer from them. I selected for it to recomend 5 posts, all I get is 3..... any idea how to fix that?? Also, do you have a donation spot? I owe you some cash after all the help I've gotten here!

    ReplyDelete
  15. Hi Mohamad. How can I make it appear vertical and floating like your share buttons? Cheers!

    ReplyDelete
  16. Thankyou!!!! for the 'increase stories without re-installing the widget' piece. I have been searching and trying to change code with no results. Found you and walla, done in two seconds flat. Feel like such a fool now, it was so easy LOL!! Thanks again :)

    ReplyDelete
  17. Another great unique trick thanks a lot mohammed for this informative post.
    I ALSO ADD THIS
    Regards,
    Abdul Samad Essani
    Hack The Hackers Idea

    ReplyDelete
  18. great article..i customized my linkwithin on http://www.webcodeexpert.com/ with the help of this article..Now it looks awesome..thanks

    ReplyDelete
  19. thanks alot for providing the beautiful information.The way of writing you have described through your article is amazing.I just love to see more articles like this.SEE
    here

    ReplyDelete
  20. thank you. I already practice a way to increase the number of thumbnails. and successfully

    ReplyDelete
  21. I've looked everywhere but haven't found how to change thumbnail size (make it smaller)

    ReplyDelete