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. :)
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 »
Mohammad
7/08/2012
blogger tricks
,
Widgets
Another great unique trick thanks a lot mohammed for this informative post.
ReplyDeleteRegards,
Ahmed Safwan
FOunder of ToStartBlogging.Com
Superb Tutorial, Just Loved this :)
ReplyDeleteProudly Owner of HackingSociety.in Tech blog
wow man, u did it again, waiting for this one, & the color absolutely suites my blog www.hot-gallery.in
ReplyDeletethnx Mohammed :)
Very nice one pal. .I had never noticed this.
ReplyDeleteHow To Get Paypal Verified
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.
ReplyDeleteGood post bro.
ReplyDeleteWhy My Actual Meta Description Is Not Showing In Search??
Usefull For Linkwithin users Thanks Mohammad
ReplyDeleteResently Posted CSS : Google Style Blue Search Button Hover & acti...
Very usefull tutorial ... thanks a lot :D
ReplyDeleteWorking but My home ,older ,newer page links changes position.How to solve it.
ReplyDeleteNot working on Fansofapk |Works on Azadfunclub
The widget is good.
ReplyDeleteBut what is its use.....
Already thumbail based version of related posts are available. They are 100% customizable also .....
NetInfoz Blog Tips|Tricks Blogger
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
ReplyDeletewow nice I was searching for this
ReplyDeleteFACEBOOK TRICKS
Usefull For Linkwithin users Thanks Mohammad
ReplyDeleteDropbox Hosting-Host Blog Scripts,Files, Backup & Images Online
Nice post buddy..
ReplyDeletePlease check my blog too.
http://bloggingsentral.cc.cc
and say me what should i do to improve like yours..
Very nice men, thumbs up. then, how can i change the size of the image. because too long for me?
ReplyDeleteSimply Nice
ReplyDeleteMy Cyber Tricks
nice job
ReplyDeleteLoved! Worked!
ReplyDeletedaniellewu.com
Hello,
ReplyDeletethis 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
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!
ReplyDeleteHi Mohamad. How can I make it appear vertical and floating like your share buttons? Cheers!
ReplyDeleteThankyou!!!! 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 :)
ReplyDeleteAnother great unique trick thanks a lot mohammed for this informative post.
ReplyDeleteI ALSO ADD THIS
Regards,
Abdul Samad Essani
Hack The Hackers Idea
great article..i customized my linkwithin on http://www.webcodeexpert.com/ with the help of this article..Now it looks awesome..thanks
ReplyDeletethanks 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
ReplyDeletehere
thank you. I already practice a way to increase the number of thumbnails. and successfully
ReplyDeleteI've looked everywhere but haven't found how to change thumbnail size (make it smaller)
ReplyDelete