Breaking News:

latest

How to Add Text Style Related Post Widget in to Blogger Blogspot

Hello and Welcome to GetWebInfo.Com. Here on this post you can learn that How to Add Text Style Related Post Widget in to Blogger Blogspot. ...

Hello and Welcome to GetWebInfo.Com. Here on this post you can learn that How to Add Text Style Related Post Widget in to Blogger Blogspot. Related Post Widget is a very important wiget for every blogger as it does not only help to reduce a blog's bounce rate but also increases the blog's traffic. You can also use this widget in the middle of the post that you want to use.



Here is the demo picture of the Related Posts Widget for you!!!!




Here is the Steps that how can you Add Stylish Related Post Widget in to your Blogger Blogspot.

1. Login to your Blog Dashboar and then click on Edit HTML.

2. When HTML panel open then Press from your keyboar CTRLF+F and find out </head>

3. Copy the below JavaScript Code
<!--GetWebInfo Related Post-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
.related-post-title{font-size:2em;color: #FE7912; margin: 2px 0px;}
#related-posts {margin: 0px 5px;}
#related-posts a {font-size: 1.3em;color:#970E0E;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #4E63F9;}
#related-posts ul {list-style-type: none;padding: 0px;color: #000000;}
#related-posts li {  padding: 0.7em 1.2em;border-bottom: 1px solid #FFFFFF;background: url(#).2em 1em no-repeat;}
#related-posts li:hover.2em 1em no-repeat #000000;}
</style>
   <script src='http://aireshalili.github.io/internetsmash/simple-related-post.js' type='text/javascript'/>
</b:if>
<!--GetWebInfo Related Post-->
You can Paste this code directly before the closing tag </head> (Like that given in below picture)


4. Now where you want to display the related posts widget in to your blogger simpley Copy the below Script and paste it over there. I can use this widget right after the Social Sharing widget in Blog.

(Note: if you have any issue to use this code then you please comment on this post i will reply you as soon as possible)


<!-- GetWebInfo Related Post --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'><h4 class='related-post-title'>Related Posts For You</h4><b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div> </b:if> <!-- GetWebInfo Related Post End -->

5. Now just Save your Template and you can all don now your widget is working perfectly....

(Note: if you have any issue to use this code then you please comment on this post i will reply you as soon as possible)

I Hope this widget is really helpfull for you. If you like this article so please share it with your friends on social media.

2 comments