ইতিপূর্বে হয়তো বিভিন্ন ওয়েবসাইটে পোস্টের টেক্সট এর আকার কমানো বা বাড়ানোর ব্যবস্থা দেখেছেন। আমি নিজেও দেখেছি। তবে ঐ সাইটটি ছিল জুমলা বা ওয়ার্ডপ্রেস এর মতো কোন একটি সিএমএস ব্যবহার করে তৈরি করা। এখন মনে করতে পারছি না। যাই হোক প্লাটফর্মটি ছিল একটি প্রিমিয়াম প্লাটফর্ম। আমরা এই ট্রিক্সটির মাধ্যমে আপনি আপনার ব্লগে টেক্স্ট রিসাইজ করাতে পারবেন। অর্থাৎ ফন্ট সাইজ ছোট/বড় করতে পারবেন। তাহলে শুরু করা যাক-
এজন্য প্রথমে ব্লগার.কম এ যান এবং আপনার গুগল ইউজার নেম এবং পাসওয়ার্ড দিয়ে লগইন করুন। এবার ব্লগের টেম্পলেট অপশন থেকে Edit HTML এ যান এবং Expand Widget Templates চেক মার্ক বক্সে টিক দিন।
১. </head> কোডটি খুঁজে বের করুন। সহজে খুঁজে বের করার জন্য CTRL+F বাটন দুইটি ব্যবহার করতে পারেন।
২. এবার নিচের কোড গুলো </head> এর উপরে বসিয়ে দিন।
Code:
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js’ type=’text/javascript’/><script>$(document).ready(function(){
//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array(‘span’,’.section2′);
section = section.join(‘,’);
// Reset Font Size
var originalFontSize = $(section).css(‘font-size’);
$(".resetFont").click(function(){
$(section).css(‘font-size’, originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css(‘font-size’, newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css(‘font-size’, newFontSize);
return false;
});
});
</script>
৩. এবার <div class=’post-header-line-1’/> কোডটি খুঁজে বের করুন। সহজে খুঁজে বের করার জন্য CTRL+F বাটন দুইটি ব্যবহার করতে পারেন।
৪. এখন <div class=’post-header-line-1’/> এর ঠিক নিচে নিচে প্রদত্ত কোড গুলো বসিয়ে দিন।
Code:
<b:if cond=’data:blog.pageType == “item”‘><table border=’0′ style=’float:right; margin-left:5px;’><tr><td><img border=’0′ src=’http://4.bp.blogspot.com/-b1_J5npcUag/TdzJSK1mwdI/AAAAAAAAEFU/f7mZHFshlQI/s1600/font-size-blogger-gadget.png’/> | <a class=’increaseFont’ style=’cursor: pointer; cursor: hand;’ title=’Larger Text’><img src=’http://4.bp.blogspot.com/-DP_25fJBGew/TdzJRS0KcJI/AAAAAAAAEFM/P9-ikZyu3UE/s1600/bigger-font+-+Copy.png’/></a>
<a class=’decreaseFont’ style=’cursor: pointer; cursor: hand;’ title=’Smaller Text’><img src=’http://3.bp.blogspot.com/-9SuQUU3YZlI/TdzJTOokcLI/AAAAAAAAEFg/Nz8SeJ6-QIs/s1600/smaller-font.png’ style=’cursor: hand;’/></a>
<a class=’resetFont’ style=’cursor: pointer; cursor: hand;’ title=’Reset Text Size’><img src=’http://4.bp.blogspot.com/-i-uGhNM_bks/TdzJScrNpII/AAAAAAAAEFY/v4XGHbR30Cw/s1600/reset-font.png’ style=’cursor: hand;’/></a></td></tr></table>
</b:if>
৫. এপর্যায়ে <data:post.body/> কোডটি খুঁজে বের করুন এবং নিচের কোডের মাধ্যমে রিপ্লেস করুন।
Code:
<span><data:post.body/></span>
৬. এবার সেভ টেম্পলেট বাটনে ক্লিক করে আপনার পরিবর্তনটি সেভ করুন।
ব্যস আপনি পেয়ে গেলেন সুন্দর স্টাইলিশ টেক্সট রিসাইজার অপশন। তবে এখানে যা আলোচনা করা হলো তাতে এই অপশনটি শুধু আপনার ব্লগ পোস্টে দেখা যাবে। ব্লগের হোমপেজে দেখা যাবে না।