26 February 2013
How To Add Related Posts Widget To Blogger/blog with Thumbnails 2013
Display Thumbnails Of Posts
Having Same Labels, Tag Or Categories At The Under Of Each Blog Post Using The
Blogger Related Posts Thumbnails Widget Is A Great And Best Way To Increase Your Blog Visitor
And Your Page Views. Related Posts Are Always Accessible At The End
Of The Post, So The Visitors Won’t Feel Any Break As Reading The Article. Moreover,
After Reading Out The Article/Post Users Can Feel Free To Visit Some Related
Posts. But, It Is A Great Problem Blogger Doesn’t Have Built-In Related Post
Functionality. So, We Have To Depend On External Sources Like Linkwithin, nRelate Etc... Don’t Worry After Releasing The Fixed Floating Vertical Social Share Counters Buttons / Bar for Blogger,
Today We Will Reveal Our Related Posts Thumbnail Widget For Blogger Enabled Platform.
You Can Add Related Posts Widget Just Under Of the Every
Blog Post. It Also Shows Thumbnails Because It Attracts
Your Blog Visitors. This Widget Thumbnail Are Arranged In Columns Under
The Post With Related Posts Title/Excerpt Under Each Post Thumbnail. Colors Of
Background, Border, Text, Text Sizes, Background On Mouse Over, Title. You Can
Also Specify Number Of Related Posts To Display.
This Widget
Designed And Customize By MBB. We Have Attached A Screenshot Below So Anyone Can
Easily Understand How Well-Crafted This Widget Is. Even I Am Also Using
This Widget For My Blog. See Screenshot Below…
How to Add This Widget in My Blogger Blog?
- Go To Blogger Dashboard
- Click On Template Tab
- Now Click On Edit HTML>>Proceed.
- Check the "Expand widgets template"
- Now Find ]]></b:skin>
- And Then Paste Below Code Above ]]></b:skin>
#related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; }
- Now Find </head> And Paste Below Code Above it
<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBPyIfRtYCQ_V1PLeTIOV4pNE04dXd_1OIh3L-PWZsF7SbESAs_dLtRhrtWk9MaJSFIxTiOEf7hainGggo48qL2rMgO6Y5SAo7qP6N7-IQeGecsD8v4yWS8NQTMIi-fLBXQChPxfwd4IQj/s1600/no_image.jpg"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script> <script type="text/javascript" src="http://yourjavascript.com/233021883/www.mybloggerblog.com.js"></script> </b:if>
- Now Find <div class='post-footer'>
- And just above it, copy and paste the below code
<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'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </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='www.mybloggerblog.com'></a> </b:if></b:if>
Finally After Code Just Click On Save
Template Button.
Settings:
If You Feel Like
To Specify Number Of Related Posts To Display As Related Post In Your Blog Then Simply
Find The Code Var
Maxresults=5; From The Java-Script Part
And Replace 5 With The Number You Want.
If You Face Any Difficulty
Feel Free To Ask.
0 comments:
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
Regards,
Imtiaz Ahmed