'লেবেল' গেজেটকে 'ড্রপডাউন' বা 'পপআপ' মেনুতে রূপান্তর করার পদ্ধতি

লক্ষ্য করেছেন কি যে "বাংলা হ্যাকস" ব্লগের 'বিষয় তালিকা' (Label Gadget) ড্রপডাউন হয়ে গেছে। ডানপাশের সাইডবারের একেবারে নিচে এই 'লেবেল' বা 'ক্যাটাগরী' গেজেটটিকে রেখে দিয়েছি। কিছুদিন আগেও আমি লেবেল গেজেটটিকে ব্লগের বামপাশে রেখে দিয়েছিলাম। কিন্তু দিনে দিনে এত বেশি বিষয় পোস্টগুলোতে ট্যাগ করা হয়েছে যে বামপাশের সাইডবারে জায়গা ধরছিল না। আমি ইচ্ছা করলে নির্দিষ্ট কিছু লেবেল দেখানোর জন্য নির্বাচিত করে রাখতে পারতাম। কিন্তু আমি এটা পছন্দ করি না। এতে হয়তো প্রয়োজনীয় কোন বিষয় পাঠকের দৃষ্টিসীমার বাইরে চলে যেতে পারে। তাই সবগুলো লেবেল পাঠকের সামনে রেখে দেয়ার ধারণাটিকে আমি সমর্থন করি। কিন্তু যেহেতু সাইডবারে জায়গা হচ্ছিল না, সেহেতু এই গেজেটটিকে আমি আকারে ছোট করে ফেললাম। ড্রপডাউন মেনুবারের মতো করে ফেললাম। ফলে অল্প জায়গাতেই আমি সবগুলো বিষয়কে রেখে দিতে সক্ষম হলাম। পাঠক 'বিষয় তালিকা' লেখাটিতে ক্লিক করলে ড্রপ ডাউন বা পপআপ (জায়গাভেদে) মেনু হিসেবে সবগুলো বিষয়কে দেখতে পারবে। এখান থেকে যে কোন একটি বিষয়কে বেছে নিলেই বিষয় সংশ্লিষ্ট পোস্টগুলো দেখা যাবে।
আপনার ব্লগে যদি বিষয়ের সংখ্যা অনেক বেশি হয়ে যায়, যদি এটা আপনার নিয়ন্ত্রণের বাইরে চলে যেতে ধরে, তাহলে এখনি এই গেজেটটিকে ড্রপডাউন মেনুর মতো করে নিন। ব্লগ শরীরে জায়গা বাঁচবে। বেঁচে যাওয়া যায়গায় অন্য কোন গেজেট লাগাতে পারবেন। কিভাবে করবেন?
How to make label gadget like dropdown or popup menu in blogger.com blog.
ব্লগের লেবেল গেজেটকে ড্রপডাউন (পপআপ) মেনুর মতো করে তৈরি করার পদ্ধতিঃ
  • ব্লগার.কম এ লগইন করুন।
  • প্রথমেই Layout> Page Elements ট্যাব থেকে ব্লগে একটি লেবেল গেজেট নিয়ে নিন।
  • এবার Layout> Edit HTML ট্যাবে যান।
  • Expand Widget Templates লেখার পাশের চেকবক্সে টিক চিহ্ন দিবেন না।
  • এবার নিচের লাইনটি খুঁজে বের করুন।
  • <b:widget id='Label1' locked='false' title='Labels' type='Label'>
  • এই লাইনটি সম্পূর্ণ মুছে দিয়ে নিচের কোডটি স্থাপন করুন।
  • <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <br/>

    <select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
    <option>Label Gadget Name</option>
    <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'><data:label.name/>
    </option>
    </b:loop>
    </select>

    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
  • পরীক্ষা করে দেখার জন্য নিচের PREVIEW লেখা নীল রঙের বোতামটিতে ক্লিক করুন।
  • সন্তুষ্ট হলে SAVE TAMPLATE লেখাতে ক্লিক করুন।
  • উপরের কোডটির দুটো জায়গায় সম্পাদনা করতে হবে।
  • যে সাইডবারে রাখবেন, তার মাপ অনুযায়ী 200px মানটি পরিবর্তন করুন।
  • লেবেল গেজেটটির নাম পরিবর্তন করার জন্য Label Gadget Name শব্দগুলো পরিবর্তন করে দিন।
 

পাঠকের প্রতিক্রিয়া

কিছু কথা

সফটওয়ার ও ওয়েবওয়ারের বিভিন্ন টিপ্‌স, টিউটোরিয়াল, হ্যাক্‌স, টেমপ্লেট বা থিম্‌স ইত্যাদি নিয়েই আমি ব্লগ লিখছি। আমার প্রধান আগ্রহ ব্লগিং টিপস। এছাড়াও প্রযুক্তির বিচিত্র বিষয় নিয়ে মত বিনিময়, সমস্যা ও তার সমাধান এবং আলোচনা করার জন্য এই ব্লগ খুলেছি। আশা করি আপনি নিরাশ হবেন না। এই ব্লগের সব লেখাগুলো যেকোন মিডিয়ায় এই লাইসেন্সের আওতায় প্রকাশ করতে পারবেন। বিস্তারিত পড়ুন....

Search This Blog

© 2009-2014 Bangla Hacks | Design by: Bangla Hacks. Powered by: Blogger