How to make Related Post in Blogspot or Blogger
How to make Related Post in Blogspot or Blogger
For good layout "Related Posts" at the store the exact bottom of the article, or a little distance from the article.
* Attention
And the thing to remember is this related Post will run or be seen if the article you have the same labeled / categorie / tag from several papers.
Here are the stages to add Related Posts script into Blog Templates.
1. Login / enter to your account Blogger.com.
2. On page dasboard into Layout (layout), select the Edit Html tab.
3. Then mark / check the box on the "Expand Widget Templates"
4. After that place the following script under the tag ]]></ b: skin>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
5. Save template
6. Then find this section and add the red code as below
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>
7. Now find the code lines following a post-footer.
<div class='post-footer-line post-footer-line-3'>
Then input this script underneath.
<b:if cond='data:blog.pageType == "item"'>
<div class='related-posts'>
<h4>Related Post:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>
8. Save the changes (save the template).
If you want to give the style or styles on display this Post Related Widgets. we could add to his Css pages, the following script, before the tag ]]></ b: skin>
.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: font size;
color: #value color;
}
To List
.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: font size;}
.related-posts li a{color: #
.related-posts li a:hover{color: #
Hopefully helpful..!
0 komentar :