Hi mates, Hope you are fine. Today i am with a widget for blogger. And that widget is About Related Posts below your every post. As you know that how much widgets are important for your blog for better ranking and seo. Related post is a very friendly widget for seo, because it forces your visitors to explore your blog. When a visitor visits your blog post and he likes it, then he will like to explore your others post in that label. With the related post widget your blog's traffic will also increase due to your blog's visitors activity.
It is very easy to add this widget in your blog.
Some templates have default related post widget in it. But some have not. Or if didn't like that related post widget than you can easily customize and add this widget in your blog. You have to just edit your Blog's HTML and some codes. And than you can enjoy with the great widget that i have posted here.
There are 2 types of the Related Post widget.
One is with thumbnails and other is withoust thumbnials (only text) Both are very suitable for blog. Now its upto you which will be best one for your blog. And also your blog's view should be superb.
With Thumbnails :
Steps:
1. Sign in To Blogger.
2. Go to Template in dashboard section.
3. Click on Edit Html. (Download Template For Security)
And search for the following code.
]]></b:skin>Now add below codes just above it.
<!--Related Posts with thumbnails Scripts and Styles Start--><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-text {font-size: 0.9em !important;font-weight: 700 !important;line-height: 1.45em !important;font-family: Helvetica,Arial,sans-serif !important;width: 100px;padding-left: 3px;height: 105px;border: 0pt none;margin: 3px 0pt 0pt;} #related-posts h2{font-family:verdana !important;font-size:18px !important;font-weight:bold;margin:9px 0px !important;color:#666 !important;border-bottom:0px !important;border-top:0px !important;}#related-posts a{border-right: 1px dotted #DDDDDD;color:#5D5D5D; }#related-posts a:hover{color:black;background-color:#EDEDEF;}</style><!-- www.bloggersky.com --><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV8IGyW0lU73du_53wcSVyihUbjAtKKc7he6kPtNpad0v8lLucqVe0jvlTL8gosLnOXwvWsAZ8EerF9N6hfqgxI1QJu-8xCfrLnWNXKr1MdX9C_CRynopiA7kUDlz0lwqIHJ0dsUs00xc/s1600/no_image.jpg";var maxresults=5;var splittercolor="#DDDDDD";var relatedpoststitle="You Might Also Like:";</script><script src='https://googledrive.com/host/0B-dv4rsl5_uZXzg0Z1FOVWhLSFk' type='text/javascript'/></b:if><!--Related Posts with thumbnails Scripts and Styles End-->After doing this. Search For the following code.
<data:post.body/>Now add the below code Just Below the above code.
<!-- Related Posts with Thumbnails Code Start--> <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><!-- www.bloggersky.com --><script type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs("<data:post.url/>");</script> </div><div style='clear:both'/></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggersky.com'><img alt='Blogging World' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUGpHV6kTtOMqNKSQ2aNS1rxjjGh6-Olwgh4kjKK0m8GlXYNNlwus2GoKI8pgvqQUy68_RiU6EF-E-F-Kg79x11lDogizinLwSGYXu9wN9UgdkTO6IWUkRZCOPTS4pdeTpmqiF0b6ImIA/s1600/best+blogger+tips.png'/></a></b:if></b:if> <!-- Related Posts with Thumbnails Code End-->Now Save Your Template and You are done.
Without Thumbnails:
Steps:
1. Go to Blogger.
2. Proceed To Layout.
3. Click On Add A Widget.
4. Now Paste the Following Code in it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>5. Now save. And Done.
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'loading...'
});</script>
Feel free to leave a comment.