আপনার ব্লগের সাইডবার Widget এ অ্যাড করুন Scrolling এফেক্ট

আপনার ব্লগের সাইডবারে কয়টি উইডগেট ব্যবহার করেন ? আমার মতে ৪-৫ টি তো মাস্ট রাখতেই হয় । যেমনঃ একটি পপুলার পোষ্ট, একটি ফেসবুক লাইক বক্স, একটা লেভেল, একটা থেকে দুইটা এড, কারো কারো তো আরও বেশি ব্যবহার করতে হয়  । কি ঠিক বলছি তো ? যদি তাই হয় আমি নিশ্চিত আপনার ব্লগের সাইডবারটা অনেক বড় হয়ে গিয়েছে । আর যার সাথে সামজ্বস্য বজায় রাখবার জন্য আপনি আপনার হোমপেজের পোস্টের সংখ্যা বাড়িয়ে দিয়েছেন । এটা মোটেয় ভালোকিছু নয় যে, আপনার ব্লগের হোমপজ মাইলের পর মাইল ধরে Scrolls করে যেতে হবে । এটি শুধু আপনার ব্লগের লোডিং টাইমই বৃদ্ধি করে না, এটা আপনার ব্লগের ডিজাইনকেও যথেষ্ট আনপ্রফেশনাল করে তোলে । যোদিও পোষ্ট পেজের ক্ষেত্রে বেপারটা একটু ভিন্ন, কারন সাধারনত আমাদের পোষ্ট পেজগুলো হোমপেজ থেকে বড় হয়ে থাকে ।
কিন্তু এই উইডগেটগুলো তো আপনাকে ব্যবহারও করতে হবে । তাহলে এই সমস্যার সমাধান কি ? চিন্তার কিছু নেই আজকে আমি সেই সমাধানটায় নিয়ে আসলাম । এই সমস্যার সহজ ও কার্যকারী সমাধান হচ্ছে আপনার ব্লগের সাইডবারের Widget এ একটা Scrolling এফেক্ট যোগ করে দিতে হবে । বুঝলেন না ? বুঝিয়ে দিচ্ছি, ধরুন আপনার ব্লগের সাইডবারের পপুলার পোষ্টটিতে আপনি ৭ টি পোষ্ট শো করিয়ে রেখেছেন এবং সেটা একায় আপনার সাইডবারের প্রায় ৬০০+ px (হাইট) জায়গা খেয়ে রেখেছে । একদিকে আপনি এই উইডগেটটিকে কম জায়গা খাওয়াতে চান, অন্যদিকে পপুলার পোস্টের নাম্বারও কমাতে চান না । যদি এমনটি হয়ে থাকে তাহলে কথাদিলাম আজকের পোস্টটি আপনার জন্যে খুবই উপকারী এবং মাস্ট হেভিং একটি পোষ্ট ।

কিভাবে যুক্ত করবেনঃ
১। আপানার ব্লগার অ্যাকাউন্ট এ লগিন করুন ।

২। ড্রোপডাউন মেনু থেকে Template সিলেক্ট করুন । (অবশ্যই template এ পরিবর্তন আনার আগে Backup করে নিন)

৩। এবার "Edit HTML" এ ক্লিক করুন ।

৪। c+f চেপে "]]></b:skin>" কোডটি সার্চ করুন ।

৫। এবার নিচের কোডটি সার্চ করা কোডটির (]]></b:skin>) উপরে বা আগে বসিয়ে দিন ।

/* Scroll box by itfun24.com START */
#YourWidgetId .widget-content {
height: 300px;
overflow: auto;
}
/* Scroll box by itfun24.com END */

৬। লাল রঙের মার্ক করা "Your WidgetId" লেখাটি আপনার উইডগেট আইডি (যেটিতে আপনি Scrolling Effect যোগ করতে চান) দিয়ে রিপ্লেস করে দিন ।
 

উদাহরনঃ

/* Scroll box by itfun24.com START */
#PopularPosts1.widget-content {
height: 300px;
overflow: auto;
}
/* Scroll box by itfun24.com END */

আশাকরি পোস্টটি আপনার উপকারে আসবে । যেকোন ধরনের সাহায্যের জন্য কমেন্ট করুন । আর পোস্টটি ফেসবুক এ শেয়ার করতে ভুলবেন না যেন ।