আপনার নিজস্ব ট্যাগ ক্লাউড তৈরি ও কোড করুন!

আজকের টিউটোরিয়ালটি হচ্ছে কিভাবে নিজস্ব ট্যাগ ক্লাউড ডিজাইন ও কোড করতে হয় সে সম্পর্কে। এজন্য আমরা ফটোশপ, সিএসএস এবং কিছু ছোট্ট ছোট্ট ইমেজ ব্যবহার করবো! আমরা এখানে বেশ পুরনো স্লাইডিং ডোর টেকনিক ব্যবহার করবো, কিন্তু শেষের দিকে বেশ কিছু উন্নত সিএসএস সিলেক্টর মেথড ব্যবহার করবো, যাতে আপনি পরবর্তীতে এটা আপনার ওয়ার্ডপ্রেসে ব্যবহার করতে পারেন। প্রস্তুত, চলুন শুরু করি!

লিখিত টিউটোরিয়াল

একটি পেইজের ডান পাশের ডিজাইনটি সুন্দর হলে পেইজটিকে আরো একটু মার্জিত ও মানসম্পন্ন করে তোলে। আজকে আমরা দেখবো কীভাবে স্বতন্ত্র ট্যাগ ক্লাউড তৈরি করতে হয়, যা আপনি আজকাল সচরাচর অনেক ব্লগিং সিস্টেমেই দেখতে পাবেন।

আমরা দ্রুত নকশার মাধ্যমে এটা ঠিক করবো (এটা খুব সহজ), তারপর সিএসএস দিয়ে এটা বাস্তবায়ন করতে কাজ করবো। চাইলে আপনি  এটা আপনার নিজস্ব প্রজেক্টে ব্যবহার করতে পারেন, নিজের ব্যক্তিগত ব্লগে সেটআপ করতে পারেন, এটা সম্পূর্ণই আপনার উপর...তাহলে চলুন শুরু করি!

ধাপ ০১: ট্যাগসমূহ ডিজাইন করা

শুধুমাত্র সিএসএস এর ব্যবহার এই মুহূর্তে পাঠকদের কাছে অবোধ্য মনে হতে পারে, একারনে আমরা প্রথমে ফটোশপ খুলবো। কেন? কারণ, আমরা একটি সম্পূর্ণ কাস্টম ট্যাগ ডিজাইন তৈরি করতে চাচ্ছি। আজকে আমরা যেই ব্যতিক্রম ট্যাগটি তৈরি করছি তা কি সিএসএসের মাধ্যমে অর্জন করা সম্ভব? হয়তোবা- এখানে এমন কিছু সিএসএস বিশেষজ্ঞ আছে, যারা ভাবছেন এটাতো খুব সাধারণ আকৃতি...কিন্তু কি হবে যদি আপনি কোনও টেক্সচার যোগ করতে চান? বা একটি সম্পূর্ণ ভিন্ন আকৃতি (মাথার দিকে কিছুটা চোখা প্রান্ত তৈরি করতে চান)?

ব্রাউজারের বিষয়টি মাথায় রাখার পাশাপাশি, শুধুমাত্র সিএসএস ব্যবহার করে এই কাজটি করা সম্ভব নয়। সর্বোপরি, এটা বুঝতে হবে যে ইমেজ এবং সিএসএস নিয়ে কীভাবে একসঙ্গে কাজ করতে হয়, যা আমরা এই মুহূর্তে করতে যাচ্ছি।

তাহলে এবার শুরু করুন এবং ফটোশপ খুলুন। একটি নতুন ডকুমেন্ট তৈরি করুন, যার মাপ হবে 71px by 29px।

এখানে দৈর্ঘ্য কতটুকু তা ধর্তব্য নয়...কিন্তু উচ্চতা কতটুকু তা আপনি হয়তোবা মনে রাখতে চাইবেন।

এবার, চলুন আমাদের ডকুমেন্টে একটি গোলাকার আয়তক্ষেত্র আঁকি। যার রেডিয়াস হবে ২ পিক্সেল। এবার ড্রপ শ্যাডোর জন্য কিছু জায়গা রাখুন...আমাদের ক্ষেত্রে আমি নিচের এবং পাশের জন্য ২ পিক্সেল জায়গা ছেড়ে দিলাম।

এখন আমাদের কাস্টম আকৃতি তৈরি করার সময়। আমরা ফটোশপের Add Point এবং Convert Point টুল দুটি ব্যবহার করব। এখন আমাদের তেমন কিছু করার নেই, শুধু এই পয়েন্ট টুলগুলো দিয়ে সুন্দরভাবে একটি শেপ তৈরি করবো। যতক্ষন না আমরা কাঙ্খিত শেপটি পাচ্ছি, ততক্ষণ চেষ্টা চালিয়েই যাবো। নীচে আমাদেরটা দেখানো হলোঃ

আমাদের ট্যাগের মধ্যে আমরা একটি ছোট্ট গর্ত করবো...তাহলে কি মানুষ এটার মধ্যে দড়ি লাগাতে পারবে। আসলে তা নয়, আসলে এটা একটা সৌন্দর্য যোগ করবে, যা CSS দিয়ে করা যম্ভব নয়।  Elliptical marquee টুলটি ব্যবহার করুন এবং একটি গোলাকার অংশ নির্বাচিত করুন (এটাকে নিখুঁত রাখতে আঁকার সময় Shift কী চেপে ধরে রাখুন)।

সিলেকশনটি তৈরি করার পর, (Select > Inverse) নির্বাচন করুন। এবার লেয়ার ইন্সপেক্টরের নিচ থেকে Add Layer Mask বাটনটি ব্যবহার করে ট্যাগ শেপটির উপর একটি ভেক্টর শেপ তৈরি করুন।

সংক্ষিপ্ত রাখার জন্য (এই মুহূর্তে আমরা কোডিং অংশটি পেতে চাই, তাই নয় কি?!), তাহলে চলুন এখানে ভাগে ভাগে লেয়ার স্টাইলটি দেখানো যাক। আপনি আপনার নিজের মত করে সমন্বয় করে নিতে পারেন, কিন্তু এখানে আমাদেরটা কেমন দেখাবে তা দেয়া হলো:

শেষ ফলাফলটি দেখতে এমন হবে:

আপনি এই PSD ফাইলের ভিতরের দিকটি লক্ষ্য করুন (এই টিউটোরিয়ালের জন্য যেই ফোল্ডারটি ডাউনলোড করতে হবে) যে আমরা আমাদের নির্দিষ্ট টেক্সটও যুক্ত করেছি। আপনি এই কাজটি যেকোনো ডিজাইন মোকআপে প্রয়োজন অনুসারে করে নিতে পারেন।

দ্রষ্টব্য: আপনি সহজেই আপনার নিজস্ব ট্যাগের অবস্থান পরিবর্তন করতে পারেন। আমরা আসলে আপনাকে দেখাব কিভাবে কোডিং পর্যায়ে বাম-মুখী এবং ডান-মুখী ট্যাগ তৈরি করতে হয়।

ধাপ ০২: স্লাইসিং এবং মার্কআপ

উঁহু! তাহলে কি আমরা ডিজাইনকৃত ট্যাগটি পেলাম...কিন্তু আমরা কীভাবে এটাকে একটি সত্যিকারের ওয়েব পেইজে ব্যবহার করবো? এখন, আমরা আমাদের ট্যাগটিকে তিনভাগে বিভক্ত করতে পারিঃ

1. বাম দিক
2. মধ্যভাগের গ্র্যাডিয়েন্ট
3. ডান দিক

স্বচ্ছতা সংরক্ষণ করার পাশাপাশি PNG গ্রাফিক্স হিসাবে এই সবগুলোকে সেভ করুন এবং "images" নামের ফোল্ডারে এগুলোকে জমা করে রাখুন।

