Aug 17, 2016

ব্লগে আকর্ষণীয় List Label এবং Cloud Label Widget যুক্ত করুন!

ব্লগার ব্লগে Label নামে অত্যান্ত কাজের একটি Widget রয়েছে। এটি ব্যবহার করে একটি ব্লগের সকল Label গুলি পাঠকের সামনে উপস্থাপন করা যায়। এতে করে পাঠকরা সহজে তার পছ্ন্দমত Label এর পোষ্টগুলি পড়ে নিতে পারেন। ডিফল্টভাবে এই উইজেটটি দেখতে তেমন আকর্ষণীয় মনে হয় না বিধায় অনেকেই এটি ব্যবহার করতে চান না। তবে যে কেউ চাইলে এটিকে তার পছন্দ অনুসারে ডিজাইন করতে পারেন। সবার পছন্দের বিষয়টি বিবেচনা করে আমরা এই উইজেটিকে দুটি ডিজাইন করে শেয়ার করছি।
ব্লগে আকর্ষণীয় List Label এবং Cloud Label Widget যুক্ত করুন!
পোষ্টটিতে আমরা দুটি ডিজাইন শেয়ার করব। ডিজাইন দুটিকে আমরা আলাদাভাবে ভাগ করে দুটি অংশে দেখাব। প্রথমে List Label এবং পরবর্তীতে Cloud Label যুক্ত করার পদ্ধতী দেখাব। নিচের বাটনটিতে ক্লিক করে List Label উইজেটটির Live Demo দেখতে পারবেন- Live Demo

কিভাবে List Label যুক্ত করবেন?

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Layout অপশনে ক্লিক করুন।
  • এখন ব্লগের Layout এর সাইডবার হতে Add Gadget অপশনে ক্লিক করুন।
  • এরপর Label Widget টিতে ক্লিক করলে নিচের চিত্রের ন্যায় অপশন দেখতে পাবেন।
ব্লগে আকর্ষণীয় List Label এবং Cloud 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://2.bp.blogspot.com/-qIrd9-1vI-I/V7RjQKImWuI/AAAAAAAAHvw/aJWeHcdx34wdjEyv661BJI7KqfbxaRUkQCLcB/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 যুক্ত করবেন?

ব্লগে আকর্ষণীয় List Label এবং Cloud Label Widget যুক্ত করুন!
  • পূর্বের মত ব্লগার ড্যাশবোর্ড হতে Layout অপশনে ক্লিক করুন।
  • এখন ব্লগের Layout এর সাইডবার হতে Add Gadget অপশনে ক্লিক করুন।
  • এরপর Label Widget টিতে ক্লিক করলে নিচের চিত্রের ন্যায় অপশন দেখতে পাবেন।
ব্লগে আকর্ষণীয় List Label এবং Cloud 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 গুলির ডিজাইন পরিবর্তন হয়ে যাবে। 
সাহায্য জিজ্ঞাসাঃ উপরের পদ্ধতি গুলিতে আমরা শুধুমাত্র CSS Style Sheet যুক্ত করেছি। সে জন্য এটি Apply করতে কারো কোন সমস্যা হবে বলে আমার মনে হয় না। তারপরও যদি কারো কোন অংশ বুঝতে সমস্যা হয়, তাহলে আমাদেরকে কমেন্ট করে জানাতে পারেন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

