--> Customize LinkWithin Stylesheet - Add Some colors! | Experience Lab - Online business creation and development guide for bloggers and startups

Customize LinkWithin Stylesheet - Add Some colors!

Just recently while redesigning a client's website, we figured that Linkwithin can completely be customized by overriding its default...

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:
     5.   Just above it paste the following:
/* -----Linkwithin Stylesheet by www.MybloggerTricks.com----- */

#linkwithin_logolink_0 {
#linkwithin_logo_0 {display:none;}
#lws_0 {
clear: both!important;        margin: 0 0 20px 0!important;    

margin: 0 0 20px 0!important;    
.linkwithin_text {
.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. :)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Customize LinkWithin Stylesheet - Add Some colors!
Customize LinkWithin Stylesheet - Add Some colors!
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy