பிளாக்கரில் Related Posts Widget வைப்பது எப்படி?

நம்முடைய பதிவை படிக்கும் வாசகர்கள், படித்து முடித்ததும் நம் தளத்தைவிட்டு வெளியேறாமல் நம்முடைய பிற பதிவுகளையும் படிக்க வைக்க உதவுகிறது “தொடர்புடைய பதிவுகள் (Related Posts) Widget”. இந்த Widget மூலம் நம்முடைய ஒவ்வொரு பதிவின் கீழும் “தொடர்புடைய பதிவுகள்” என்று நம்முடைய பிற பதிவுகளின் தொகுப்புகளைவைக்கலாம்.


இந்த Widget-ஐ நிறுவுவதற்கு முன் கவனிக்க வேண்டியவை:

நீங்கள் ஒவ்வொரு முறை பதிவிடும் போதும் Labels என்ற பகுதியில் பதிவுகளுக்கேற்ற குறிச்சொற்களை பயன்படுத்துங்கள். அப்படி குறிச்சொற்களை பயன்படுத்தியிருந்தால் தான் இது பயனளிக்கும்.

Related Posts Widget-ஐ நிறுவும் முறை:

1. முதலில் Blogger Dashboard=>Design=>Edit Html செல்லவும். பிறகு Expand Widget Templates என்பதை க்ளிக் செய்யவும்.

2. Download Full Template என்பதை கிளிக் செய்து ஒரு காப்பி எடுத்து வைத்து கொள்ளுங்கள். நாம் டெம்ப்ளேட்டில் மாற்றம் செய்யும் போது தவறு ஏதாவது ஏற்பட்டால் மீண்டும் அதை Upload செய்து கொள்ளலாம்.

3.


]]></b:skin>

என்ற Code-ஐ தேடி, அதற்கு முன்னால் பின்வரும் Code-ஐ  paste செய்யவும்.

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://4.bp.blogspot.com/_v5IxGTiMTD8/S86tvMfnwNI/AAAAAAAABCo/L5mp8kwzf0I/s400/listarrow.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

4. பிறகு 


</head>

  என்ற Code-ஐ தேடி, அதற்கு முன்னால் பின்வரும்  Code-ஐ Paste செய்யவும்.


<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. பிறகு


<data:post.body/>

என்ற Code-ஐ தேடி அதற்கு பின்னால் பின்வரும் Code-ஐ Paste செய்யவும்.

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

*மேலே உள்ள Code-ல் சிவப்பு நிறத்தில் உள்ள Related Posts: என்பதற்கு பதிலாக உங்களுக்கு பிடித்த வார்த்தைகளை மாற்றலாம். உதாரணமாக, "தொடர்புடைய பதிவுகள்", "பிற பதிவுகள்"

*மேலே உள்ள Code-ல் நீல நிறத்தில் உள்ள max-results=5 என்ற இடத்தில்  எத்தனை பதிவுகள் தெரிய வேண்டும் என நீங்கள் நினைக்கிறீர்களோ அந்த எண்ணை போடவும்.

6. பிறகு Save Template என்பதை க்ளிக் செய்யவும். 

அவ்வளவுதான். இனி உங்கள் தளத்தில் ஒவ்வொரு பதிவின் கீழும் அதன் தொடர்புடைய பதிவுகளின் தொகுப்பு வந்துவிடும். 
  
 குறிப்பு: 
 நீங்கள் உங்கள் பதிவில் ஒன்றுக்கு மேற்பட்ட labels-ஐ பயன்படுத்தினால் அதற்கு ஏற்றவாறு max results மாறும். உதாரணத்திற்கு நீங்கள் max-results=5 என்று வைத்திருக்கிறீர்கள். பதிவில் இரண்டு labels-ஐ பயன்படுத்தி இருந்தால், அதிகபட்சமாக 10 பதிவுகள் வரும்(2*5). இதை சரிசெய்ய இயலாததற்கு மன்னிக்கவும்.