এখন আমরা আমাদের মৌলিক মার্কআপ তৈরি করবো। আমরা DIV লেয়ার ব্যবহার করে একটি সহজ, যৌক্তিক পদ্ধতিতে এটি শুরু করতে যাচ্ছি, কিন্তু যেহেতু এটার সবকিছুই কোড-সম্পর্কিত, তাই আমরা পরবর্তী ধাপে আরও পরিষ্কার ভাবে বুঝাতে সক্ষম হবো এবং (কোডের প্রয়োজনীয় পরিমাণ কমাতে) সক্ষম হবো।

এখানে প্রত্যেকটি ট্যাগের জন্য আমাদের বেসিক মার্ক-আপ দেখানো হলোঃ

1

2

  <div class="tag tag-left">

3

		<div class="left"></div>

4

		<div class="center"><a href="#">Design</a></div>

5

		<div class="right"></div>

6

	</div>

এখন এটা দ্রুত পর্যালোচনা করা যাক: আমাদের এখন মূলতঃ একটি ট্যাগ রেপার (wrapper) আছে, তিনটি নেস্টেড DIV সহ:

• বাম দিকের DIV (আমাদের বাম-দিকের গ্রাফিকের জন্য)
• মূল কেন্দ্রের DIV (আমাদের ট্যাগ টেক্সট এবং ব্যাকগ্রাউন্ড গ্রেডিয়েন্টের জন্য)
• ডান দিকের DIV (আমাদের ডান-দিকের গ্রাফিকের জন্য)

এগিয়ে যান এবং কোডের এই ব্লকটি কয়েকবার পুনরাবৃত্তি করতে পারেন, যাতে একাধিক ট্যাগগুলি একটি অপরটির পাশে সুন্দরভাবে সাজানো থাকে।

এখন, আমরা সিএসএস যোগ করবো।

ধাপ ০৩: বেসিক CSS

আমরা আমাদের প্রতিটি div এ কিছু মৌলিক নিয়ম প্রয়োগ করে সিএসএস শুরু করব। আমি আপনাকে প্রতিটির জন্য পৃথক কোড প্রদর্শন করব, তারপর এটা আসলে কি কাজ করছে তা ব্যাখ্যা করবো:

1

2

.tag { 

3

	font-size: 11pt;

4

	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);	

5

	float: left;  /* Makes each tag stay together in one piece */

6

	margin: 5px;

7

}

8

9

.tag .center{

10

    background: url("images/gradient.png") repeat-x scroll left top transparent;

11

    float: left;

12

    height: 29px;  /* Same as your image height */

13

    width: auto;

14

    padding: 0px 6px;  /* Give the text a little room to breathe */

15

}

16

17

.tag .center a{

18

	vertical-align: middle; /* Important for fitting the text in perfectly */

19

	line-height: 21pt; /* Important for fitting the text in perfectly */

20

	color: #0f2d39;

21

	text-decoration: none;

22

}

এই কোড ব্লক দিয়ে বিশেষ এইচটিএমএল উপাদানটির ডিজাইন ঠিক করা হয়েছে, যা আমাদের ট্যাগকে বেষ্টিত করে আছে; খেয়াল করুন এখানে আমরা বেশ কিছু নিয়ম প্রয়োগ করেছি, যাতে ট্যাগগুলো তাঁদের নির্দিষ্ট জায়গায় ভাসমান অবস্থায় থাকে এবং প্রত্যেক ট্যাগের মাঝখানে যাতে সমান দূরত্ব বজায় থাকে। এজন্য আমরা  float এবং margin প্রোপার্টি দুটি ব্যবহার করেছি।

উপরের CSS এর দ্বিতীয় নিয়ম দুটি ট্যাগের কেন্দ্রের অংশটি ঠিক করেছে - ব্যাকগ্রাউণ্ড গ্র্যাডিয়েন্ট তৈরি করেছে এবং কিছুটা দূরত্ব ঠিক করেছে।

এই মুহুর্তে, আপনার ট্যাগগুলো দেখতে এইরকম দেখাবেঃ

এখন বাম দিকের এবং ডান দিকের উপাদানগুলির জন্য কিছু স্টাইল যুক্ত করুন।

1

2

.tag-left .left{

3

    background: url("images/tagleft_left.png") no-repeat scroll left top transparent;

4

    display: block;

5

    float: left;

6

    height: 29px;  /* Same as your image height */

7

    width: 15px;  /* Same as your image width */

8

}

9

10

.tag-left .right{

11

    background: url("images/tagleft_right.png") no-repeat scroll right top transparent;

12

    display: block;

13

    float: left;

14

    height: 29px;  /* Same as your image height */

15

    width: 4px;  /* Same as your image width */

16

}

উপরের কোড ব্লকটি তিনটি প্রধান বিষয় সম্পাদন করেছে:

1. ব্যাকগ্রাউন্ড ইমেজটি নির্ধারণ করেছে।
2. ট্যাগের বাম এবং ডান দিকের উচ্চতা / প্রস্থ নির্ধারণ করেছে। এটি আপনার ইমেজের উচ্চতার সাথে সামঞ্জস্যপূর্ণ হতে হবে। ;)
3. উপাদানগুলি যাতে ভেসে থাকে, সেজন্য float ব্যবহার করতে পারেন যাতে এগুলো সুন্দরভাবে সারিবদ্ধ অবস্থায় থাকে।

এখন ট্যাগগুলো প্রায় সম্পন্ন হওয়ার কাছাকাছি:

কিন্তু যদি আমরা অন্য ধরনের ট্যাগ অন্তর্ভুক্ত করতে চাই, তাহলে কিভাবে করবো...যেমন যদি আমরা ট্যাগের মুখটি বিপরীতভাবে দেখাতে চাই তবে? এবং এক্ষেত্রেই "tag-left" এবং "tag-right" সিলেক্টর দুটি কাজে লাগবে। শীর্ষ স্তরে এগুলো যোগ করার মাধ্যমে, আমরা আসলে একটি সম্পূর্ণ ভিন্নরকম ট্যাগের জন্য আমাদের CSS এ আরও কিছু নিয়ম যোগ করতে পারি:

1

2

.tag-right .left{

3

    background: url("images/tagright_left.png") no-repeat scroll left top transparent;

4

    display: block;

5

    float: left;

6

    height: 29px;  /* Same as your image height */

7

    width: 4px;  /* Same as your image width */

8

}

9

10

.tag-right .right{

11

    background: url("images/tagright_right.png") no-repeat scroll right top transparent;

12

    display: block;

13

    float: left;

14

    height: 29px;  /* Same as your image height */

15

    width: 16px;  /* Same as your image width */

16

}

যা আপনাকে সঠিক "ডানমুখী ট্যাগ" স্টাইল প্রদর্শন করবে:

ট্যাগ ক্লাউডের উপরের ডানদিকে ডানমুখী ট্যাগটি লক্ষ্য করুন।

সম্পন্ন! আচ্ছা, ঠিক আছে ... সৎ ভাবে বলতে গেলে, এই পদ্ধতিটি হচ্ছে এই ইফেক্টটি তৈরি করার সবচেয়ে কঠিন উপায়। পরের ধাপে, আমরা আপনাকে আরো উন্নততর সিএসএস সিলেক্টর নিয়ে আরও সুন্দরভাবে ট্যাগ তৈরির প্রক্রিয়াটি দেখাবো।

Google ফন্ট নোট: আপনি হয়ত লক্ষ্য করেছেন যে আমি এখানে একটি কাস্টম ফন্ট ব্যবহার করছি (Droid Sans)।  এখন আপনি সহজেই আপনার নিজস্ব কাস্টম ফন্ট যুক্ত করতে পারবেন। এজন্য Google Fonts সাইটে যান, আপনি যে ফন্টটি পছন্দ করেন তা সন্ধান করুন এবং ফন্টের জন্য এম্বেড কোড এবং CSS নিয়ম যুক্ত করুন।

গুগল ফন্ট বা এই ধরনের ফন্টগুলো ব্যবহারের মূল সুবিধা হচ্ছে, আপনি টেক্সটে অনেকগুলো CSS ফন্ট স্টাইলিং প্রয়োগ করতে সক্ষম হবেন...মানে হচ্ছে আমরা text-shadow এর মত এট্রিবিউটগুলো ব্যবহার করে আলোর প্রতিসরণের ইফেক্ট তৈরি করতে ্পারবো।

ধাপ ০৪: উন্নত CSS

যে কেউ যত দীর্ঘ বা অল্প সময় ধরে কোডিং করুক না কেন, প্রত্যেকেই বলে থাকে যে, এক টুকরো কোডকে আরো উন্নত করে তোলার জন্য কোন না কোন উপায় সর্বদাই থাকে। এবং শেষের ধাপে আমরা এই কাজটিই করতে যাচ্ছি।

তার আগে চলুন পর্যালোচনা করে দেখি, আগের কোডিংয়ে কি কি বিষয় অপ্রিয় বা অসুবিধাজনক।

• অনেক বেশি মার্কআপ! এই ইফেক্টটি অর্জন করার জন্য আমাদের চারটি  ভিন্ন DIV উপাদান ব্যবহার করার প্রয়োজন নেই।
• অনেক বেশি CSS! এটি কাজ করে, নিশ্চিত, কিন্তু CSS লেখার আরও আকর্ষণীয় উপায় আছে, যাতে আসলে এত অতিরিক্ত মার্কআপের প্রয়োজন হয় না।
• এটা মানানসই নয়! প্রচুর মার্কআপ এবং অত্যাধিক পরিমানে CSS ব্যবহার করার মানে হচ্ছে, এটা কনটেন্ট ম্যানেজমেন্ট সিস্টেম (CMS) যেমন, ওয়ার্ডপ্রেসে (সহজে) কাজ করার উপযোগী হবে না।

এই কোডটি আরও হালকা করতে  CSS :before এবং :after সিলেক্টর দুটি ব্যবহারের আরও কিছু উপায় আছে।

চলুন আমরা আগের CSS টি সম্পূর্ণ দেখি, এবং সিলেক্টরের মাধ্যমে পুনরায় কোডটি লিখি:

মূল সিএসএস

1

2

/* Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++++++++++ */

3

4

.tag { 

5

	font-size: 11pt;

6

	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);	

7

	float: left;  /* Makes each tag stay together in one piece */

8

	margin: 5px;

9

}

10

11

.tag .center{

12

    background: url("images/gradient.png") repeat-x scroll left top transparent;

13

    float: left;

14

    height: 29px;  /* Same as your image height */

15

    width: auto;

16

    padding: 0px 6px;  /* Give the text a little room to breathe */

17

}

18

19

.tag .center a{

20

	vertical-align: middle; /* Important for fitting the text in perfectly */

21

	line-height: 21pt; /* Important for fitting the text in perfectly */

22

	color: #0f2d39;

23

	text-decoration: none;

24

}

25

26

/* Left-tag Rules ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

27

28

.tag-left .left{

29

    background: url("images/tagleft_left.png") no-repeat scroll left top transparent;

30

    display: block;

31

    float: left;

32

    height: 29px;  /* Same as your image height */

33

    width: 15px;  /* Same as your image width */

34

}

35

36

.tag-left .right{

37

    background: url("images/tagleft_right.png") no-repeat scroll right top transparent;

38

    display: block;

39

    float: left;

40

    height: 29px;  /* Same as your image height */

41

    width: 4px;  /* Same as your image width */

42

}

43

44

/* Right-tag Rules +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

45

46

.tag-right .left{

47

    background: url("images/tagright_left.png") no-repeat scroll left top transparent;

48

    display: block;

49

    float: left;

50

    height: 29px;  /* Same as your image height */

51

    width: 4px;  /* Same as your image width */

52

}

53

54

.tag-right .right{

55

    background: url("images/tagright_right.png") no-repeat scroll right top transparent;

56

    display: block;

57

    float: left;

58

    height: 29px;  /* Same as your image height */

59

    width: 16px;  /* Same as your image width */

60

}

নতুন সিএসএস

1

2

/* Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++++++++++ */

3

4

.tag { 	

5

	float: left; 

6

	margin: 5px;	

7

    height: 29px;  /* Same as your image height */

8

    width: auto;

9

}

10

11

12

.tag a{

13

    background: url("images/gradient.png") repeat-x scroll left top transparent;    

14

    float: left;    

15

    height: 29px;

16

    padding: 5px 6px;

17

18

    color: #0F2D39;

19

    font-size: 11pt;

20

    text-decoration: none;    

21

    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);	

22

}

23

24

25

.tag:before{

26

	content: '';

27

    background: url("images/tagleft_left.png") no-repeat scroll 0 0 transparent;

28

    display: block;

29

    float: left;

30

    height: 29px;  /* Same as your image height */

31

    width: 15px;  /* Same as your image width */

32

33

}

34

35

.tag:after{

36

	content: '';

37

    background: url("images/tagleft_right.png") no-repeat scroll 0 0 transparent;

38

    display: block;

39

    float: right;

40

    height: 29px;  /* Same as your image height */

41

    width: 4px;  /* Same as your image width */

42

}

43

44

/* Flip-tag Rules +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

45

46

.tag.flip:before{

47

	content: '';

48

    background: url("images/tagright_left.png") no-repeat scroll left top transparent;

49

    display: block;

50

    float: left;

51

    height: 29px;  /* Same as your image height */

52

    width: 4px;  /* Same as your image width */

53

}

54

55

.tag.flip:after{

56

	content: '';

57

    background: url("images/tagright_right.png") no-repeat scroll right top transparent;

58

    display: block;

59

    float: right;

60

    height: 29px;  /* Same as your image height */

61

    width: 16px;  /* Same as your image width */

62

}

নতুন কি? শুরুতে, আমরা DIV এর ভিতরের বাম এবং ডানদিকের এলিমেন্টগুলো বাদ দিয়েছি।

এখানে, পুরানো মার্কআপের সাথে নতুন মার্কআপের তুলনা করা হলো:

পুরোনো HTML মার্কআপ

1

2

	<div class="tag tag-left">

3

		<div class="left"></div>

4

		<div class="center"><a href="#">Design</a></div>

5

		<div class="right"></div>

6

	</div>

নতুন HTML মার্কআপ

1

2

	<span class="tag">

3

		<a href="#">Design</a>		

4

	</span>

:before এবং :after এই দুটি সিলেক্টর ব্যবহার করে আমরা ট্যাগের আগের এবং পরের কাটা অংশ দুটি খুব সহজেই প্রবেশ করাতে পারবো। আগের মার্কআপের তুলনায় এই মার্কআপটি বেশ পরিচ্ছন্ন এবং এটা আসলে সব ধরণের আধুনিক ব্রাউজারেই কাজ করবে! একইসাথে আমরা DIV এলিমেন্টের পরিবর্তে SPAN এলিমেণ্টসমূহ ব্যবহার করেছি (কারণ এই ধরনের কোডের জন্য SPAN-ই মানানসই)।

বোনাস ধাপ ০১: :Hover স্টেট যুক্ত করা

আমরা যদি আমাদের ট্যাগের জন্য একটি hover স্টেট যুক্ত করতে চাই, তাহলে কেমন হবে? এটা বেশ সহজেই করা সম্ভব - আগের  ক্লাস সিলেক্টর নির্বাচন করে :before ও :after এর মাঝে :hover যুক্ত করে আমাদের নতুন কয়েকটি রুলস তৈরি করতে হবে। 

যেমন:

1

2

.tag:hover:before{}

এটা আসলে সিলেকশন সমস্যার সমাধান করে - এখান থেকে আপনি আসলে কোন উপাদানের উপর মাউস নিয়ে গেলে কি ঘটবে, সে বিষয়টি ঠিক করে দিতে পারেন। আপনি চাইলে টেক্সটের রং পরিবর্তন থেকে শুরু করে অপাসিটি, এমনকি পিছনের ব্যাকগ্রাউণ্ড গ্রাফিক্সটিও পরিবর্তন করে দিতে পারেন। ডেমোর জন্য আমরা নিন্মবর্ণিত কোডটি ব্যবহার করেছি:

1

2

/* Mouse Hover Rules +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

3

4

.tag a:hover{

5

    background: url("images/gradient_hover.png") repeat-x scroll left top transparent;    

6

}

7

8

.tag:hover:before{

9

    background: url("images/tagleft_left_hover.png") no-repeat scroll 0 0 transparent;

10

11

}

12

13

.tag:hover:after{

14

    background: url("images/tagleft_right_hover.png") no-repeat scroll 0 0 transparent;

15

}

16

17

.tag.flip:hover:before{

18

    background: url("images/tagright_left_hover.png") no-repeat scroll left top transparent;

19

}

20

21

.tag.flip:hover:after{

22

    background: url("images/tagright_right_hover.png") no-repeat scroll right top transparent;

23

}

মনে রাখবেন প্রথমবারের মত ইমেজটি লোড হওয়ার সময় কিছুটা বাড়তি ইফেক্ট দেখা যেতে পারে...এই জিনিষটিও নিয়ন্ত্রণ করা সম্ভব, কিন্তু অন্য আরেকটি টিউটোরিয়ালে তা দেখাবো! ;)

বোনাস ধাপ ০২: ওয়ার্ডপ্রেসের ভিতরে ব্যবহার করুন

এই ট্রিকটি ওয়ার্ডপ্রেসের ভিতরে ব্যবহার করাও বেশ সহজ। "ওয়ার্ডপ্রেস কোডেক্স পেইজের the_tags" ফাংশনটি চেক করে দেখুন, যা আপনি সাধারণভাবে যেকোন টেম্পলেট ফাইলের ভিতর ব্যবহার করতে পারবেন...আমরা দেখবো এই  মার্কআপটি কীভাবে আমাদের ট্যাগ ক্লাউডের জন্য ব্যবহার করতে পারি।

এখানে রেণ্ডার হওয়া ট্যাগগুলো কীভাবে unordered লিস্টে পরিণত করবেন; তার একটি সম্ভাব্য উদাহরণ দেয়া হলো:

1

2

<?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>

আমাদের সিস্টেমের সাথে মিলিয়ে আমরা এটাকে পরিবর্তন করে নিতে পারি:

1

2

<?php the_tags('<span class="tag">','</span><span class="tag">','</span>'); ?>

এ পর্যন্তই! এখন আপনাকে সংশ্লিষ্ট CSS কোডগুলো আপনার style.css ফাইল (অথবা আপনি আপনার থিমের জন্য যেই .css ফাইলটি ব্যবহার করছেন তাতে অন্তর্ভুক্ত করে নিন), এবং আপনি ইতিমধ্যেই বেশ কিছু অসাধারণ ছোট ছোট কাস্টম ট্যাগ পেয়ে গেলেন, যা আপনার থিমকে অন্য মাত্রা এনে দিবে!

এই পর্যন্ত অনুসরন করে আসার জন্য ধন্যবাদ। :) এখন আমরা এই কোডটি কিভাবে আরও উন্নত করতে পারি এবং কিভাবে কিছুটা অন্যভাবে করতে পারি, সে সম্পর্কে যেকোনও কমেন্টকেই স্বাগত জানাই!