How to create related articles with Thumbnails. Functions install related articles or related post is very important for bloggers, because with the related post we have shown to the readers to read the articles that relate to the post, read as if the reader is interested then auto pembacapun will linger in our blog.
Here's how to install related articles with thumbnails.
- Go to Your Blogger account.
- Click The Draft.
- Click the Edit HTML tab.
- Click the Download Full Template, just in case if an error occurred in the later edit template.
- Give a check mark on the Expand Widget Templates.
- Search the code of </head> when you use the Mozilla Firefox browser, press Ctrl + F, and then fill in the code is to facilitate the search.
- Copy the following code and paste the above code </head>
<!--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/AVvXsEh1Vw_ZC-9ndZ674lE5RcFmPEahUjI94Fo5NXNcFi8Z4-1Wab5BVZwnI5ZagtntoVss9EjWKy2jakduXZzs5FLgpiiLFksa7yCPGikRm7mBSpI05NMQEtSOpWYbzXdMy-hUu7E6VWPT7_4/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.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-->
- Code search < div class = ' post-footer-line post-footer-line-1 ' > or < p class = ' post-footer-line post-footer-line-1 ' >
- Copy the following code and paste the above code < div class = ' post-footer-line post-footer-line-1 ' > or < p class = ' post-footer-line post-footer-line-1 ' >
<!-- 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://infonetmu.blogspot.com/2011/12/cara-membuat-artikel-terkait-dengan.html'><img style="border: 0" alt="Cara membuat Artikel terkait dengan Thumbnail" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
- Click the SAVE TEMPLATE button.
Description:
- You can change the number of related articles that appear by changing the code var maxresults = 5;
- To change the title of the widget, you can edit the following code var relatedpoststitle = "Related Posts";
- If you want to override the default thumbnail, edit the following code var defaultnoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Vw_ZC-9ndZ674lE5RcFmPEahUjI94Fo5NXNcFi8Z4-1Wab5BVZwnI5ZagtntoVss9EjWKy2jakduXZzs5FLgpiiLFksa7yCPGikRm7mBSpI05NMQEtSOpWYbzXdMy-hUu7E6VWPT7_4/s400/noimage.png";
- To change the color of the Splitter Line, please edit the code var splittercolor = "# d4eaf2";
Posted by: Lala Khasanah
Khazanah Blog, Updated at: 10:37 AM
