LinkWithin Style Related Post Blogger Widget

LinkWithin Style Related Post Blogger Plugin
LinkWithin Style Related Post Blogger Plugin
Related Post or You Might Also Like This Widget Or Plugin help reader of your blog to find a some related and interesting content of your Blog.Its also help to cut bounce rate of your blog and this is help to increase your Page Views.Displaying a Related Post is a way to keep your site visitors around. Adding Related Post Blogger Widget in blogspot blog is easy and any one do this.

Steps For Adding Related Post Widget In Blogger

1.Go to Blogger Dashbord.

2.Go to Template Section.

3.Click on Edit HTML and Tick on Expand Widget Templates.

Blogger Dashboard
Blogger Dashboard

4.Search (CTRL + F) for this piece of code </head>

5.Copy and paste the below code just before/above </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{margin:1px 0 5px!important;background:url("http://2.bp.blogspot.com/-UVq8GpplZro/ULPjAiKSKwI/AAAAAAAAIJs/XTh1n7Fyrew/s400/mbt-related-posts.gif") repeat scroll #2A2A2A;height:265px;width:610px!important;padding:0!important;box-shadow:0 4px 4px -4px rgba(0,0,0,0.7) !important;border-radius:5px}
#related-posts h2{margin:10px 0!important;padding:15px 15px!important;font-family:Helvetica,Arial,sans-serif;font-size:16px;color:white;font-weight:700;line-height:14px;text-transform:capitalize;background:#2B3338;border:2px solid #2C3336;border-top-right-radius:5px;border-top-left-radius:5px;box-shadow:0 2px 4px #666}
#related-posts img{border:2px solid #626668;padding:3px !important;overflow:hidden;width:115px;height:100px;opacity:0.7;margin:5px;border-radius:3px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out;box-shadow:0 3px 10px #666}
#related-posts img:hover{border:2px solid #ddd;opacity:1}
#related-posts-text{font-size:1.1em !important;font-weight:700 !important;line-height:1.45em !important;font-family:Helvetica,Arial,sans-serif !important;width:135px;padding-left:3px;height:65px;border:0pt none;margin:3px 0pt 0pt}
#related-posts a{color:#ddd}
#related-posts a:hover{color:#666}
*/#related-posts{margin:1px 0 15px!important;background:white;height:265px;width:610px!important;padding:0!important;border-radius:5px}
#related-posts h2{margin:10px 0!important;padding:15px 15px!important;font-family:Helvetica,Arial,sans-serif;font-size:16px;color:white;font-weight:700;line-height:14px;text-transform:capitalize;background:#363D41;border:2px solid #2A3033;border-top-right-radius:5px;border-top-left-radius:5px;box-shadow:0 2px 4px #666}
#related-posts-text{font-size:1.1em !important;font-weight:700 !important;line-height:1.45em !important;font-family:Helvetica,Arial,sans-serif !important;width:135px;padding-left:3px;height:65px;border:0pt none;margin:3px 0pt 0pt}
#related-posts img{border:2px solid #333;padding:3px !important;overflow:hidden;width:100px;height:100px;margin:5px;border-radius:4px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out;opacity:1}
#related-posts img:hover{border:2px solid #666;opacity:0.5}
#related-posts a{color:#666}
#related-posts a:hover{color:#333}

--></style>
<script type='text/javascript'>
var defaultnoimage="http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="You Might Also Like:";
</script>
<script src='http://code.techelex.org/relatedpost.js' type='text/javascript'/>
<!--related posts ends-->
</b:if>

Note:

  • To change the default picture, replace the URL in Line 20 with your own URL.
  • For displaying more than 4 posts, replace 4 value from var maxresults=4; in Line 21.
  • Remove the Line 1 and Line 27 if you want the related posts to be displayed in homepage too.

6.Now find the following code <div class='post-footer'>

7.Just above it, copy and paste the below code:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

Note:

  • Change the 5 value from max-results=5 with the number of posts you want to be displayed.
  • If you want the related posts to be displayed on homepage too, remove the Line 1 and Line 12.

8.Save the Template and Enjoy.

Leave a Comment

2 Shares
Tweet
Share
+1
Share
Pin