লেখক: ব্লগার ব্লগে Label নামে অত্যান্ত কাজের একটি Widget রয়েছে। এটি ব্যবহার করে একটি ব্লগের সকল Label গুলি পাঠকের সামনে উপস্থাপন করা যায়। এতে করে পাঠকরা সহজে তার পছ্ন্দমত Label এর পোষ্টগুলি পড়ে নিতে পারেন। ডিফল্টভাবে এই উইজেটটি দেখতে তেমন আকর্ষণীয় মনে হয় না বিধায় অনেকেই এটি ব্যবহার করতে চান না। তবে যে কেউ চাইলে এটিকে তার পছন্দ অনুসারে ডিজাইন করতে পারেন। সবার পছন্দের বিষয়টি বিবেচনা করে আমরা এই উইজেটিকে দুটি ডিজাইন করে শেয়ার করছি।
পোষ্টটিতে আমরা দুটি ডিজাইন শেয়ার করব। ডিজাইন দুটিকে আমরা আলাদাভাবে ভাগ করে দুটি অংশে দেখাব। প্রথমে List Label এবং পরবর্তীতে Cloud Label যুক্ত করার পদ্ধতী দেখাব। নিচের বাটনটিতে ক্লিক করে List Label উইজেটটির Live Demo দেখতে পারবেন- Live Demo
কিভাবে List Label যুক্ত করবেন?
- প্রথমে ব্লগে লগইন করুন।
- তারপর ব্লগার ড্যাশবোর্ড হতে Layout অপশনে ক্লিক করুন।
- এখন ব্লগের Layout এর সাইডবার হতে Add Gadget অপশনে ক্লিক করুন।
- এরপর Label Widget টিতে ক্লিক করলে নিচের চিত্রের ন্যায় অপশন দেখতে পাবেন।
- উপরের চিত্রের সবগুলি অপশন আপনার মনের মত সাজাতে পারবেন। শুধুমাত্র Display এর List অপশনটি পরিবর্তন করতে পারবেন না। এটি পরিবর্তন করলে স্টাইল কোডগুলি কাজ করবে না।
- তারপর হলুদ কালারের Save বাটনে ক্লিক করুন।
- এখন ব্লগার ড্যাশবোর্ড হতে Template > Edit Html বাটনে ক্লিক করুন।
- কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
- এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
/* Sidebar List Label
-------------------------------------------------------- */
.Label h2{background:#009688;border-bottom:3px solid #9BD2F4;margin:0 0 10px;padding:8px 10px 8px;color:#fff;font-size:16px;line-height:16px;font-family:"Oswald",sans-serif;font-weight:bold;text-decoration:none;text-transform:none}
.Label h2:before{content:"\f02c";color:#fff;font-size:16px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:10px;margin-left:2px}
.label-size a,.label-size span{display:inline-block;color:#666;padding:10px 12px;font-weight:400}
.label-size{line-height:1.2}
.Label ul{margin-left:10px}
.Label ul li{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOddZezRdYJqlgPk_npfOY5O2dmSuk9fIFq3UaOuCcM9XOeJSgWVhGV8Rsmmsb47XeKNUaVwSeQhCEfqK7XaXSSpWCnhCAYdpGlCNYdXgekxu03Zz8LVCY-QHHxTBD6wzMnZ_B4U7d2zz/s1600/bullet.gif") no-repeat scroll 0 2px rgb(255,255,255);list-style-type:none;padding-left:20px;margin:0 0 5px}
.Label li{background:#fff;color:#1359ae;float:left;padding:5px;margin-left:3px;text-align:left;width:40%;transition:.3s linear;font-size:13px}
.Label li a{color:#1359ae;transition:.3s linear}
.Label li a:hover{color:#FF0900;text-decoration:underline}
.label-size{background:#fff;color:#666;border:none;display:block;float:left;margin:0 3px 3px 0;font-size:11px;transition:all 0.8s linear}
.label-size a{display:inline-block;color:#666;padding:10px 12px;font-weight:400;transition:all 0.8s linear}
.label-size a:hover{background:#eac965;color:#fff;transition:all 0.1s linear}
- সবশেষে Template Save করে বেরিয়ে আসুন। তাহলে আপনার ব্লগের Label গুলির ডিজাইন পরিবর্তন হয়ে যাবে।
কিভাবে Cloud Label যুক্ত করবেন?
- পূর্বের মত ব্লগার ড্যাশবোর্ড হতে Layout অপশনে ক্লিক করুন।
- এখন ব্লগের Layout এর সাইডবার হতে Add Gadget অপশনে ক্লিক করুন।
- এরপর Label Widget টিতে ক্লিক করলে নিচের চিত্রের ন্যায় অপশন দেখতে পাবেন।
- এখানেও উপরের চিত্রের সবগুলি অপশন আপনার মনের মত সাজাতে পারবেন। শুধুমাত্র Display এর Cloud অপশনটি পরিবর্তন করতে পারবেন না। এটি পরিবর্তন করলে স্টাইল কোডগুলি কাজ করবে না।
- এখন ব্লগার ড্যাশবোর্ড হতে Template > Edit Html বাটনে ক্লিক করুন।
- কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
- এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
/* Sidebar Cloud Label
-------------------------------------------------------- */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10}
.cloud-label-widget-content{text-align:left;padding:7px 10px}
.label-size{background:#47B7B6;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase}
.label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold;text-transform:none;font-size:13px}
.label-size:hover{background:#005F5E}
.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#1E807F;color:#fff!important}
.label-size{line-height:1.2;border-radius:1px}
- সবশেষে Template Save করে বেরিয়ে আসুন। তাহলে আপনার ব্লগের Label গুলির ডিজাইন পরিবর্তন হয়ে যাবে।
