কিভাবে ব্লগারে Custom Variable Dfinitions যুক্ত করতে হয়?

কিভাবে ব্লগে CSS Variable Definitions যুক্ত করার মাধ্যমে ব্লগের বিভিন্ন অংশের Color এবং Font পরিবর্তন করতে হয়

Blogger CSS Variable Definitions
আজকের পোষ্টে দেখাবো কিভাবে ব্লগে CSS Variable Definitions যুক্ত করার মাধ্যমে ব্লগের বিভিন্ন অংশের Color এবং Font পরিবর্তন করতে হয়। এই ধরনের CSS Variable Definitions যুক্ত করার মাধ্যমে ব্লগার Template এ কোন প্রকার কোডিং না করে সরাসরি আপনার ব্লগটির Style পরিবর্তন করতে পারবেন।

বেশীর ভাগ ডিফল্ট এবং কাষ্টম Template এ বিভিন্ন ধরনের CSS Variable Definitions যুক্ত করা থাকে। এই CSS Variable Definitions গুলি ব্লগার টেমপ্লেটের Template > Customize > Advanced গেলে দেখতে পাবেন।
Add-Blogger-New-Variable
আপনার ব্লগের টেমপ্লেটে যদি ইতিপূর্বে CSS Variable Definitions যুক্ত করা থাকে তাহলে আপনার ব্লগের Html Editor এ কোন প্রকার টাচ না করেই উপরের চিত্রের মত যে অপশনগুলি দেখতে পাচ্ছেন সেখান থেকে ব্লগের বিভিন্ন Style পরিবর্তন করতে পারবেন।

ব্লগে কিছু সিমীত সংখ্যক CSS Variable Definitions যুক্ত করা থাকে। এ গুলি দিয়ে ব্লগের সকল সেকশনে স্টাইল করতে পারবেন না। এই জন্য আমি আপনাকে দেখাবো কিভাবে আপনার ব্লগে পছন্দমত CSS Variable Definitions যুক্ত করবেন। আমি আজ Color এবং Font দুটি Variable Definitions যুক্ত করার পদ্ধতী দেখাবো।

০১। Color Variable: প্রথমে আমি আপনারদের দেখাবো Color Variable এর এক একটি অংশ দ্বারা কি বুঝানো হচ্ছে।
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#66bbdd"/>
  • লাল অংশঃ এটা হচ্ছে variable name. এটি আপনার ব্লগার টেমপ্লেটে কালার কোডের জায়গায় দেখতে পাবেন। এখানে আপনি যে কোন নাম দিতে পারবেন। কোন Space ব্যবহার করতে পারবেন না। তবে ইচ্ছে করলে (.) ডট ব্যবহার করতে পারবেন।
  • নীল অংশঃ এটি হচ্ছে variable এর description অর্থাৎ এই নামে Settings অপশনে Variable Definitions টি দেখতে পাবেন। এখানে Space ব্যবহার করতে পারবেন।
  • পিংক অংশঃ এটি হচ্ছে Variable Type. এখানে Variable Definitions এর ধরণ অনুযায়ী হয়ে থাকে।
  • সবুজ অংশঃ এটি হচ্ছে ডিফল্ট কালার।
  • খয়েরী অংশঃ এটি হচ্ছে পরিবর্তনকৃত কালার।
০২। Font Variable: এখানে দেখাবো Font Variable এর এক একটি অংশ দ্বারা কি বুঝানো হচ্ছে।
<Variable name="body.font" description="Header Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" />
  • লাল এবং নীল অংশঃ এই দুটি অংশ Color Variable এর মত।
  • পিংক অংশঃ এখানে আগেই বলেছি এটি Type অনুসারে হয়ে থাকে। এটি Font Variable হওয়াতে এখানে Font হবে।
  • সবুজ অংশঃ এখানে আপনি ডিফল্টভাবে যে ফন্ট ব্যবহার করতে চান সেটি দেবেন।
  • খয়েরী অংশঃ এখানে ফন্ট পরিবর্তনকৃত ফন্ট দেখতে পাবেন।

