Yellow Blog: Blogger Tips

This article explains about how to make Related Post with Picture Thumbnails style. (Credit to Aneesh)

The demo of this hack is installed in this site... Please see below this article

STEP BY STEP TO INSTALL THIS TRICK

1. Sign In To Blogger
2. Go to LAYOUT -- Edit HTML -- Checked the box, expand widget templates
3. Find this

<head>

4. After that, Replace that code with this :

<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

</head>

5. Find this :

If you did not find it, please find this code :

6. Copy paste the code, below, under <p class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-1'>

<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=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.cahayabiru.com/2009/10/related-post-thumbnails.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.cahayabiru.com/' style='display:none;'>Blogger Templates</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><div style='clear:both'/>
</b:if>

Save Your Templates

NOTE :
After you save your templates, you may adjust how many thumbnail link will be shown to your reader. Please find this :

var maxresults=5;

The Number "5" is relating with how many relating post will be seen to your readers. You could change the number with any number that you want.

You could change the Title also. Please, find this:

var relatedpoststitle="Related Posts";

The words "Related Posts" is relating with the title. Please do not delete the quote symbol. You may delete only the word -- Related Posts

Ok, Everything is done. If you like my works and articles, you could subscribe in my feed form in right sidebar of this site.
Ok, Have a nice blogging.... :)

Many users of my template asked about how to make Sub title or children link in My template conversion. This article will explain about how to make category link in my works. And, this is only capable for template that designed by Jinsona Design, (except Gamezine...).

Before start, let us imagine about simple classification logic. Please see the screenshot below.

Ok.... First picture tell us about covered area. The Red is the biggest, it cover the blue and green color area. While the blue is the second biggest. And so on.
While, The second picture is telling us about the structure. A is the biggest class. A1, A2, A3, A4 are the second class. A1a, A1b, and etc are the smallest.

To make the sublink, The principle is the same with the classification in the screenshot above. Yes, so simple, right.

Now, Let's begin.
Here is the HTML Structure of Sub-link or children.
<li><a href="PARENT-LINK-ADDRESS">PARENT TITLE</a>
<ul class="children">
<li><a href="CHILDREN-LINK-ADDRESS">CHILDREN TITLE</a></li>
<li><a href="CHILDREN-LINK-ADDRESS">CHILDREN TITLE</a></li>
<li><a href="CHILDREN-LINK-ADDRESS">CHILDREN TITLE</a></li>

<li><a href="SUB-PARENT-LINK-ADDRESS">SUB PARENT TITLE</a>
<ul class="children">
<li><a href="CHILDREN-LINK-ADDRESS">CHILDREN TITLE</a></li>
<li><a href="CHILDREN-LINK-ADDRESS">CHILDREN TITLE</a></li>
<li><a href="CHILDREN-LINK-ADDRESS">CHILDREN TITLE</a></li>
<li><a href="CHILDREN-LINK-ADDRESS">CHILDREN TITLE</a></li>



</ul>
</li>



</ul>



</li>

Note 1:
The red Color is the largest / biggest class
The Blue color is the second largest class
The Green Color is the smallest class

Note 2:
Change the word below with website address or URL
CHILDREN-LINK-ADDRESS
CHILDREN-LINK-ADDRESS
SUB-PARENT-LINK-ADDRESS
PARENT-LINK-ADDRESS

Also, Change the word below with your link title:
CHILDREN TITLE
SUB PARENT TITLE
PARENT TITLE

Related Post Thumbnails

Category Menu

Blog Archive

Free Blogger Template Cahaya Biru

Followers

Search This Blog