என் பிளாக்கிற்கு டெம்ப்ளேட் மாற்றலில் சந்தித்த பிரச்சனைகள் - Automatic Read More With Thumbnails

         நண்பர்களே, நான் சில நாட்களுக்கு முன்பு எனது வலைப்பூவுக்கு டெம்ப்ளேட் மாத்தினேன். அந்த டெம்ப்ளேட்டில் சிறு படத்துடன் கூடிய மேலும் வாசிக்க (Automatic Read More With Thumbnails) என்ற வசதி புதிய டெம்ப்ளேட்டில் இல்லை. இந்த வசதி இருந்தால் நமது முகப்பு பகுதியில் ஒவ்வொரு இடுகையும் ஒரு சிறு படத்துடன் இடுகையின் முதல் நான்கைந்து வரிகளும் மட்டுமே காட்டும். இதனால் முகப்பு பக்கத்தில் நான்கைந்து இடுகைகள் காட்டுமாறு வைத்தாலும் பக்கம் லோடிங் ஆவதில் பிரச்சனை இருக்காது. முகப்பு பக்கமும் பார்க்க அழகாக இருக்கும்.

        ப்ளாக்கரில் NEW POST எழுதுகிற பக்கத்தில் "மேலும் வாசிக்க" என்ற வசதி (INSERT JUMP BREAK) வைக்கும் ஆப்ஷன் இருக்கு (பார்க்க மேலே உள்ள படம்). இருந்தாலும் ஒவ்வொரு பதிவிற்கும் நாம் இந்த ஐக்கானை கிளிக் செய்ய வேண்டும். இது நமக்கு இடுகை இடும் போதெல்லாம் மறக்காமல் இருக்க வேண்டும். இதற்காகவே இடுகையின் ஆரம்பத்தில் ஒரு படம் இணைக்க வேண்டும். ஆனால் நான் சொல்லப் போகும் டிப்ஸில் இந்த "மேலும் வாசிக்க" வசதியானது படத்துடன் ஒவ்வொரு இடுகைக்கும் தானாகவே எடுத்துக் கொள்ளும். சில html codes நமது டெம்ப்ளேட்டில் இணைத்தால் மட்டும் போதும். நாம் எப்பவும் போல இடுகை இட்டாலே போதும்.

     மேற்கண்ட படத்தில் இருப்பது போல இடுகையின் தலைப்புக்கு கீழே ஒரு படம் மற்றும் இடுகையின் முதல் நான்கைந்து வரிகள் இருப்பது போல எப்படி வைக்கலாம் என்பதை கீழே காணலாம்.

1). பிளாக்கர் ஓபன் செய்துடாஸ்போர்டில் layout சென்று edit html சென்று "expand widget templates" box ஐ கிளிக் செய்யவும்.


2). அடுத்து </head> என்ற வரியை கண்டுபிடிக்க வேண்டும். அதற்கு மேலே கீழ்க்கண்ட html codeஐ சேர்க்கவும்.


<script type='text/javascript'>var thumbnail_mode = "no-float" ;summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

3). மேலே உள்ள codeஐ சேர்த்த பின்னர் <data:post.body/> என்பதை கண்டுபிடித்து, அதற்கு பதிலாக கீழே உள்ள html codeஐ replace செய்ய வேண்டும்.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>


4). read more  இதற்கு பதிலாக "மேலும் வாசிக்க" என தமிழில் கொடுங்கள்.


5). அடுத்து save template கொடுங்கள்.

       இனி ஒவ்வொரு இடுகையும் சிறு படத்துடன் மேலும் வாசிக்க என்ற வசதியுடன் கிடைக்கும். இந்த டிப்ஸ் மூலம் தான் என் வலைப்பூவிலும் சிறு படத்துடன் மேலும் வாசிக்க வசதி வைத்துள்ளேன். இனி உங்கள் வலைப்பூவுக்கும் ஈஸி தானே....

thanks: google search & http://www.anshuldudeja.com

ஓர் டிப்ஸ் வேணும் யாராச்சும் சொல்றிங்களா?

முகப்பில் உள்ள ஒட்டு பட்டைகளை மறைப்பது எப்படி?

மேலும் வாசிக்க... "என் பிளாக்கிற்கு டெம்ப்ளேட் மாற்றலில் சந்தித்த பிரச்சனைகள் - Automatic Read More With Thumbnails"