சின்ன எழுத்தும் பெரிய எழுத்தும் ( Text/Font Resizer )

பிலாக்கர் பதிவுகளைப் படிக்கும் போது சில நேரம் தர்மசங்கடமாயிருக்கும்.சில வலைப்பக்கங்களில் எழுத்துக்கள் மிகப் பொடியாகவும் சில பக்கங்களில் பெரிய எழுத்து விக்கிரமாதித்தன் கதை போல வழக்கத்தைவிடப் பெரியதாகவும் இருக்கும்.யார் எப்படி எழுதினால் நமக்கென்னங்க.நாம் விரும்பிய அளவுக்கு எழுத்துருவை மாற்றிப் படிக்க வேண்டியதுதான்.இதற்கு "Text/Font Resizer" எனப்படும் எழுத்துரு மாற்றியைப் பயன் படுத்தினால் போதும்.
இந்த ரீசைஸர் சின்ன அளவான ஒரு ஜாவா ஸ்கிரிப்ட் தான்.இணையத்தில் விதவிதமான ஸ்கிரிப்டுகளும் வெவ்வேறு அமைப்புகளைத் தரும் css களும் உள்ளன.டெமோ வுக்கு இங்கே சென்று பார்க்கவும்.

முதலாவது:small:medium:Large:Larger:Largest:

இப்படியான ரீசைஸர் க்கு கீழே உள்ள ஸ்கிரிப்டை காபி பண்ணி பிலாக்கின் லே அவுட் பகுதிக்குச் சென்று add a gadget ஓபன் செய்து பேஸ்ட் பண்ணி விட்டு சேவ் செய்தால் போதுமானது.பிலாக்கின் html பகுதியில் கை வைக்க வேண்டாம்.மிக மிக எளிதானது .அத்துடன் ஜீ பூம்பா மாதிரி சில சொடுக்குகளிலே பெர்ர்ர்ர்ரியதாகவோ ஹனி ஐ ஷ்ரங் த கிட்ஸ் மாதிரி ச்ச்ச்ச்சின்னதாகவோ எழுத்துருவை மாற்றிக் கொள்ள முடியும்.:)) .போஸ்டுக்கு மேலோ அல்லது சைடு பாரிலோ வைத்துக் கொள்ளலாம்.

Change Text Size<br/>

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span >Small</span></a>

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span >Medium</span></a>

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span >Large</span></a>

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span >Larger</span></a>

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span >Largest</span></a>

இரண்டாவது :Text Size : [+][-]

இதற்கு கொஞ்சம் பிலாக்கின் html பகுதியில் கை வைத்து சின்ன ஜாவா ஸ்கிரிப்ட்டும் css ஸ்டைலிங்கும் சேர்க்கனும்.துணிச்சலானவங்க இதை சோதித்துப் பாருங்க.எதற்கும் டெம்ப்லேட் சேவ் செய்து கொள்ளவும்.அப்புறம் வடை போச்சே ன்னு புலம்பக் கூடாது.
படி 1.பிலாக்கின் edit html பகுதிக்குச் சென்று
]]></b:skin>மேலாக இந்த css கோடை பேஸ்ட் செய்யவும்.

.textresize {

padding-left:20px;

padding-top:5px;

}

படி:2 பிலாக்கின் </head> பகுதிக்கு மேலாக கீழ் வரும் ஜாவா ஸ்கிரிப்டை பேஸ்ட் செய்யவும்.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin ResizeFont -->

<script type='text/javascript'>

