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

by
steel chain for related post 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). இதை சரிசெய்ய இயலாததற்கு மன்னிக்கவும்.

இதையும் படிங்க:  ஒரு நொடியில் ஆயிரம் பின்னூட்டங்கள்

45 thoughts on “பிளாக்கரில் Related Posts Widget வைப்பது எப்படி?”

  7. @prabhadamu

    நன்றி நண்பா…!

    @Praveen-Mani

    மன்னிக்கவும். Code-ல் சிறிய பிழை ஏற்பட்டுவிட்டது. தற்பொழுது சரிசெய்யப்பட்டுள்ளது.

  9. @தாஜுதீன்
    தங்கள் வருகைக்கும், கருத்துக்கும் நன்றி…

    தங்களுக்கு மெயில் அனுப்பியுள்ளேன்..

  11. நன்றி நண்பா….இப்பொழுது work ஆகிறது….நண்பா மேலும் நீங்கள் domain registration பற்றி ஒரு பதிவு போட்டால் என்ன..?

  12. @denim
    தங்கள் வருகைக்கும், கருத்துக்கும் நன்றி…!

    @Praveen-Mani
    //இப்பொழுது work ஆகிறது..//
    மிக்க மகிழ்ச்சி..

    //domain registration பற்றி ஒரு பதிவு போட்டால் என்ன..?//
    இறைவன் நாடினால், கண்டிப்பாக எழுதுகிறேன்.

  13. Hi Abdul – I was looking for this related posts widget, but I wanted it with only the text (not with images, like in most sites). This one exactly matches with what I wanted. As usual, thanks a lot.

    One small request. The max-results doesn't work with my blogs. I had set it to 5, but look at the below post, it shows 7 related links.

    http://prem82.blogspot.com/2010/09/blog-post.html

    Anything to do with the labels?. If you could correct and post the code, it would be helpful for all of us. Thanks again.

  14. @Premkumar Masilamani

    //The max-results doesn't work with my blogs. I had set it to 5, but look at the below post, it shows 7 related links.//

    தற்பொழுது பதிவின் கீழ் குறிப்பு ஒன்றை சேர்த்துள்ளேன், அதை படிக்கவும். சுட்டிக்காட்டியதற்கு நன்றி நண்பா..!

  17. சகோ பாஸித்..அருமை…எல்லாத்தையும் அப்டேட் செய்து விட்டேன்..ப்ளாக் பார்க்க நன்றாக இருக்கிறது..
    நன்றி….

  18. //RAZIN ABDUL RAHMAN said…

    சகோ பாஸித்..அருமை…எல்லாத்தையும் அப்டேட் செய்து விட்டேன்..ப்ளாக் பார்க்க நன்றாக இருக்கிறது..
    நன்றி….
    //

    மிக்க மகிழ்ச்சி சகோ..

  19. சகோதரர் பாஸித் அவர்களே..,
    நான் இந்த பகுதியில் படித்து அதன் படியே முயன்றும் பார்த்தேன்.
    ஆனால் குறிப்பின் மேலே அதுவும் படங்கள் இல்லாமல் வெறும் தலைப்புகள் மட்டுமே வந்துள்ளது.இதில் நான் செய்த தவறு என்ன என்று தயவு செய்து தெரிவிக்கவும்.

    அன்புடன்,
    அப்சரா.

  20. //apsara-illam said…

    சகோதரர் பாஸித் அவர்களே..,
    நான் இந்த பகுதியில் படித்து அதன் படியே முயன்றும் பார்த்தேன்.
    ஆனால் குறிப்பின் மேலே அதுவும் படங்கள் இல்லாமல் வெறும் தலைப்புகள் மட்டுமே வந்துள்ளது.இதில் நான் செய்த தவறு என்ன என்று தயவு செய்து தெரிவிக்கவும்.

    அன்புடன்,
    அப்சரா.
    //

    சகோதரி! தற்போது இந்த code-ஐ நீக்கி விட்டீர்களா அல்லது அப்படியே இருக்கிறதா? மறுபடியும் முயற்சிக்கவும்.

  22. //Loyal Tip said… 21

    nadri, but enakku work panna illayae//

    சுட்டிக் காட்டியமைக்கு நன்றி நண்பா! இப்பொழுது தான் கவனித்தேன். முன்பு வேலை செய்தது. என்ன தவறு என்று கண்டுபிடித்து சொல்கிறேன் நண்பா!

  29. அன்பு பாஸித் அவர்களே!
    எனது பிளாகரில் இந்த கோடைக் கண்டு பிடிக்க முடியவில்லையே!! வேறு ஏதேனும் வழிமுறை உண்டா. எனது ப்ளாகர்: http://keyemdharmalingam.blogspot.com/ . மற்ற இரண்டு Code -ஐயும் கண்டு கொண்டேன். மாற்றம் எதுவும் எனது பிளாகரில் தற்போது செய்யவில்லை.
    இதற்கு பதில் வேறு ஏதேனும் code உண்டா??
    விளக்கத்தை எதிர் நோக்கும்
    கே எம் தர்மலிங்கம்.. (http://keyemdharmalingam.blogspot.com/)

  31. //andkm said… 29

    அன்பு பாஸித் அவர்களே!
    எனது பிளாகரில் இந்த கோடைக் கண்டு பிடிக்க முடியவில்லையே!! வேறு ஏதேனும் வழிமுறை உண்டா. எனது ப்ளாகர்: http://keyemdharmalingam.blogspot.com/ . மற்ற இரண்டு Code -ஐயும் கண்டு கொண்டேன். மாற்றம் எதுவும் எனது பிளாகரில் தற்போது செய்யவில்லை.
    இதற்கு பதில் வேறு ஏதேனும் code உண்டா??
    விளக்கத்தை எதிர் நோக்கும்
    கே எம் தர்மலிங்கம்.. //

    நண்பரே! எந்த code தெரியவில்லை?

  33. //andkm said… 29

    அன்பு பாஸித் அவர்களே!
    எனது பிளாகரில் இந்த கோடைக் கண்டு பிடிக்க முடியவில்லையே!! வேறு ஏதேனும் வழிமுறை உண்டா. எனது ப்ளாகர்: http://keyemdharmalingam.blogspot.com/ . மற்ற இரண்டு Code -ஐயும் கண்டு கொண்டேன். மாற்றம் எதுவும் எனது பிளாகரில் தற்போது செய்யவில்லை.
    இதற்கு பதில் வேறு ஏதேனும் code உண்டா??
    விளக்கத்தை எதிர் நோக்கும்
    கே எம் தர்மலிங்கம்.. //

    நண்பரே! எந்த code தெரியவில்லை?
    ******************

    முதல் இரண்டு முதல் இரண்டு நிரலிகளையும் பதியும் இடத்தினை கண்டு பிடித்து விட்டேன் மூன்றாவது code , எனது பிளாகரில் (http://keyemdharmalingam.blogspot.com/ .) இதனைக் கண்டு பிடிக்க முடியவில்லையே எனது பிளாகரின் அன்பு நண்பரே பாஸித் அவர்களே!!!

  34. //மழைதூறல் said… 32

    செயல் படுத்தி பார்தேன் நன்றாக வேலை செய்கிறது.பதிவுக்கு நன்றி!//

    நன்றி நண்பா!

  35. @andkm

    நண்பரே! Expand Widget Template என்பதை க்ளிக் செய்தீர்களா? க்ளிக் செய்து வரவில்லையெனில்,

    <div class='post-header-line-1'/>

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

  36. நண்பா நான் பக்கத்திற்கு ஒரு பதிவு வைத்து எழுதுகிறேன்.
    Home-ல் (http://coolms11.blogspot.com) சென்று பார்த்தால் Related Posts தோன்றவில்லை.
    பதிவின் தலைப்பை (http://coolms11.blogspot.com/2011/10/3_24.html) கிளிக் செய்து பார்த்தால் தோன்றுகிறது.
    Home பக்கத்திலும் தோன்ற ஏதாவது மாற்றம் செய்யவேண்டுமா.

    coolms11@gmail.com

  38. [ma]நண்பரே பாஷித் அவர்களே !மிக அருமையான பதிவு– அறியக் கொடுத்தமைக்கு மிக்க வந்தனமும் வாழ்த்துக்களும் நண்பரே!!![/ma]

  41. நண்பரே,சங்கத்து காவலரே,எல்லாம் பண்ணிட்டு போய் பார்த்தா RELATED POSTS மேலே வருது நண்பா,என்ன தப்பு? எங்கே போய் மாற்ற?இந்த IMAGE கூட வர்ற மாதிரி பண்ண முடியாதா? உடனடி உதவி தேவை…

  42. <data:post.body/>

    இந்த கோடிற்கு முன்னால் நீங்கள் சேர்க்க வேண்டிய நிரலை சேர்த்துவிட்டீர்கள்.

    அந்த கோடிற்கு பின்னால் (After) சேர்க்க வேண்டும்.

  43. அன்பு நண்பர் அப்துல் பாஷித் அவர்களுக்கு, தாங்கள் கூறியபடி செய்த பின்பு எனது பிளாகர்கள் அனைத்தும் மிக அருமையாக உள்ளது. எனது வலை பூவினில் வேறு என்னன்ன மாற்றங்கள் செய்யலாம் என்பதனையும் குறிப்பிட்டுக் கூறும்படிக் கேட்டுக் கொள்கின்றேன். தங்களுக்கு எனது அன்பு கலந்த வணக்கங்களும், வாழ்த்துக்களும், வந்தனங்களும். அன்புடன் கே எம் தருமா.
    http://tiruvalluvar-tirukkural.blogspot.in/ http://tnsfchrompet.blogspot.in/
    http://thirumoolar-andkm.blogspot.in/
    http://http://keyemdharmalingam.blogspot.in/

  44. ஹலோ பாஸ் ,
    நான் தான் தொந்தரவு பண்ண வந்துவிட்டேன்
    நீங்கள் கொடு துள்ள மாதிரிrelated post code paste செய்துவிட்டேன் ஆனாலும் ஏன்
    எனக்கு related post வரவில்லை கொஞ்சம் சொல்லுங்களேன்

  45. மிகவும் நுட்பமான தகவல்களையெல்லாம் போகிறபோக்கில் கற்பித்து விடுகிறீர்கள்! மிக்க நன்றி! ஆனால், எனக்கு ஓர் ஐயம்! அண்மையில், Edit HTML-ஐ பிளாக்கர் மாற்றிவிட்டதையொட்டி இப்பொழுது Expand Widget Templates என்ற பொத்தானையே காணவில்லையே, என்ன செய்வது? Edit HTML மீண்டும் பழையபடியே வரும்படி ஏதேனும் செய்ய முடியுமா?