Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger Tutorial » Blogger Widget » How-to » How to Add Related Posts Widget with Thumbnails to Blogger / Blogspot

How to Add Related Posts Widget with Thumbnails to Blogger / Blogspot

Related Posts Widget with Thumbnails for Blogger - it is must have widget for blogger to show related posts of current post to your readers. it will help you in many ways and first thing is that it will help you to increase the page views and reduce bounce rate of your blog. along with these 2 and enough advantages it also looks awesome.

Also see : Use A Drop Cap Large First Letter In Posts On Blogger


How to Add Related Posts with Thumbnails to Blogger ?

STEP : 1 - Go to Blogger Dashboard > Template > Edit HTML
STEP : 2 - CTRL + F to enable search box and search for the </head> tag.
STEP : 3 - Copy and Paste below code just above </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Important :
To change height or width of the widget you can edit red colored value in above code 100px.
To change color and size of related posts titles, you can edit Blue colored value.
Remove Green colored lines, if you want related posts to be displayed in homepage as well.

STEP : 4 - Find the following code in your blog's HTML using CTRL + F, you might get the result of the same code two times then you can stop at the second one.

<div class='post-footer'>

STEP : 5 - Now, just above it, copy and paste below code.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiXeYANYOUFkuckHrHeYdlY83ihNJbmAfYFFLz46GNYRR4vRWkMvXo9ckZFx7Wx_Yujxt0lMRKqL6Ny1f6oFy1CvnmcXEP2PT8VuEyIkoQffgb4DSOmWT0y3SBoy2Lzsa9YETAYPjdX0RS/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Edit value 5 in maxresults=5 with the number of posts you want to be display. Remove green colored lines if you want related post to be display on homepage too.

STEP : 6 - Save the template !

You're Done !! :)
Add Comment
Blogger Tutorial Blogger Widget How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • How to Add Animated Flying Android Man Widget to Blogger
    How to Add Animated Flying Android Man Widget to Blogger
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • Use A Drop Cap Large First Letter In Posts On Blogger
    Use A Drop Cap Large First Letter In Posts On Blogger
  • Download Best and SEO Friendly Blogger Templates for your Blog
    Download Best and SEO Friendly Blogger Templates for your Blog
  • Flash SWF file Embed Code Generator
    Flash SWF file Embed Code Generator
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ►  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ►  April (3)
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ▼  2014 (105)
    • ►  December (4)
    • ►  November (6)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ►  March (15)
    • ▼  February (24)
      • Mashable Style AJAX Navigation Menu Widget for Blo...
      • How to Add Related Posts Widget with Thumbnails to...
      • Color Code Generator for CSS
      • How To Remove Blogger Navbar
      • How to Add Facebook Like/Fan Box To Blogger
      • How to Add Google AdSense Below Post Title in Blogger
      • Recent Comments with Avatar Widget Generator
      • Enable YouTube Video Comments on Blogger
      • Add Floating Social Sharing Buttons Below Blogger ...
      • Remove Subscribe To Posts Atom Feed Links On Blogger
      • Use A Drop Cap Large First Letter In Posts On Blogger
      • Animated Flying Twitter Bird Widget Generator
      • jQuery Slide Out Social Sharing Box Widget Generator
      • Animated Flash Clock Widget Generator
      • Blogger Recent Posts Widget With Thumbnail Generator
      • Google Flag Translate Widget for Blogger
      • Blogger XML Sitemap Generator
      • Recommended Posts Slide out Widget Generator
      • Flash SWF file Embed Code Generator
      • jQuery Pop-up Facebook Like box Widget Generator V1
      • Facebook Invite Friends Button Generator
      • Blogger Meta Tag Generator Tool
      • HTML iFrame Code Generator
      • How to Add Widget or Gadget to Blogger / Blogspot

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates