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

in আমার বাংলা ব্লগ2 months ago

গতকাল আমি স্টিমিটে ব্যবহারযোগ্য প্রায় সবক'টি মার্কডাউন কোড নিয়ে আলোচনা করেছিলাম । আজকে দেখাবো সে গুলির বাস্তব ব্যবহার ও কয়েকটি বুটস্ট্র্যাপ 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>


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

Sort:  
 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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:)

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

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

 2 months ago 

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

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

 2 months ago (edited)

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

 2 months ago 

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

 2 months ago 

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

 2 months ago 

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

Thanks for your useful post.

 2 months ago 

Thank you also :)