টেক্সট রিসাইজার অপশন এমন একটি সুবিধা যা আপনার ব্লগের পাঠক এবং ভিজিটরকে পোস্টের টেক্সট সাইজ ইচ্ছা মতো ছোট বড় করে দেখার সুবিধা। টেক্সট রিসাইজ অপশনটি সচরাচর জুমলা দিয়ে তৈরি ওয়েব সাইটে দেখতে পাওয়া যায়। এখন আপনি যদি আপনার ব্লগে টেক্সট রিসাইজার অপশনটি যুক্ত করেন তাহলে আপনার সাইটের একটি আলাদা লুক তো আসবেই আর ব্লগের পাঠকের ব্লগ পোস্ট পড়তেও সুবিধা হবে। কি চান নাকি এরকম কিছু একটা করতে? তাহলে নিচের ধাপ গুলো অনুসরণ করুন।
ধাপ – ১ ঃ প্রথমে ইউজারনেম এবং পাসওয়ার্ড দিয়ে www.blogger.com এ লগইন করুন।
ধাপ – ২ ঃ এবার যে ব্লগটিতে টেক্সট রিসাইজার অপশনটি যুক্ত করতে চান তার Design > Edit HTML এ যান এবং টেম্পলেটির ব্যকআপ নিন।
ধাপ – ৩ ঃ এখন Expand Widget Templates চেকমার্ক বক্সটিতে টিক দিন এবং ]]></b:skin> কোডটি খুঁজে বের করুন
ধাপ – ৪ ঃ ]]></b:skin> কোডটির ঠিক নিচে নিচের কোড গুলো টাইপ করে দিন।
<style type=’text/css’>
/*—– Text Resizer ——*/
.controlstyle a{ /*links inside DIV sizecontroldiv*/
outline:none;
}
.controlstyle a img{ /*image links inside DIV sizecontroldiv*/
border-width:0;
}
.controlstyle a.selectedcontrol img{ /*selected control's image*/
border-bottom:4px solid darkred;
}
.mbt-text-resizer{
font-weight:bold!important; color:#F07727!important; text-decoration:none!important; font-family:arial,tahoma !important; font-size:16px!important;
}
#mbt-text-resizer-container {
margin:4px 0px;
padding:4px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd; width:100%;
}
</style>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ type=’text/javascript’/>
<script src=’ http://nafiur.googlecode.com/files/text%20resizer.js ‘ type=’text/javascript’>
</script>
<script type=’text/javascript’>
var mytextsizer=new fluidtextresizer({
controlsdiv: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not defined
targets: ["body"], //target elements to resize text within: ["selector1", "selector2", etc]
levels: 10, //number of levels users can magnify (or shrink) text
persist: "session", //enter "session" or "none"
animate: 200 //animation duration of text resize. Enter 0 to disable
})
</script>
ধাপ – ৫ ঃ এবার <data:post.body/> কোডটি খুঁজে বের করুন।
ধাপ – ৬ ঃ উক্ত কোডের উপরে নিচের কোডটি লিখে দিন।
<b:if cond=’data:blog.pageType == "item"’>
<div id=’mbt-text-resizer-container’>
<div class=’controlstyle’ id=’sizecontroldiv’>
<font style=’color:#666; font-weight:bold;’>Adjust the font size:</font> <a class=’mbt-text-resizer’ href=’#smaller’><img src=’http://2.bp.blogspot.com/-hcriotbuHqQ/TprlX1VeBII/AAAAAAAAFRA/h331qxRqqxo/s400/oranged.png’/> </a> <a class=’mbt-text-resizer’ href=’#bigger’><img src=’http://3.bp.blogspot.com/-ZCdAqxALWFQ/TprlYKwK4QI/AAAAAAAAFRI/YBkNpOf3AHo/s400/orangei.png’/> </a><a class=’mbt-text-resizer’ href=’javascript:mytextsizer.setFontLevel(0)’ rel=’nofollow’>Reset ↕</a>
</div>
</div>
</b:if>
ধাপ – ৭ ঃ এবার টেম্পলেটটি সেভ করুন। এখন প্রতি পোস্টেই টেক্সট রিসাইজ অপশন দেখা যাবে। আপনি যদি হোমপেজেও টেক্সট রিসাইজার অপশনটি দেখাতে চান হলে ৬ নং ধাপের প্রথম লাইন অর্থ্যাৎ <b:if cond=’data:blog.pageType == "item"’> কোডটি এবং শেষের লাইন অর্থাৎ </b:if> কোডটি মুছে দিন। ব্যস কাজ শেষ।
Thanks