One of the fabulous plugins that you can add to your Blogger is showing related stories by posts belonging to similar tag or category is the LinkWithin. It is fast and reliable in encouraging readers to read a lot more then build your page reviews.
Mohammad Mustafa Ahmedzai shows you the way on how you can add this widget to your site. Below are the steps:
Step 1. Add the LinkWithin widget.
Step 2. Apply the Black Skin
1. Go to Blogger Dashboard > Template
2. Click Edit HTML > Proceed
3. Search this tag:]]></b:skin>
1. Go to Blogger Dashboard > Template
2. Click Edit HTML > Proceed
3. Search this tag:]]></b:skin>
4. Copy and paste this code just above number 3 step.
/*---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/AVvXsEjlCNB-zwXM55clY9wIHKSwVrj1vsZP9vffbaZwcmwPTud8suERaR7q5u3wVees8fBbaYwOq6Z1MAQJjhbdc9LpGW01VH6PsPlMVdRiFjYeW9EfxAPrCEwnSfSkFjjiPTpZMEN3pkwObak/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;
}
5. Click Save.
Note: Always have a backup first before editing your template.
