Create a related Posts Gadget with thumbnails for blogger.
Have you ever wanted to add a gadget to your blog that will
keep your readers really busy reading your posts?
Yes, I know you wanted!! That
is why you are here and reading this J
OKKK……no problem….we all want our visitors to read as much
as content we write. The best way to do this is by adding a relative posts
gadget to your blog.
I am showing you a way to create your own gadget to show
similar posts after each of your blog posts. And remember…. this will work with
Blogger ONLY!!!!
Cool.
Here we are just adding some codes to our blogger template.
So it is very important that we should always backup out template before we do
any changes. In case of any mistakes happened by you and went anything wrong,
you can just replace your template. So you don’t want to worry too much.
First let’s see how you can backup your blogger template.
So go on and log into
your blogger account. Select your blog. Then go to template menu option in your
right hand side menu.
After that you will see a button in the upper right corner
of your page. (See the image below)
After you click on it, you can use the “Download full
template” button to download your template (it will be xml file).
So once you have taken the backup, you can move forward with
editing your HTML.
Now click on Edit Html button as shown in the above image.
Then press “ctrl + F” (to open find menu), and type “</head>”
(without quote marks) in the “find” field and press enter to locate it in your
HTML code.
After that, paste the following piece of code just above the
</html> tag you found inside your code.
<!--Related Posts widget for blogger Start--><!-- remove --><b:ifcond='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/AVvXsEijVLm0IUOjD3r31vdUuk-L4ANbO3EDegXNpm3093PJZcgZN4U5r9iTQSS6h6IZRTr3VJgt-rUVCETzR5TQSSXawcth3z9-b042_Xz09faPHiX4ejLFnw0GVRqkC6BZE4QxzvEVQrlAoiaT/s1600/no_image.jpg";varmaxresults=5;varsplittercolor="#DDDDDD";varrelatedpoststitle="RelatedPosts";</script>
<script
src='https://avdhootblogger.googlecode.com/files/avdhootblogger.relatedpostwidget.js'
type='text/javascript'/><!-- remove --></b:if><!--Related Posts widget for blogger End-->
Now find for the below piece of code,
Then paste the below code just above it.
“<div class='post-footer'>”
<!-- Related Posts widget for blogger Start-->
<!-- remove --><b:ifcond='data:blog.pageType ==
"item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:ifcond='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:ifcond='data:blog.url ==
data:blog.homepageUrl'><b:ifcond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts widget for blogger End-->
If you found more than one “<div class='post-footer'>”
in your code, you will have to the paste the above code for each of them.
I hope you will try this out and let me know your comments.
If you need any help for the above, please feel free to send
me an email.
Categories
:
Blogging
0 comments :
Post a Comment