$(function(){

$(&#39;input&#39;).click(function(){

var ourText = $(&#39;#content-wrapper&#39;);

var currFontSize = ourText.css(&#39;fontSize&#39;);

var finalNum = parseFloat(currFontSize, 10);

var stringEnding = currFontSize.slice(-2);

if(this.id == &#39;large&#39;) {

finalNum *= 1.1;

}

else if (this.id == &#39;small&#39;){

finalNum /=1.1;

}

else if (this.id == &#39;reset&#39;){

finalNum =13;

}

ourText.animate({fontSize: finalNum + stringEnding},500);

});

});

</script>

படி:3:பின் html பகுதியில் இந்தக் கோடை [லைன்]
<div class='post header-line-1> கண்டு பிடித்து

[ctrl+f கிளிக் செய்து வரும் find பெட்டியில்<div class='post header-line-1> என்று டைப் செய்தால் இந்த லைன் ஹை லைட்டாகத் தெரியும்.]

அதன் கீழாக இதை பேஸ்ட் செய்யவும்.அல்லது.லேவுட் சென்று Add a Gadget'. கிளிக் செய்து பேஸ்ட் பண்ண சைடு பாரில் தெரியும்

<span class='textresize'>

Text Size :<a href='javascript:changeFontSize(1)'> [+]</a> | <a href='javascript:changeFontSize(-1)'> [-]</a>

</span>

மூன்றாவது: இந்த மாதிரி பட்டன் அமைப்பு.

படி:1 மேலே சொன்னவாறு பிலாக்கின் edit html பகுதிக்குச் சென்று

]]>மேலாக இந்த css கோடை பேஸ்ட் செய்யவும்.

/* resizeFont

*/

#resizeFont{

text-align:right;

margin-right:10px;

}

படி:2:பிலாக்கின் </head> பகுதிக்கு மேலாக கீழ் வரும் ஜாவா ஸ்கிரிப்டை பேஸ்ட் செய்யவும்.

<div style="background-color: #cfe2f3;">&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/&gt;</div><div style="background-color: #cfe2f3;"><div style="background-color: #cfe2f3;">&lt;!-- begin ResizeFont --&gt;</div><div style="background-color: #cfe2f3;">&lt;script type='text/javascript'&gt;</div><div style="background-color: #cfe2f3;">$(function(){</div><div style="background-color: #cfe2f3;">$(&amp;#39;input&amp;#39;).click(function(){</div><div style="background-color: #cfe2f3;">var ourText = $(&amp;#39;#content-wrapper&amp;#39;);</div><div style="background-color: #cfe2f3;">var currFontSize = ourText.css(&amp;#39;fontSize&amp;#39;);</div><div style="background-color: #cfe2f3;">var finalNum = parseFloat(currFontSize, 10);</div><div style="background-color: #cfe2f3;">var stringEnding = currFontSize.slice(-2);</div><div style="background-color: #cfe2f3;">if(this.id == &amp;#39;large&amp;#39; ) {</div><div style="background-color: #cfe2f3;">finalNum *= 1.1;</div><div style="background-color: #cfe2f3;">}</div><div style="background-color: #cfe2f3;">else if (this.id == &amp;#39;small&amp;#39 ;) {</div><div style="background-color: #cfe2f3;">finalNum /=1.1;</div><div style="background-color: #cfe2f3;">}</div><div style="background-color: #cfe2f3;">else if (this.id == &amp;#39;reset&amp;#39 ;) {</div><div style="background-color: #cfe2f3;">finalNum =13;</div><div style="background-color: #cfe2f3;">}</div><div style="background-color: #cfe2f3;">ourText.animate({fontSize: finalNum + stringEnding},500);</div><div style="background-color: #cfe2f3;">});</div><div style="background-color: #cfe2f3;">});</div><div style="background-color: #cfe2f3;">&lt;/script&gt;</div><div style="background-color: #cfe2f3;">
</div><div style="background-color: #cfe2f3;">
</div><div style="background-color: #cfe2f3;"></div></div></div>

படி:3:பின் வரும் 'பட்டன்' கோடை லே அவுட் சென்று Add a Gadget'. கிளிக் செய்து பேஸ்ட் பண்ணவும்.

<div id='resizeFont'>

<input id='large' type='button' value='A+'/>

<input id='reset' type='button' value='A'/>

<input id='small' type='button' value='A-'/>

</div>

டிஸ்கி:மூன்று விதமான டெக்ஸ்ட் ரீசைஸர் கோடும் இருக்கு.வெள்ளெழுத்துக் கண்ணாடிக்காறங்க பயன்படுத்திக்கங்க.

டிஸ்கி:2

இதைவிட இன்னும் சுலபமாக கீ போர்டு பயன்படுத்த வலைப் பதிவர் உதவிப் பக்கத்தில் சொல்லியிருக்காங்க:

தட்டச்சுப் பலகையில் இப்படி கீயை அழுத்தவும்

பெரிதாக்க Ctrl மற்றும் +

சிறிதாக்க Ctrl மற்றும் -