Fancy Black Skin For LinkWithin Gadget

LinkWithin is an excellent plugin that can be integrated in both Wordpress and Blogger todisplay 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.

Read: Install linkWithin on Blogger

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;

}

.linkwithin_outer {
    margin: 1px 0px !important;
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2WpClixN9icl9ZVrxj22Tpw8pS-BvfJd2DW7i8jarkc8gaW3qtFFMcLKXWmByCzofTniH0WPYKTKPGXY6_D7X45DurTxNIFxX3YALl2TLCCb8VjzM_Ert0OS72jgkxNWsUnw_YgGtBNI/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. :)

Wednesday, 7 September 2016