Customize Linkwithin with CSS Make It Stylish

In last post I explained How to Add Linkwthin Related Posts Widget With Thumnails to Blogger, now after adding the widget you might have faced that there is a linkwithin logo at right bottom side which makes it dirty or you might don't like it :/

So now I've got a better code ;) , This will remove every simple or old fashioned Linkwithin Style and it will make it Highly CSS Customized with a Fancy and Premium Look !

Whats New about this CSS Theme?
1. Professional Looking.
2. Color Optimized.
3. Highly Powered by CSS.
4. Doesn't affect Blog page load time.
5. We are giving two colors [Black and Blue]
6. Removed Attribution [Linkwithin logo removed]

Ever tried our Fully CSS Custom Related Posts Widget for Blogger? I prefer you must try it ;) [Try Our Recommendation]

Now How To Customize Your Linkwithin Widget
Note : You must have Linkwithin Widget Added to Your Blog, Don't Have Linkwithin for your blog? Get it here

Now Customizing the Default Linkwithin Widget. (Theme : Black Color)
You just have to follow these easy steps for this :
1. Go to Blogger > Dashboard > Template.
2. Click Edit Template. Now find this code ]]></b:skin> by pressing CTRL+F , after finding this code simply copy paste the following code just above ]]></b:skin>

 
/*---Related Posts by TechEthix---*/ 

#linkwithin_logolink_0 { 
display:none!important; 
}
#lws_0 {
clear: both!important;       
margin: 0 0 10px 0!important;    
}

.linkwithin_outer { 
margin: 1px 0px !important; 
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111); 
height: 275px;
width:690px!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:690px!important; 
}
 
.linkwithin_text { 
margin: 0px !important; 
padding: 10px !important; 
font-size: 1.2em; 
color: rgb(255, 255, 255); 
font-weight: normal; 
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-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111); 
}
.linkwithin_posts a { 
font-size: 14px!important;
border-right:0px!important; 
margin: 10px 0px 10px 10px !important; 
}

.linkwithin_posts a:hover { 
border-right:0px!important; 
margin: 10px 0px 10px 10px !important; 
background:none!important; 
}
#linkwithin_logo_0 {display:none;}
.linkwithin_img_0 { 
border: 1px solid #666 !important; 
padding: 1px !important; 
width: 100px !important; 
height: 90px !important; 
margin-right: 15px !important; 
overflow: hidden; 
background:#444!important; 
}
.linkwithin_img_0:hover { 
opacity:0.8; 
} 
.linkwithin_img_0 div { 
width: 100px !important; 
 height: 90px !important; 
}
.linkwithin_title { 
color: rgb(255, 255, 255) !important; 
font-size: 1em !important; 
display: block; 
padding: 0px 10px 0px 0px !important; 
font-weight: 400 !important; 
line-height: 1.45em !important; 
margin-top: 10px !important; 
text-decoration:none!important; 
width:120px!important; 
}
/*---Related Posts by TechEthix---*/
 

3. Now Hit save template ! That's It ! You are done now.
Go to your Blog and check it and do tell me about your views or saying a little thanks can please me alot :D
Also Subscribe us by Email to receive latest blogger updates !
Want Blue Colored Theme?? get it here