Here is one more tip to show related post widget for blogger, It is very important to add the gadget because it will increase the visitors on your site without spending to much time on seo, if you go to the depth then you will easily find that related post widget or gadget comes at the main source of SEO level. So if you really interested to and want to display the related posts in which the posts are open you just have to edit some steps that i tell you here,
There are also many other related post widget over there but this one is also contain the thumbnail so you can also see the thumbnail if the post has image added. (See Category Widget Blogger)
So here is what you have to do, it is very simple
- Go to blogger dashboard
- Click on the Template section of the blogger that you want to add widget
- Now a new page appear and click on Edit HTML Button
- And next you have to find the code
Find this code in template </head> After this
- Now paste this below code before </head> tag
<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: 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;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9V5BbqhSdRgG3s9_ARKwafc7rrQM9paj-S9LXef42s4M3oohVNAKTYH6i20DCQQcdiOAlF0LN0n2_BMaSRWsqhNlpl0WhkMtv3_fAXd7VNHgQ6MvFDG-oJxeIycXR_HL0_QZNC9KWDJ8p/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
Now find this code in template <div class='post-footer'> After this
- Paste this below code before this code <div class='post-footer'> 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='http://www.moazzam2019.net/2013/09/adding-related-posts-widget-to-blogger.html#.UiWNjZKnBsk'><img alt='Blogger related post widget' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrG5b7oE4JNubkSg-gWmXnE34pb4HSCQwV_tnmBs4_L3n__qLWxAFa3XOlTz8j2H-ymg_tkLGePiTxCOYuWS-QeZmnowpsCL8bhWJlypiIBsFSIUdDCeuabzkYN0lWBb7upwjUyD-ufHfm/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
Now you are done and your gadget is installed successfully.
You have to refresh your blog to see the changes, and i am fully concentrate the code and its works, i also tried it on many other blogs before adding it here. Edited code from helplogger
Why use this widget:
You know there are many options that why we use this gadget to blogger blog. Actually if you are going to build the most page views of your blog then you have to add this gadget and ofcourse it will create much much positive response to your traffic and your page views increase many times more then normal.
If a reader reads the whole article then he/she is also interested to read your other articles so it is not just a gadget it also increase the website performance.
Post a Comment