LinkWithin is an excellent plugin that can be integrated in both Wordpress and Blogger to display related stories by fetching posts that be...
LinkWithin is an excellent plugin that can be integrated in both Wordpress and Blogger to display related stories by fetching posts that belong to the same category/label or tag. It really loads fast and do help in increasing reader engagement in reading more and more and helps build pageviews. Months ago we introduced a way by which you can customize the look and feel of this plugin by overriding its default stylesheet. You can surely override any Class or ID by simply using the !important property.
The custom CSS code we offered enabled users to change font colors of the text title, edit thumbnail sizes, borders and change background with an image. Today I am sharing the stylesheet for the Black color theme of linkWithin related post widget used on our blog. We coded it using simple styles and effects. It attracts visitors more and provide some neat and clean suggestions. The steps are really easy, so lets make it Fancy!
Without the custom Code the gadget looks as dull and grey as this one:
Step1: Adding the LinkWithin Widget
In order to apply this skin you will first need to install the linkWithin widget to your blog. The tutorial below will help you to add this plugin to your BlogSpot blogs. The plugin will appear in post pages only and will remain hidden on homepage.
Step2: Applying the Black Skin
Now you just need to follow the easy steps below to install the black Skin and change over all dull and grey look of the widget.
- 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 big chunk of Code:
/*---Related Posts---*/
#linkwithin_logolink_0 {
display:none!important;
}#lws_0 {
clear: both!important;
margin: 0 0 20px 0!important;
}
width:590px!important;
.linkwithin_outer {
margin: 1px 0px !important;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjU57hmRzGh8I-1T3kyKaVte_IQHBhoiGRi6cFZsWHZ5O9ejTtCnwYDl2PdgEUITJqcgFkIlfI_0WMVjTuMjrxW6QAQLPu8GG_NnojIq5ldnxECblvAhowxOMtnJ05nGYfpqFa3x2iPzs/s400/mbt-related-posts.gif") repeat scroll rgb(42, 42, 42);
height: 260px;
padding: 0px !important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
border-radius: 5px 5px 5px 5px;
}
.linkwithin_inner {
width:590px!important;
}
.linkwithin_text {
margin: 0px !important;
padding: 10px !important;
font-family: "Droid Sans",Helvetica,Arial,sans-serif;
font-size: 1.35em;
color: rgb(255, 255, 255);
font-weight: 700;
line-height: 1.35em;
text-transform: capitalize;
background-color: rgb(18, 18, 18);
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-image: -moz-linear-gradient(center top , rgb(36, 36, 36), rgb(18, 18, 18));
}.linkwithin_posts a {
border-right:0px!important;
margin: 10px 0px 10px 20px !important;
}
.linkwithin_posts a:hover {
border-right:0px!important;
margin: 10px 0px 10px 20px !important; background:none!important;
}#linkwithin_logo_0 {display:none;}
.linkwithin_img_0 {
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 70px !important;
margin-right: 20px !important;
overflow: hidden;
background:#666!important;
}.linkwithin_img_0:hover {
border: 1px solid #666!important;
opacity:0.8;
}
.linkwithin_img_0 div {
width: 100px !important;
height: 70px !important;
}.linkwithin_title {
color: rgb(255, 255, 255) !important;
font-size: 1.1em !important;
display: block;
padding: 0px 10px 0px 0px !important;
font-weight: 700 !important;
line-height: 1.45em !important;
margin-top: 10px !important;
font-family: "Droid Sans",Helvetica,Arial,sans-serif !important;
text-decoration:none!important;
width:120px!important;
}.linkwithin_title:hover {
text-decoration:underline!important;}
6. Hit save and you are all done!
Visit any of your post page to see it working just perfectly. Enjoy the new colors. :)
Suggested Reading:
You may also like checking the first Custom Skin we introduced in august 2012.
- Read: Customize LinkWithin
You May also find the following widget useful:
Questions?
The widget will display up to 4 thumbnails. If you wish to show more thumbnails then simply increase the width size highlighted in yellow. Also set the number of stories to 4 on linkWithin homepage as mentioned in the tutorial where you learnt how to install the widget on your blog.
Despite setting number of stories to 4, our widget displays 4 thumbnails. We have contacted the LinkWithin team to fix this bug on their side. Its not important that the widget will display 3 thumbnails for you as well because such bugs occur rarely for some websites/IDs and requires manual fix from linkwithin team.
If you have any questions then please do not hesitate to let me know. I hope with this new Fancy theme, your readers would enjoy clicking between posts and would spend more time on your blog. Peace and blessings buddies. :)
COMMENTS