Sponsored Links
Showing related posts in your blog will increase your readers' engagement in your blog, thus letting them stay longer and learning more from it. Of course, considering also the reader's interest in your related posts. But the more they are seeing your previous posts, the higher the probability that they will click and read it.
Click image to enlarge
The widget
The widget comes from LinkWithin wherein no registration will be required to acquire it. Moreover, it's absolutely FREE. It shows post with thumbnails for post with images and shows links for those that don't have. You can edit the number post to show (usually 4-5 as long as it fits your post width). The widget can be implemented in Blogger, Typepad and Wordpress or other platform that supports javascripts.
How to Have It?
1. Go to LinkWithin.
2. Provide your e-mail ad in the form. No worries, they don't use your e-mail for ad promotion.
3. Include your blog URL.
4. Choose your platform, from Blogger or Wordpress, etc.
5. Select the number of posts to include. You can also customize it to blend with your theme if you are using dark theme. Then, hit Get Widget!
6. It will automatically add the widget to your platform. If not, you should copy the code that will appear and paste it in an HTML/JavaScript gadget. You should place the page element below the blog post. You're done now.
P.S.
If you can't add a page element below your blog post, you can copy the code and place it before or above the </body> tag in your theme template. The related posts will show after every posts even in your homepage.
If you don't want the related post to appear in the homepage and only in every post page, you can include the following in your code:
<b:if cond='data:blog.pageType == "item"'>-End of coding-
YOUR LinkWithin CODE
</b:if>
Update! Version 2 (Easy)
Credits to helplogger
1. In your template HTML, press CTRL+F, find the </head> code and copy-paste these codes before or above it.
<!--Related Posts with thumbnails Scripts and Styles Start-->Note:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:left;padding: 0 10px;font-size:13px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
a. To change the height and width of the thumbnails, just edit the values in red (100px) to your desired size.
b. You can make the post appear even in your homepage, you just delete the values in violet. But I suggest not to do this since this will ruin your homepage aesthetics.
2. Then do CTRL+F again and find the second <div class='post-footer'> code and copy-paste these codes before or above it.
<!-- Related Posts with Thumbnails Code Start-->Note:
<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>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiMZAZdy41SwyRsJ-bJfb92pN6jiPQTqsJsvN-ZL2hck3lhYy6g8pryIqk-shlItTavMzIaiIK7KdWN_ygO3Of4QqIyya47afGq9kIqeMCSSjdPVNt_9ZBwd85TYmNNZK2fSeg0NEiYp4J/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->
a. You can change the number of related posts appearing in your footer by changing the value in red (5) to suit your own template.
b. If you want the widget to appear in the homepage also, just delete the codes in violent.
Drop me a comment below for your questions and feedback.
Sponsored Links
0 comments:
Post a Comment