Irsah in Designs


Blogger: Related Posts-Thumbnails Optimised




Today we are going to show you the tutorials and how to create a basic internal page optimisation for blog blogspot platform. Most of blog writers and website owners are very concern in on-page optimisations features for better search engine results. This is just a few tweaks, tricks and tips on doing the on-page optimisation techniques without using any 3rd party on-line srvices or softwares.

By displaying a pre-calculated internal links between your posts or articles on your websites, it will render a more search engine friendly and optimised page. Hence helping web visitors, with better user interactions (UI) page display, finding your previous posts/articles which may become to relevant. It is likely that users will be more tempted in clicking on internal web pages/posts/articles if they are presented with a mix of graphic and text. This widget will also render more efficiently, as some codings/page styling (css) is stored in your files. It helps in preventing or as an alternative on using a fully external on-line services that will provide the same features. Less out-bound scripts call, better page loading. 

This is actually a 2009 release by bloggerplugins.org and the technique is still used by many SEO webmasters/blog writers for on-page optimisations. The media thumbnails produced is generated through your blogger posts which you have uploaded with your articles by your editor of choice. Now, this widget will also support external images with a few add on tweaks which you find it useful for further enhancement.

Related Posts and Thumbnail Widget for Blogspot Blogger

Below are the step by step and details  in cretaing the related posts/articles with thumbnail for your blog pages.

  1. Login to your blogger dashboard, navigate to Layout > Edit HTML and check "Expand Widget Templates" check box
  2. Look for by pressing Ctrl-F or the F4 key.
  3. Copy the code below and paste it above/before 

	
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'> var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
  1. Find one of the below code again by pressing the Ctrl-F or the F4 key

	
<div class='post-footer-line post-footer-line-1'>
OR;
<p class='post-footer-line post-footer-line-1'>
  1. Immediately after one of the two lines above, paste the below codes after it.

	
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</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.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

	
Note:
You can adjust maximum numbers of posts/articles by editing 
var maxresults=5;
Edit posts/articles labels (it should ideally be one more that maxresults) 
max-results=6
Edit the title of the widget by changing this line of code 
var relatedpoststitle="Related Posts";
Change the default thumbnail, you can edit this line of code 
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
Change the Colour of the Splitter Line , edit this code 
var splittercolor="#d4eaf2";

Press Preview and wait until your page is parsed. If no errors occur, press save and your done.

How to display the related posts on every page and not only on the post pages?

If you want to display the related posts/articles with thumbnails on every page and not on your post pages, you can remove the code stated here.  from both of the above codes. The sample lines are shown below. (code delete)

If you see that the modifications is not working, you can simply edit and change the codes below. (code change).


	
<b:if cond='data:blog.pageType == "item"'>
AND;
<!-- remove --></b:if>

	
http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js 
TO;
http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js

 

We hope that with this tutorial, will help you with your on-page link building and better page performance. As optimising your pages/posts/articles will render a more friendlier indexing for search engines.