Add widget of Related posts

#A. Adding 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.

* Install linkWithin on Blogger Go to Linkwithin

   #1.When you go to linkwith in fill the easy blank take the help of screen shot

   #2. Keep the width to three stories i.e three thumbnails if your post width is less than 500px

   #3. Hit the Get Widget button and then click the Install Widget link on the next page as shown                  below.

   #4. Change the Title to Related Posts: or anything you may like as shown below.

   #5. Now Click the Edit Template Link and replace the code with 

        <b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'>                                 <data:content/></b:if></b:includable>

   #6. Next click the Edit Content Link and add the following additional code just above the code                  inside the widget.

       <script>linkwithin_text='Related Posts:'</script>

   #7. Hit Add Widget button and its done !!!!!!

#B. 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:
5. ]]></b:skin>
6. Now copy the following code just above of ]]></b:skin>.

/*---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/AVvXsEj9HrpXcSacvKoKnf-o6uxRmnnHDUc9qmQ_CXmRzglGdKb8CKMPzG7GO8rBE2xNgZUkSnV5f3SBvbNqZs5-h1Yb_ZeSdmPS9RgYpj_pGUTp8xivFvONaqNLUkO9YNexMWdYiKhQOqHDKa4/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;

}
7.Save it , hit enter and its done!!!

for more posts and tricks visit  Hackxtech or Hackersfall

if like the please share it