The Good Blogger

Revealing blogging and money making secrets. Unseen blogging and money making secrets, to let you make huge money online

Large Thumbnails In Related Posts With Thumbnails In Blogger

  • Related Posts with thumbnails is a great hack in blogger, but the small size of thumbails makes this hack a waste.So today i come up with a trick by which you can make size of thumbnails large and bigger thus more eye catching. So lets start :--


    1) Login to your blogger dashboard and navigate to Layout --> Edit HTML and check the "Expand Widget Templates" check box.

    2) Now look for


     </head>

     and replace it with
       <!--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:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }

    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }

    #related-posts  a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage="http://jasicadotin.googlecode.com/files/logo2.jpg";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Related Posts";
    </script>
    <script src='  http://raman.googlecode.com/files/111thumbnailstes2ting.js  ' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
    </head>

    3) Now Find
    <div class='post-footer-line post-footer-line-1'>

    If you cant find it then try finding this one
    <p class='post-footer-line post-footer-line-1'>

    Now immediately after any of these lines(whichever you could find) place this code snippet
    <!-- Related Posts with Thumbnails Code Start-->
    <!-- remove --><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>
    <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>
    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
    </script>
    </div><div style='clear:both'/>
    <!-- remove --></b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    <a href='http://www.jasica.in/2011/04/bigger-thumbnails-in-related-posts-with.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://4.bp.blogspot.com/-o1QP2dpkf7E/Ta_Rg9Qj6PI/AAAAAAAAALM/-76qBsohRJQ/s1600/Linkwithin1.jpg" /></a><a href='http://www.jasica.in/' ><img style="border: 0" alt="Blogger Templates" src="http://4.bp.blogspot.com/-o1QP2dpkf7E/Ta_Rg9Qj6PI/AAAAAAAAALM/-76qBsohRJQ/s1600/Linkwithin1.jpg" /></a>
    </b:if></b:if>
    <!-- Related Posts with Thumbnails Code End-->

    You can adjust the maximum number of related posts being displayed by editing this line in the code.
    var maxresults=5;

    To edit the title of the widget you can change this line of code
    var relatedpoststitle="Related Posts";

    To Change the Colour of the Splitter Line , edit
    var splittercolor="#d4eaf2";

    To change the other colours and all you will have to modify the CSS

    If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

    How to display the related posts on every page and not only on the post pages?

    Just remove the two lines starting with <!-- remove --> from both step 3 and step 2.

    that is lines
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    and
    <!-- remove --></b:if>

    If you face any problem with this trick, you can leave a comment here, i will solve your problem within 12hours.
      



    A Technology blog