Big Thumbnail Related Posts with Marquee Sliding in Blogger

What is Related Posts?

New Related Posts Works on JSON And Fetches The Posts From the Label of Current Open Post and Display it. We can Add this Below Every post to get Similar Posts for the reader to read and engage more. This is Light Weight And Load Faster. You can install The JS Script in your Server if your Server Is fast. It Display 6 posts Which Can Be Decrease or increase according to our Desire.

Why To Use Related Posts in Blogger?

New Related Posts Below all Posts in Blogger is Recommended Because It Engage Users and increase page views as well as Decrease Bounce Rate. And Healthy internal linking can be made by using this Related Posts In Blogger. This Enhance your site Looks and Cache users attention. And Good For SEO.

when the visitors comes from Search engines to a particular post they don't know what is There in the Site if they find this Related posts They will get the options to Get into any post of there interest and read it Hence this is Good For SEO. 

What is new in this Related Posts Version 2.0?

Big Thumbnail Related Posts with Marquee Sliding Displays 6 Posts By Default And Looks Beautiful Beneath the Posts And The Sliding works Fine With Marquee.  We Use Marquee So That The JS Use Will be Less And Widget Loads Fast. When You hover any of the post The Sliding will Be Stopped And You can Read And Click on It. We have Added CSS In a Way That With Few Tweaks It will become Responsive and Can be Seen in your Smartphone.

See The GIF Demo Below. Don't Refer this Image it is Low Quality Image To show the Animation effect we added it:

Let Start! How To Add Big Thumbnail Related Posts in Blogger:

We have Divided The Tutorial Into Three Parts In the First Part We will Improve Related posts thumbnail Quality and resolution.

STEP 1:  Go To Template Section As Shown in The Image Below

STEP 3: After Clicking on Edit HTML Search for 

</body>

STEP 2:  Copy This Below Code Before </body>

<script type='text/javascript'>                   function changeThumbSize(id,size){var blogGadget = document.getElementById(id);var replacement = blogGadget.innerHTML;blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");var thumbnails = blogGadget.getElementsByTagName("img");for(var i=0;i&lt;thumbnails.length;i++){ thumbnails[i].width = size; thumbnails[i].height = size; }}
changeThumbSize("#related-posts",210);                   
</script>

Good Now We have Improved The Resolution of Related Posts Thumbnails.

Now In Second Part We Will Add JavaScript in the Template. 

Thanks To MyBloggerLab for JavaScript We Have Edited to make it beautiful and more useful.

STEP 1:  Now After Completing Above Steps Search for 

</head>

STEP 2:  Copy This Below Code Before </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwd6ciieXiUIBDi4_uu8nLGZQrEdDzotDbQlazRIupOrIqRupMvoadzir1Yjc2BBFJ5ND8vpRa-J8ztxR2VRpGxq86z0nSIcsIymyK3I5cZS0EFHKnOH835SYOGhpA_EdKQ8y2o5k7XmJR/s1600/no_image.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;Recommended Articles:&quot;;
</script>
<script src='https://mytopdownloads.com/Trending%20Widgets/relatedPosts.js' type='text/javascript'/>
</b:if>

STEP 3:  Now Search for (Search by Pressing CTRL + F) 

 <data:post.body/>

You Will Find This Code 3 Times or more in your Template So Refer 2nd or 3rd Time.

STEP 4:  Copy This Below Code After <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'><span>Similar Articles:</span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<marquee behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1'><script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);  </script></marquee>
</div></b:if>

Now In Third & Final Part We Will Add CSS in the Template.  

STEP 1:  Now Search for (Search by Pressing CTRL + F)

]]></b:skin>

 STEP 2:  Copy This Below Code Just Before ]]></b:skin>

<!-- Related Posts Marquee Effect www.trendingwidgets.com -->#related-posts a{display:inline-block;list-style:none;float:left;text-align:left; position:relative;}#related-posts .rel_title{padding:2px!important; margin:0!important;list-style:none;float:left;text-align:center;width:90%;font-size:13px;color:gold;border-radius:0px 0px 10px 10px; word-wrap:break-word;}#related-posts .rel_title{color:white; font-size:13px;font-weight: 600!important; font-family: helvetica!important;word-wrap: break-word;white-space:normal!important}#related-posts .rel_title {color:#dddddd; display:block;}.recent_label_with_thumbs > span{  display:inline-block!important;}
#related-posts{white-space:normal!important;   height: 230px!important;    overflow: hidden;    margin: 0px;    width: 100%;    background: none repeat scroll 0% 0% rgb(38, 41, 44);    border: 1px solid rgb(51, 51, 51);    padding: 5px 5px 25px 5px;    border-bottom-right-radius: 10px;    border-bottom-left-radius: 10px;    box-shadow: 0px 0px 2px 1px rgb(102, 102, 102) inset; display:block; clear:both;}
#related-posts a{  overflow: hidden; float: left; max-width: 205px; max-height: 220px; border: none!important; margin:6px 10px 0px 0px;right:-15px;}#related-posts img{  width:180px!important;height:150px!important; padding:2px!important; border: 1px solid #A3A3A3!important; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius: 10px;  margin-top:0px;position:relative;}#related-posts img:hover{border: 1px solid #c5c5c5; }
#related-posts img {filter:alpha(opacity=80);opacity: 0.8;border:0;}#related-posts a:hover img {filter:alpha(opacity=100);opacity: 1.0;border:0;}#related-posts h2 {  display:none;}#related-posts span {  cursor:pointer; color:#dddddd; font-weight: 600; font-family: helvetica; text-transform: capitalize; font-size: 110%;padding:0px; margin:0px;}#related-posts span:hover {cursor:pointer; color: gold}#related-posts a:hover .rel_title {color: gold;}<!-- Related Posts Marquee Effect www.trendingwidgets.com -->

That's it Thanks For Following The Tutorial Now Its time For Customization to make it as it made for your site.

Customization:

First JavaScript Part:

• The Yellow Highlighted Text is Responsible For  Number of Posts To Display By Default 6 Posts Will Be Displayed If You Want To Decrease or increase Then Change This Yellow Text with your desired Number.

• The Orange Highlighted Text is Responsible For Heading of the Related Posts You can Decide What To Display Above it Like Recommended Posts, Related Posts etc.

Second CSS Part:

• The Light-Green Highlighted Text is Responsible For Width of Image Of The Related posts So If you found that it is not fitting to your layout edit it and change the text in light green color to your desired width.

• The Light-blue Highlighted Text is Responsible For Height of Image Of The Related posts. By Default The Width and Height Is Correctly Adjusted. So If you found that it is not fitting to your layout edit it and change the text in light Blue color to your desired Height.

STEP 6:  All Done Save the Template and Check it in your site.

That's It Thanks For Following our Tutorial ''Big Thumbnail Related Posts with Marquee Sliding in Blogger '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.