Header Ads

  • Breaking News

    How to Add Related Posts Widget with Thumbnails to Blogger

    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. 

    by makingdifferent

    1. Go to Blogger Dashboard > Template > Edit HTML
    2. CTRL + F and find </head> tag
    3. Copy and Paste below code just above </head> tag

    <!--Related Posts with thumbnails 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 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://mix--er.blogspot.com'><img alt='Blogger Widgets' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a></b:if></b:if><!-- Related Posts Code End-->

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

    Step 6: -Save template. You're done

    No comments

    Post Top Ad

    Post Bottom Ad