নতুন Variables Color তৈরীঃ

  • প্রথমে ব্লগার টেমপ্লেটের এই /* Variable definitions অংশটি সার্চ করুন।
  • তারপর নিচের কোডগুলি কপি করে /* Variable definitions নিচে পেষ্ট করুন।
<Variable name="readmore.bg.color" description="Read More" type="color" default="#66bbdd" value="#FFFFFF"/>
  • নিচের চিত্রে দেখুন -

Variables Color ব্যবহারঃ

  • এখন আপনি যদি টেমপ্লেটের কোন কালার পরিবর্তন করতে চান, তাহলে আপনাকে readmore.bg.color অংশটি ব্যবহার করতে হবে।
  • উদাহরন স্বরূপঃ আপনি যদি ব্লগার টেমপ্লেট এর Read More অংশটি কালার পরিবর্তন করতে চান তাহলে ]]></b:skin> উপরে নিচের লাইনটি লিখতে হবে -
#read-more {background-color: $(readmore.bg.color);}
  • এখন আপনি নিচের ছবি হতে ইচ্ছামত কালার পরিবর্তন করতে পারবেন। যখন অন্য কোন নতুন ট্যাগে ব্যবহার করতে চাইবেন তখনই read-more এর স্থলে কাঙ্খিত ট্যাগটি লিখবেন।
Add-Blogger-New-Variable+color

নতুন Variables Font তৈরীঃ

  • নিচের কোডগুলি টেমপ্লেটের আগের জায়গায় পেষ্ট করুন।
<Variable name="read.more.font" description="Read More Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial" />
  • এখন এটি ব্যবহার করার জন্য ঠিক আগের মত আপনার কাঙ্কিত ট্যাগের সাথে read.more.font অংশটি ব্যবহার করতে হবে। উদাহরন দেখুন -
#read-more {font: $(read.more.font);}
  • এখন আপনি নিচের ছবি হতে ইচ্ছামত ফন্ট পরিবর্তন করতে পারবেন। এখানেও যখন অন্য কোন নতুন ট্যাগে ব্যবহার করতে চাইবেন তখনই read-more এর স্থলে কাঙ্খিত ট্যাগটি লিখবেন।
Add-Blogger-New-Variable+Font
শেষ কথাঃ পোষ্টটি আমি সাবার কাছে বোধগম্য করে উপস্থাপনের জন্য সর্বাত্মক চেষ্টা করেছি। আশাকরি সবাই সহজে বুঝতে পারবেন। তারপরও যদি কারও বুঝতে কোন সমস্যা হয় তাহলে আমাদের-কে কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের জন্য চেষ্টা করবো।

COMMENTS

BLOGGER: 4
  1. ভাই এগুলো কথায় যুক্ত করবো

    ReplyDelete
    Replies
    1. পোস্টটি মনোযোগ দিয়ে পড়লে বুঝতে পারবেন।

      Delete
  2. ব্লগারে কাষ্টম বাংলা ফন্ট কিভাবে যুক্ত করা যায় সেটা নিয়ে একটা পোস্ট চাই।
    শুধু কাষ্টম বাংলা পোস্ট।
    অপেক্ষায় রইলাম। ♥

    ReplyDelete
    Replies
    1. খুব শীঘ্রই এ সংক্রান্তে একটি বিস্তারিত পোস্ট পেয়ে যাবেন।

      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
ব্লগার বাংলাদেশ: কিভাবে ব্লগারে Custom Variable Dfinitions যুক্ত করতে হয়?
কিভাবে ব্লগারে Custom Variable Dfinitions যুক্ত করতে হয়?
কিভাবে ব্লগে CSS Variable Definitions যুক্ত করার মাধ্যমে ব্লগের বিভিন্ন অংশের Color এবং Font পরিবর্তন করতে হয়
https://4.bp.blogspot.com/-L_6_kRyCJCw/VZJbB6Rmg-I/AAAAAAAAExA/eFr-90pfw5o/s320/Blogger%2BCSS%2BVariable%2BDefinitions.PNG
https://4.bp.blogspot.com/-L_6_kRyCJCw/VZJbB6Rmg-I/AAAAAAAAExA/eFr-90pfw5o/s72-c/Blogger%2BCSS%2BVariable%2BDefinitions.PNG
ব্লগার বাংলাদেশ
https://www.bloggerbangladesh.com/2015/06/add-blogger-custom-variable-dfinitions.html
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/2015/06/add-blogger-custom-variable-dfinitions.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