--> Fancy Black Skin For LinkWithin Gadget | Experience Lab - Online business creation and development guide for bloggers and startups

Fancy Black Skin For LinkWithin Gadget

LinkWithin is an excellent plugin that can be integrated in both Wordpress and Blogger to display related stories by fetching posts that be...

linkwithin black skinLinkWithin 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:

linkwithin widget  in original look

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.

  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 big chunk of Code:

/*---Related Posts---*/

#linkwithin_logolink_0 {
display:none!important;
}

#lws_0 {

clear: both!important;       

margin: 0 0 20px 0!important;    

}


.linkwithin_outer {
    margin: 1px 0px !important;
   background:url("http://2.bp.blogspot.com/-UVq8GpplZro/ULPjAiKSKwI/AAAAAAAAIJs/XTh1n7Fyrew/s400/mbt-related-posts.gif") repeat scroll rgb(42, 42, 42);
    height: 260px;

      width:590px!important;

    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.

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

Name

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,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Fancy Black Skin For LinkWithin Gadget
Fancy Black Skin For LinkWithin Gadget
http://lh3.ggpht.com/-Rujj4tll_WA/ULy2l4-XKPI/AAAAAAAAIMg/t3CmugYsJRc/image%25255B14%25255D.png?imgmax=800
http://lh3.ggpht.com/-Rujj4tll_WA/ULy2l4-XKPI/AAAAAAAAIMg/t3CmugYsJRc/s72-c/image%25255B14%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/12/fancy-black-skin-for-linkwithin-gadget.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/12/fancy-black-skin-for-linkwithin-gadget.html
true
2959477579779989044
UTF-8
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