Just 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!
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.
- Go To blogger > Template
- Backup your template
- Click Edit HTML > Proceed
- Search for this style tag:
]]></b:skin>5. Just above it paste the following:
/* -----Linkwithin Stylesheet by www.MybloggerTricks.com----- */Make these changes to change the colors. Tip: Use our Color Tool
#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;
}
- 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
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. :)
0 comments: