Subscribe
Yesterday night I've done my research on how to set codding for a 'Link Within' alike function. Thanks to the author for the tutorial on how to install the widget with coding provided. Here is some reasons why I prefer this coding rather than Link Within:
- the thumbnails' size is in appropriate size.
- easy for the customization of the widget.
- the number of related posts can be adjusted beyond the default 5.
- and one more thing is that, the traffic is not directed elsewhere when thumbnails are clicked, so download speed of blog's contents is not hampered. From my reading, it is said that, LinkWithin directs traffic to its own site before redirecting back to our site, and thus slows down page download.
Are you ready for the excitement? simply follow these easy steps on
how-to install the Related Posts with thumbnails widget :
by Aneesh's tutorial at Blogger Plugins.
- First, ensure these 3 criteria are met to enable this widget to work:
a) should label all your posts as the widget fetches related posts bearing the same label with the current entry;
b) should have posted images in your posts for best display, otherwise the default image will be shown instead;
c) should have enabled your blog's feeds at Settings --> Site Feed.
- Sign in to your Blogger account. At Dashboard, click Design | Edit HTML. Before editing your blog's template, it's advisable to do a backup of it first, by clicking Download Full Template. Then, make sure that you check the Expand Widget Templates box, located on the right.
- Next, use the browser's search function (press Ctrl+F keys) to find the following code: </head> and replace it with the following code snippet :
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_AAnwc-vdzUdIs5FQCRfoxpnkhkpxdLt6eHNcYbJG_D7nRAlCcyA8wDB_UyX5yLab6GFXl5OCFIDLNrdIzYocAr71TXOH9gHYGsEFtXbfFVDpGRDZ-JUD4IFYpBVZ8mehUZ4fclY_q0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
- Next, find this line of code: <div class='post-footer'> and place immediately below it, the following code snippet :
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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.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-->
- Usually, you will click Preview to see the changes but take note that somehow the changes wouldn't show up in the preview for this widget (is it because it's designed not to appear on the homepage by default, I wonder?). So, best to check again that your additions are correctly placed to be doubly sure. Then only, click Save Template and View Blog.
- That's all to it! The image below shows how the Related Posts widget would appear, resulting from Aneesh's script code above. It will appear only on the posts' pages. If you want it to appear on the homepage as well, you have to customize the widget following step 6 below (do this after you've COMPLETED ALL THE STEPS ABOVE)
Truly a fantastic Related Posts widget with thumbnails which can be easily customized by yourself to suit your style! Some changes were made in mine as seen below where the widget's title and fonts were changed and spacing between thumbnails increased, to name a few!
Widget Customization
To configure your widget, you need to go back to the above codes at Design --> Edit HTML (remember to check the Expand Widget Templates box) and make the necessary edits, such as :
- To change the title of the widget, find var relatedpoststitle="Related Posts";
and replace the words, Related Posts with whatever you like.
- To change the colour of the splitter line, find var splittercolor=#d4eaf2";
and edit the color code. Best to use the colour of your post background if you wish the line invisible.
- To adjust the number of related posts to show, find var maxresults=5;
and edit the value.
- To adjust the space between thumbnails, find #related-posts a{
and add: margin: 0px 3px below it. The value 3px is for left and right margins, you can increase or decrease as wish.
- To change and restyle the fonts, margins and others, you will need to modify the relevant CSS. Learn more about CSS styling at W3Schools, one of my favourite resource center!
- To display the Related Posts on every page, that is, the post pages plus the homepage as well, find and remove these 2 lines from both the script code at Steps 3 and 4 above :
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
and
<!-- remove --></b:if>
- To edit the default thumbnail which is the image displayed when your post has no image, replace the URL that appear after this line of code:
var defaultnoimage=" to the URL of your own created image.
0 comments:
Post a Comment