Fancy Black Skin For LinkWithin Widget Blogger | SEO Guide | Blogging Tips and Tricks for Beginners Blog

I sharing stylesheet for the Black color theme of LinkWithin Widget Blogger related post widget used on our blog. We coded it using simple styles and effects.

LinkWithin Widget Blogger

LinkWithin Widget Blogger is a great plugin that can be integrated into both WordPress and Blogger to display relevant stories with posts related to the same category / label or tag. It loads really fast and helps to increase the reader's engagement in reading as much as possible and helps build pageviews. Months ago we introduced a way for you to customize the look and feel of this plugin by overrunning its default style sheet. You important! Definitely can override any class or ID using key properties.

The custom CSS code we've introduced enables users to change the font color of the text title, resize the thumbnails, edit the borders, and change the background with an image. Today I am sharing a style sheet for the black color theme of the post widget related to the link used on our blog. We coded it using simple styling and effects. It attracts more visitors and offers some clear and concise suggestions. The steps are really easy, so like it!
Gadgets without a custom code look dusty and beige like this:

Step1: Adding the LinkWithin Widget Blogger

To apply this volume you will first need to install the Link Widget widget in your blog. The tutorial below will help you add this plugin to your plugin blogs. The plugin will only appear on post pages and will remain hidden on the 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;    
}

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