28 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. Blogger Authors System Code Plees...

    ReplyDelete
    Replies
    1. আপনি কি চাচ্ছেন, সেটি পরিষ্কারভাবে বল্লে ভাল হত।

      Delete
    2. http://banglatipsblog.blogspot.com

      Delete
  2. The list & cloud widget for blogger is just looking great. I am going to use this widget to my blogspot blog. Thank you very much :)

    ReplyDelete
  3. Darun Post. Khub valo laglo. Thanks for sharing.

    ReplyDelete
  4. brother please help me.which is better?blogger or wordpress ��

    ReplyDelete
    Replies
    1. এ সম্পর্কে আমরা ইতোপূর্বে দুটি পোষ্ট শেয়ার করেছি। আপনি এই লিংক থেকে পোষ্ট দুটি দেখে নিতে পারেন। তাহলে আপনি নিজেই সিদ্ধান্ত নিতে পারবেন।

      Delete
  5. ঠিক এ রকম একটি লেবেল উইজেট অনেক দিন যাবৎ খুজছিলাম কিন্তু কোথাও পাইনি। শেষ পর্যন্ত আপনি তৈরী করলেন। You are really great blogger

    ReplyDelete
    Replies
    1. আমাদের সাথে থাকুন। ভবিষ্যতে আরো ভাল কিছু উপহার দেয়ার চেষ্টা করব।

      Delete
  6. Many thanks to You that you share with us, has published a great article. I really, really super happy with your work.
    However,
    Thank you again for your work will wait for the next great writing.
    Computer Technology Blog.

    ReplyDelete
  7. অনেক দিন পর ভিজিট করলাম। ঢুকেই মনটা খুশিতে ভরে গেল।
    আমি এতদিন আপনাকে এটাই দিতে বলছিলাম। কিন্তু বুঝাতে পারিনি। পেয়ে অনেজ ভালো লাগলো। আপনাকে আল্লাহ তা: উত্তম জাঝা দান করুন। আমিন।
    পড়ালেখায় বেশি বেস্ত থাকার জন্য ইন্টারনেটে আর সময়য় দিতে পারিনা। ছুটিতে বাড়ি তাই একটু সুযোগ পেলাম। আর ঢু দিলাম আপনার সাইটে, কিছু জানার জন্য।
    আমার ব্লগে ইদানিং একটি সমস্যা দেখা দিচ্ছে।
    সেটা হল, ব্লগের পেইজ নাম্বার।
    ব্লগের হোম পেইজে বা যেকোন লেবেলের পেইজ নাম্বারের থেকে যদি নেক্সটে যাবার জন্য ২ নাম্বারে ক্লিক করা হয় তখন প্রথম পেইজের পোস্ট পুনরায় শো করে। শুধু শেষের একটি পোস্ট নতুন আসে। এভাবে যদি ৩ নাম্বার পেইজে ক্লিক করা হয় তখন ২ নাম্বার পেইজে যা দেখিয়েছিল সেগুলিই আবার দেখায়।
    দয়া করে এর সমাধান থাকলে জানানোর জন্য অনুরোধ।

    ReplyDelete
    Replies
    1. আমাদের প্রতি আপনার আস্তার বিষয়টি জেনে সত্যিই খুশি হলাম। আপনার ব্লগের পেজ নাম্বারগুলিতে কোন সমস্যা নেই। আমি চেক করে দিখেছি, সবকিছু ঠিক আছে। সর্বোপরি আল্লাহ্ যেন আপনাকে ভাল রাখে, সেই কামনাই করি। আমিন...

      Delete
  8. Replies
    1. আমার ব্লগটি Dofollow না ভাই। এ ভাবে লিংক শেয়ার করার কোন মানেই হয় না।

      Delete
  9. আমার ব্লগে এটি যোগ করছি। খুব সুন্দর হয়েছে।

    ReplyDelete
    Replies
    1. আমাদের সাথে থাকুন, ভবিষ্যতে আরো ভাল কিছু দেয়ার চেষ্টা করব।

      Delete
  10. hlw ভাই আমি একটা ব্লগ সাইট বানাতে চাই ২০০ টাকা দিয়ে হবে দয়া করে জানান আমি ছাএ তাই বেশি টাকা দিতে পারবো না।আরো কিছু কথা আছে দয়া করে আপনার ফেসবুক প্রোফাইল লিংকা দিবেন।আমার আইডি:fb.com/biplop420

    ReplyDelete
    Replies
    1. টাকার বিষয় নিয়ে কথা বলাটা আমি মোটেও পছন্দ করি না। আমরা যে দামে কাজ করি, তা লিখাই আছে। তবে এ বিষয়ে জানতে চাইলে আমাদের সাথে সরাসরি যোগাযোগ করতে পারেন। এখান থেকে আমাদের ফেইসবুক কমিউনিটেতে জয়েন করতে পারেন

      Delete
  11. bro i wanna remove footer credit of ur template, may i do it???

    ReplyDelete
    Replies
    1. According to our template policy you can't remove credit to your template free version. Then as your wish and you want.

      Delete
  12. Error parsing XML, line 761, column 3: The element type "b:skin" must be terminated by the matching end-tag "" এই লেখাটা আসে। কি করবো

    ReplyDelete
    Replies
    1. ]]> tag ar tik upora add koran. Tahola parsing ar problem hoba na.

      Delete

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: