Browse > Home / / Related Post With Thumbnail Image for Blogger


Related Post With Thumbnail Image for Blogger

4 comments
Tuesday, September 29, 2009 Posted by One-4-All

I think you was look this widget before. Yes, this widget have same look with Linkwithin widget. But, this image not from LinkWithin. This widget come from BloggerPlugin. I was installed in my blog. And i hope this can help my visitor to exploring my article.Do you interesting to install this blogger widget in your own blog? It's an easy way to do.

Here are the detailed installation steps.....

  • First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box.
  • Now look for this code
    </head>
  • Change that code into this one.

    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
    </head>
  • Now find

    <div class='post-footer-line post-footer-line-1'>
  • And then add this 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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle="Related Posts";
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->
  • Now you can adjust the maximum number of related posts being displayed by editing the red code.
  • Now save your edited HTML Template


This widget will be show an image in our post for a thumbnail. When your post doesn't have any image, it will be show "No Image" picture as thumbnail.

Best Regard.
One-4-All | Blogging News and Tips

4 comments:

download free on September 29, 2009 at 11:51 PM said...

wah kalok aku make layanan linkwithin praktis, coz ak masih pemula hehe

Ken on September 30, 2009 at 12:05 AM said...

Oh,it's very useful.Thanks :D

bandung bisnis on September 30, 2009 at 12:24 AM said...

si anis lagi pake kaos,,,postingannya very nice boss

Ngawifornia on September 30, 2009 at 1:40 AM said...

waduh..jujur aja br tau kali ini yg kaya ginian..maklum masih pemula sob..mksih infonya..

Post a Comment