Black and gray CSS3 skin for linkwithin gadget

LinkWithin Related Posts widget is a lightweight plugin for WordPress and Blogger blogs.It can display up to 5 related posts.If you don't care about analytics and design of the related content widget, go for LinkWithin widget.For the purpose of engaged your visitor in you blogger blog this will be one of the best way by adding Related Post Widget to your blogger blog. Related Posts widget with thumbnail is for displaying some other related Articles to your readers at the end of each post. This widget will surely engage your reader in your blog and it will result in increased page views. After installation Tutorial, Today in this post I will share that how you can customize this widget. Before proceeding Customize the widget, Install Linkwithin Related Post Widget. The Customized Skin Also Available on MBT Blog. I have just Customized Version of this skin.

 

Updata:- 17-3-2013 New Color Scheme added..

1. First Add the widget to your blog

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.

• Install Linkwithin Widget To Blogger

 

2. Apply CSS3 Black and Gray Skin

Note:- Always Remember Before Editing Your Template Make a Template Backup (how to make a template backup)

1. Go to your blogger dashboard>> Template>> Proceed >> find the following code by pressing CTRL+F (how to find code using search bar)

]]></b:skin>

2. and paste the Following code above/before “]]></b:skin>”

/*---Related Posts---*/ 
#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; 
}

if you want to use Skyblue Skin Use the Below Code . (Steps are same)

 

/*---Related Posts---*/ 
#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: #319AE4;
background-image: -moz-linear-gradient(#5DBFEF, #319AE4);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5DBFEF), to(#319AE4));
background-image: -webkit-linear-gradient(#5DBFEF, #319AE4);
background-image: -o-linear-gradient(#5DBFEF, #319AE4);
background-image: -ms-linear-gradient(#5DBFEF, #319AE4);
background-image: linear-gradient(#5DBFEF, #319AE4);
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: #319AE4;
background-image: -moz-linear-gradient(#5DBFEF, #319AE4);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5DBFEF), to(#319AE4));
background-image: -webkit-linear-gradient(#5DBFEF, #319AE4);
background-image: -o-linear-gradient(#5DBFEF, #319AE4);
background-image: -ms-linear-gradient(#5DBFEF, #319AE4);
background-image: linear-gradient(#5DBFEF, #319AE4);

}

.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; 
}

3. Click on save & you're Done!!! View your Blog & see Related Post Gadget New look.

 

Note:- The widget will display up to 5 thumbnails. If you wish to show 4 or 3 thumbnails  then simply increase the width size by editing  “linkwithin_inner Width & linkwithin_outer width”. if you want to show 5 stories your blog content width must be 720 Px.  Also set the number of stories to 5 on linkWithin homepage as mentioned in the tutorial where you learn how to install the widget on your blog. In my next tutorial i going to share with your another Beautiful Skin for Linkwithin Gadgets.

 

Keep up to date with new features and opportunities by subscribing to this blog via email Notification, adding our Google+ page to your circles or like us our page on facebook. Thanks for reading our posts.