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

ব্লগার টেমপ্লেটের Label Widget টিকে সুন্দরভাবে সাজানোর জন্য Css Label Style Sheet যুক্ত করুন।

ব্লগার ব্লগে 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 করতে কারো কোন সমস্যা হবে বলে আমার মনে হয় না। তারপরও যদি কারো কোন অংশ বুঝতে সমস্যা হয়, তাহলে আমাদেরকে কমেন্ট করে জানাতে পারেন।

COMMENTS

BLOGGER: 30
  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. customrominc.blogspot.com

    ReplyDelete
    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
  13. আসসালামু আলাইকুম। ভাইয়া, আপনার কোড অনুযায়ী আমার ব্লগে কাজটি করেছি তা হয়েছে। কিন্তু ব্লগের বাম পাশের লেবেল যথাযথভাবে প্রদর্শিত হচ্ছেনা। এটা কিভাবে সাইজ ছোট বড় করব। আমার ব্লগটি ভিজিট করলে বুঝতে সুবিধা হবে: https://shop.postpeon.com/

    ReplyDelete
    Replies
    1. আপনার ব্লগের সাইডবার ছোট বিধায় সমস্যা করছে। সাইডবার মিনিমাম 300 PX হলে কোন সমস্যা করত না। ধন্যবাদ... সাথে থাকুন।

      Delete

Name

Adsense,16,Affiliate,1,Android Tricks,1,Blog Design,35,Blogger Theme,9,Blogger Widgets,25,Create Blog,3,Earnings,19,Mim,5,Pro News,8,Responsive,5,SEO,55,Social Media,2,Tech,1,WordPress,3,YouTube,3,
ltr
item
ব্লগার বাংলাদেশ: ব্লগে আকর্ষণীয় List Label এবং Cloud Label Widget যুক্ত করুন!
ব্লগে আকর্ষণীয় List Label এবং Cloud Label Widget যুক্ত করুন!
ব্লগার টেমপ্লেটের Label Widget টিকে সুন্দরভাবে সাজানোর জন্য Css Label Style Sheet যুক্ত করুন।
https://3.bp.blogspot.com/-YEy-gxal37Y/V7R436jhV0I/AAAAAAAAHwA/M44BCv1QcqY1n6Jfe-2S1kzju1ZWzlt-QCLcB/s400/list-label-widget.png
https://3.bp.blogspot.com/-YEy-gxal37Y/V7R436jhV0I/AAAAAAAAHwA/M44BCv1QcqY1n6Jfe-2S1kzju1ZWzlt-QCLcB/s72-c/list-label-widget.png
ব্লগার বাংলাদেশ
https://www.bloggerbangladesh.com/2016/08/add-blogger-cloud-and-list-label-widget.html
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/2016/08/add-blogger-cloud-and-list-label-widget.html
true
1297988252866731047
UTF-8
Loaded All Posts Not found any posts VIEW ALL বিস্তারিত পড়ুন Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy