স্টিমিট-এ আরো কিছু মার্কডাউন এর ব্যবহার -০২ (Using Markdown Codes to make nice looking post in Steemit-Part02)

6개월 전

গতকাল আমি স্টিমিটে ব্যবহারযোগ্য প্রায় সবক'টি মার্কডাউন কোড নিয়ে আলোচনা করেছিলাম । আজকে দেখাবো সে গুলির বাস্তব ব্যবহার ও কয়েকটি বুটস্ট্র্যাপ div class এর প্রয়োগ ।

গতকালের পোস্টটি ভালো করে না পড়লে আজকের পোস্টটি বুঝতে পারবেন না । তাই, যাঁরা যাঁরা গতকালের পোস্টটি মিস করে গেছেন তাঁদের জন্য গতকালের মার্কডাউন সম্পর্কিত পোস্টটির লিংকটি এখানে দিলাম :

https://steemit.com/hive-129948/@rme/give-your-steemit-post-a-wonderful-look-by-using-markdown-code

এবার মূল পোস্টে আসা যাক :


একটি আর্টিকেল এর শুরুতে যদি ফার্স্ট লেটারটা capitalize করে অন্য্ সব লেটার থেকে কিছুটা বড় সাইজের করা যায় তবে সুন্দর একটা লুক আসে ।

The tiger is our national animal. This creature looks beautiful but actually it's very

ferocious. In 1973, India government declared The "Royal Bengal Tiger"[1] as the national animal. Tiger is a nocturnal animal. Specialist says that Tiger is stronger than Lion


উপরের টেক্সটটি লক্ষ করুন । লাইনের শুরুতে "T" টা বড় সাইজের করা হয়েছে । subscript আর superscript ট্যাগ একসাথে ব্যবহার করে এটা করা হয়েছে । প্রথমে হ্যাশ ট্যাগ (#) দিয়ে হেডিং টা level-১ সাইজের করা হয়েছে , তারপরে "T" এর পরের বাকি অংশটুকু "very" শব্দটি পযর্ন্ত

<sub><sup></sup></sub>

ট্যাগ use করে ছোট করা হয়েছে । পরের টেক্সটটুকু non-bold হরফে শো করছে । "Royal Bengal Tiger" লেখাটির উপরে ছোট্ট করে [1] লেখা হয়েছে যেটা আসলে একটা হাইপারলিংক, উইকিপিডিয়ার একটি রেফারেন্স লিংক নির্দেশ করছে । এ সম্পর্কে পরে আসছি । উপরের ওই টেক্সটটি কি ভাবে লেখা হয়েছে সেটা তো বললাম এখন নিচে তার source code টা দেয়া হলো -

# T<sub><sup>he tiger is our national animal. This creature looks beautiful but actually it's very </sup></sub>
<sub>ferocious. In 1973, India government declared The <b><i>"Royal Bengal Tiger"</i></b><sup>[[1]] 
(https://en.wikipedia.org/wiki/Bengal_tiger)</sup> as the national animal. Tiger is a nocturnal animal. 
<b>Specialist</b> says that Tiger is <strong>stronger</strong> than Lion
</sub>

The tiger is our national animal. This creature looks beautiful but actually it's very

ferocious. In 1973, India government declared The "Royal Bengal Tiger"[1] as the national animal. Tiger is a nocturnal animal. Specialist says that Tiger is stronger than Lion

Tiger is our national animal. This creature looks beautiful but actually it's very

ferocious. In 1973, India government declared The "Royal Bengal Tiger"[1] as the national animal. Tiger is a nocturnal animal. Specialist says that Tiger is stronger than Lion.


এ বার আসি টেক্সট কলাম এলাইনমেন্ট এর ব্যাপারে । লেফট, রাইট আর মিডল এই তিন রকমের এলাইনমেন্ট ব্যবহার করে পোস্টটিকে আরো দৃষ্টি নন্দন করা যায় :

I'm in the left.
.......................
.......................
.......................
I'm in the right.
.......................
.......................
.......................

I'm in the middle
.........................
.........................
.........................

দেখুন টেক্সটকে তিনটি আলাদা আলাদা কলামে ভাগ করে লেখা হয়েছে । এটার কোডিংও খুবই সহজ । বুটস্ট্র্যাপ 4 এর দুটি div class pull-left আর pull-right ব্যবহার করে ফ্লোটিং টেক্সট এলাইনমেন্ট টু লেফট আর ফ্লোটিং টেক্সট এলাইনমেন্ট রাইট করা হয় । আর center ট্যাগ use করে মাঝের কলমটা তৈরী করা হয় ।

<div class="pull-left">
I'm in the left.<br>
.......................<br>
.......................<br>
.......................<br>
</div>
<div class="pull-right">
I'm in the right.<br>
.......................<br>
.......................<br>
.......................<br>
</div>

<center>I'm in the middle
.........................
.........................
.........................
</center>


তিনটির বদলে দুটি কলাম করতে হলে আরো সহজ । কোডটি লক্ষ করুন -

<div class="pull-left">
I'm in the left.
.......................
.......................
.......................
</div>
Normal texts start from here......................


আউটপুট :

I'm in the left. ....................... ....................... ....................... ....................... ....................... ....................... ....................... .......................
Normal Texts start from here...................... ...................... ...................... ...................... ...................... ...................... ...................... ...................... ...................... ......................


একই ভাবে pull-left class ব্যবহার করে টেক্সট এর বদলে যে কোন ছবিকে ফ্লোট টু লেফট এলাইনমেন্ট করে রাখা যায়, যেমন -

photo.jpg

This my company logo, I am using this logo everywhere. Royal Macro is the name of my company. It's an IT based company in India. We're Security Researchers and Develo-pers. Although, our team is in small in size, but, our work is vast. ............. ............. ........... .................. ............... ............ .......... ............. ............. ................. ............. ............ ........... ............. ............ ........ ................ ............. ................. .............. .............. ........... ..............


কোড:

<div class="pull-left">
         
![photo.jpg](https://cdn.steemitimages.com/DQmQYjhtTE4Tm2XVrPFUrdMf4TwfE5QRAXVYa53FUzzUzZ7/photo.jpg)

</div>
This my company logo, I am using this logo everywhere. <b>Royal Macro</b> is the name of my company. It's an IT based company in India. We're Security Researchers and Develo-pers. Although, our team is in small in size, but, our work is vast. ............. ............. ........... .................. ............... ............ .......... ............. ............. ................. ............. ............ ........... ............. ............ ........ ................ ............. ................. .............. .............. ........... ..............




একই ভাবে, pull-right class ব্যবহার করে টেক্সট এর বদলে যে কোন ছবিকে ফ্লোট টু right এলাইনমেন্ট করে রাখা যায়, যেমন -

photo.jpg

This my company logo, I am using this logo everywhere. Royal Macro is the name of my company. It's an IT based company in India. We're Security Researchers and Develo-pers. Although, our team is in small in size, but, our work is vast. ..... ....... ........ ..... ....... ........ ........ ........... .............. .................. ............. .............. ............... ...................... ........... ............... .......... .......... .......... ........... ............ ........ ............... ............. ................. ...............


কোড:

<div class="pull-right">


![photo.jpg](https://cdn.steemitimages.com/DQmQYjhtTE4Tm2XVrPFUrdMf4TwfE5QRAXVYa53FUzzUzZ7/photo.jpg)


</div>
This my company logo, I am using this logo everywhere. <b>Royal Macro</b> is the name of my company. It's an IT based company in India. We're Security Researchers and Develo-pers. Although, our team is in small in size, but, our work is vast. ..... ....... ........ ..... ....... ........ ........ ........... .............. .................. ............. .............. ............... ...................... ........... ............... .......... .......... .......... ........... ............ ........ ............... ............. ................. ...............


একটি stock ফটোগ্রাফ আর্টিকেলে ব্যবহার করার সব চাইতে effective way টা নিচে দিলাম । যাঁরা যাঁরা পূর্বের টিউটোরিয়ালটি পড়েছেন তাঁরা লহমায় কোডটি বুঝতে পারবেন, যাঁরা পারবেন না তাঁরা ভালো করে পূর্বের আর্টিকেলটা পড়ুন -


image source[pixabay]credit[Leohoho]


কোড:

<center>![](https://cdn.pixabay.com/photo/2021/06/29/06/14/water-drops-6373296_960_720.jpg)
<sub><b>image source</b><sup><i>[[pixabay]](https://cdn.pixabay.com/photo/2021/06/29/06/14/water-drops-6373296_960_720.jpg)</i></sup><b>credit</b><sup><i>[[Leohoho]](https://pixabay.com/users/leohoho-16235524/)</i></sup></sub></center>


কোডিং বুঝতে কোনো সমস্যা হলে কমেন্ট বক্সে অবশ্যই উল্লেখ করবেন । যথাসাধ্য সাহায্য করবো ।

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
STEEMKR.COM IS SPONSORED BY
ADVERTISEMENT
Sort Order:  trending

ভাইয়া আপনার টিউটোরিয়ালটা আমার মাথার উপর দিয়ে চলে গেল বুঝলাম না।

·

আগের টিউটোরিয়াল দেখুন পার্ট -০১, তাহলে সব বুঝতে পারবেন ।

উপরের টেক্সটটি লক্ষ করুন । লাইনের শুরুতে "T" টা বড় সাইজের করা হয়েছে । subscript আর superscript ট্যাগ একসাথে ব্যবহার করে এটা করা হয়েছে । প্রথমে হ্যাশ ট্যাগ (#) দিয়ে হেডিং টা level-১ সাইজের করা হয়েছে , তারপরে "T" এর পরের বাকি অংশটুকু "very" শব্দটি পযর্ন্ত <sub><sup></sup></sub> ট্যাগ use করে ছোট করা হয়েছে ।

এটা আমি অনেকবার করতে চাইছিলাম কিন্তু পারি নাই। এখন ভালভাবে ব্যবহার করতে পারব।

·

আসলে মার্কডাউনে অনেক সীমাবদ্ধতা আছে, html এ যা ইচ্ছে করা যায়, কিন্তু স্টিমিট এ সেটা পসিবলে নয় ।

·
·

আজকের পোস্ট এ ব্যবহার করলাম। এটা ব্যবহার করলে লেখাগুলো আনেক সুন্দর দেখাই।

এটা অসাধারণ টিউটোরিয়াল হয়েছে দাদা, আমি জানি না আমাদের সদস্যরা কতটুকু নিতে পারবে এখান হতে কিন্তু তারা যদি চেষ্টা করে, তবে নিঃসন্দেহে বলা যায় এটা তাদের স্টিম ভ্রমনের দিককে ঘুরিয়ে দিবে। অনেক কিছু শেখার আছে এখানে। ধন্যবাদ আপনাকে চমৎকারভাবে উপস্থাপন করার জন্য।

·

নতুনদের কোডগুলি বেশি বেশি করে প্রাকটিস করা লাগবে । পুরোনো এক্সপার্ট ব্লগারদের অবশ্য খুবই কম সময় লাগবে সবগুলি বুঝতে । ভাবছি টেক্সট অলংকরণ নিয়ে আরো একটি টিউটোরিয়াল লিখবো ।

·
·

হ্যা, এটা করতে পারেন, ভালো হবে।

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

·

অবশ্য , আপনি প্রয়োগ করে দেখুন, ভালোই লাগবে দেখতে :)

ধন্যবাদ ভাই সুন্দর তথ্য প্রদানের জন্য।

·

আপনাকেও অনেক ধন্যবাদ ভাই :)

দাদা আপনাকে অসংখ্য ধন্যবাদ, এই মার্ক ডাউন এর পোস্ট টি আমাদের অনেক বড় উপকারে আসবে।

·

আপনাদের উপকারে আসলে আমি সত্য অনেক খুশি হবে ।

অত্যন্ত কার্যকরী একটি টিউটোরিয়াল সম্পন্ন করেছেন। আশা করছি এরপর markdown নিয়ে সবার সমস্যা সমাধান হবে।

·

আমিও আশা করছি আপনারা এর থেকে উপকৃত হবেন ।

This is really useful. People find this div arrangement confusing sometimes. But you have explained well. And I also found a new thing I haven't used already. The three-column arrangement, I haven't used so far. very useful. thank you

·

Thank you madam, I'm so grateful for your visit to our community. I used some codes above in my next post about Tron. You can check it:)

অসংখ্য ধন্যবাদ দাদা আপনাকে এতো সুন্দর বিষয়টা আমাদের জানানোর জন্য।আসা করি এটা ব্যবহার করে আমরা আমাদের পোষ্টটাকে আরও সুন্দর করে সাজাতে পারব।

·

ধন্যবাদ, কোথাও বুঝতে সমস্যা হলে বলবেন, হেল্প করবো ।

·
·

অবশ্যই দাদা।কিছু জানার থাকলে আপনাকে জিগাবোনে।আপনাকেও অনেক ধন্যবাদ।

অনেক চমৎকার। এবারও নতুন নতুন অনেকগুলো বিষয় শিখতে পারলাম এবং বরাবরের মতই আপনার আগের পোষ্টের মতো এই পোস্টটির লিঙ্ক রেখে দিচ্ছি সেভ করে কারণ এখান থেকে অনেক সুন্দর সুন্দর মার্কডাউন দিয়ে পোস্ট কে সুন্দর করে সাজাতে পারব। অসংখ্য ধন্যবাদ দাদা এত সুন্দর করে জিনিসগুলো কে উপস্থাপন করার জন্য

·

এই পোস্ট এর পরের পোস্টটি (ট্রন নিয়ে লেখা) দেখুন, বেশ কিছু টেক্সট অলংকরণ করেছি । ভাবছি অলংকরণ নিয়ে আরো একটি পোস্ট করবো ।

·
·

এটাও সেভ করেছি। Tron নিয়ে লিখাটিও পড়ব দাদা। ধন্যবাদ

সুন্দর পোস্ট লেখার জন্য অনেক ধন্যবাদ।

·

আপনাকেও সুন্দর এই কমেন্টটি করার জন্য অনেক ধন্যবাদ :)

·
·

ভালো থাকবেন সুস্থ্য থাকবেন।

প্রথম ও দ্বিতীয় পর্ব দুটোই অনেক তথ্য বহুল। ধন্যবাদ আপনাকে।

·

পোস্টদুটি ভালো হয়েছে জেনে খুবই খুশি হলাম , ধন্যবাদ আপনাকে :)

দাদা আমরা শুধু টেক্সট লাল রং করতে পারি এটা কি আর অন্য কোন রং করা সম্ভব? আপনার এই পোস্ট টি পড়ে বেশ কিছু প্রশ্নের উত্তর পেলাম। ধন্যবাদ আপনাকে।

·

মার্কডাউন কোড কোনোরকম টেক্সট কালার সাপোর্ট করে না, html এ আনলিমিটেড টেক্সট কালার সাপোর্ট করে । আর স্টিমিট এ তো কোনো কালারের টেক্সট অসম্ভব । আপনি কি div class="phishy" এর কথা বলছেন ? ওটাতো ডেঞ্জার sign রেড কালার । phishy মানে suspecious সন্দেহজনক কোনো কিছু । সেই জন্য suspecious কোনো কিছু বোঝাতে রেড কালারএর টেক্সট ব্যবহার করা হয় । ওটার নরমাল কোনো ব্যবহার নেই ।

·
·

জি দাদা ওই ডেঞ্জার সাইন টাকে কালার টেক্সট হিসেবে ইউজ করি।ধন্যবাদ দাদা।

ধন্যবাদ দাদা। অনেক সুন্দর ভাবে বুঝিয়েছেন 🥰

·

জেনে খুবই খুশি হলাম, ধন্যবাদ :D

Thanks for your useful post.

·

Thank you also :)