This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.
For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]
Related Posts Widget with Thumbnails for Blogger
Here are the detailed installation steps1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box
2.Now look for
</head>
3.Now Find<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --> <b:if cond='data:blog.pageType == "item"'> <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,“Times New Roman”,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'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End--> </head>
<div class='post-footer-line post-footer-line-1'>
<p class='post-footer-line post-footer-line-1'>
4.You can adjust the maximum number of related posts being displayed by editing this line in the code.<!-- Related Posts with Thumbnails Code Start--> <!-- remove --> <b:if cond='data:blog.pageType == "item"'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback= related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </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.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 tutorials</a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->
5.To edit the title of the widget you can change this line of codevar maxresults=5;
var relatedpoststitle="Related Posts";
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 == "item"'>
<!-- remove --></b:if>
Source: bloggerplugins.org
cứu dữ liệu ổ cứng format cách này rất hay nhưng tôi làm toàn bị báo lỗi html ì gì đó bạn xem lại code mail 116bdh@gmail.com