ব্লগার এ পোস্ট সূচিপত্র, বাটন বানানো, প্যারাগ্রাফ হাইলাইট, টেবিল তৈরি, আরো পড়ুন সেকশন, যোগ করার সহজ নিয়ম (A to Z)গাইড

 একটি সুন্দর এবং প্রফেশনাল ব্লক ওয়েবসাইট শুধুমাত্র ভালো কনটেন্ট এর ওপর নির্ভর করে না, বরং সেটি পাঠকদের কাছে কতটা সহজ এবং আকর্ষণীয়ভাবে প্রস্তাবিত হচ্ছে তার ওপর নির্ভর করে, আমরা যারা ব্লগার এ কাজ করি তারা অনেক সময় কিছু বিষয় না জানার কারণে আমাদের পোস্টটাকে পাঠকদের কাছে আকর্ষণীয় করতে পারিনা,


পোস্ট সূচীপত্রঃ 

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

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

পোস্ট সূচিপত্র তৈরি করার নিয়মঃ

জন্য সর্বপ্রথম আমাদেরকে একটি পোস্ট লিখতে হবে আমরা যে পোস্ট লিখব সে পোস্টে যেসব বিষয়গুলো নিয়ে আলোচনা করব প্রতিটা বিষয় আলাদা আলাদা ভাবে প্যারা তৈরি করতে হবে,

এরপর প্রতিটি প্যারার শুরুতে, কি কি বিষয় নিয়ে আলোচনা করা হচ্ছে সেটাকে ছোট্ট করে আলাদা একটা HEADER TITLE তৈরি করতে হবে। হেডার টাইটেল তৈরি করার জন্য যে অংশটুকু কে হেডার টাইটেল বানাবো, সেই অংশটুকু কে সিলেক্ট করে উপরের মেনুবার থেকে PARAGRAF এ ক্লিক করতে হবে তারপরে দুই নম্বর অপশনে দেখতে পাবেন HEADING লেখা আছে সেখানে ক্লিক করলেই সিলেক্ট করা অংশটুকু হেডার এ পরিবর্তন হয়ে যাবে

এরপর পোষ্টের কোন জায়গায় পোস্ট সূচিপত্র তৈরি করবেন সেখানে একটি সূচিপত্রের তালিকা তৈরি করতে হবে। তালিকা তৈরি হয়ে গেলে সম্পূর্ণ তরিকাগুলোকে একসাথে সিলেক্ট করে ব্লগার পোস্ট লেখার উপরের মেনু বারে bulleted list এ ক্লিক করে সবগুলোকে লিস্টিং করে নিতে হবে। এরপরে আমাদেরকে সূচিপত্রের প্রত্যেকটা পয়েন্ট কে আলাদাভাবে লিঙ্ক করতে হবে

লিংক করার জন্য আমরা সূচিপত্রের ভেতরের টাইটেল গুলোকে একটা একটা করে আলাদাভাবে সিলেক্ট করে অপরের মেনু বার থেকে INSERT LINK ICON এ ক্লিক করে # ১, #২, #৩ এভাবে সিরিয়ালে নাম্বার দিয়ে দিব।

এরপর আমরা যে হেডিং গুলোকে সূচিপত্রের লিংকে লিংকআপ করেছি সেই অনুসারে প্রথম হেডিং যেটাকে #১ দিয়ে লিঙ্ক করেছি সেই হেডারের সামনে আলাদা কিছু একটা লিখব এবং সেটাকে কপি করে রাখবো। 

এরপর মেনু বারের একেবারে বাম পাশে পেন্সিল আইকনের পাশে যে এরো চিহ্ন আছে সেখানে ক্লিক করে আমরা HTML VIEW এ চলে যাব। এরপর উপরের মেনুবার থেকে থ্রি ডেস অথবা  FORMAT HTML এ ক্লিক করে কোড গুলোকে আলাদা আলাদা করে নেব। এবং এরপর কোডের যে কোন এক জায়গায় কার্শর রেখে CTRL+F চিপে তারপর CTRL+V দিয়ে পেস্ট করে ENTER ক্লিক করব। তাহলে দেখতে পাবো আমাদের সেই হ্যাস ট্যাগ ওয়ানের প্রথম যেই হেডারটা ছিল সেই হেডারের সামনে আমাদের কপি করা লিখাটুকু হলুদ হয়ে আছে, এরপর হলুদ হওয়া  লেখাটুকু মুছে ফেলে H2 ট্যাগ এর ভিতরে H2 এর পাশে কারসর রেখে একটা স্পেস দিয়ে ID="" লীখে, "" এর মাঝখানে ১ দিবো যেমন id="1" 

এরপর কম্পোজ ভিউ এ এসে ঠিক আগের মতই দ্বিতীয় হেডিং এর সামনে কিছু একটা লিখে সেটাকে কপি করে এইচটিএমএল ভিউ এ যে ঠিক প্রথমবারের মতো করেই স্টেপ বাই স্টেপ সবকিছু করতে হবে শুধুমাত্র যেহেতু সেকেন্ড হেডিং এ আমরা #2 দিয়ে লিঙ্ক করেছিলাম সেজন্য h2 ট্যাগের ভিতর ID="1" এর জায়গায় সিরিয়াল মোতাবেক ২,৩,৪ দিতে হবে এরপর আপডেট করে দিলেই  কাজ কমপ্লিট হয়ে যাবে। 

কেন সূচিপত্রটাকে একটু ডিজাইন করার জন্য আপনি আরেকটি কাজ করতে পারেন সেটি হচ্ছে html ভিউ এ যাবেন তারপরে যেখানে সূচিপত্র শুরু হয়েছে সেখানে UL ট্যাগ নামে একটা ট্যাগ আছে সেই ট্যাগের পাশে কার্সর রেখে আপনি class="alert" অথবা class="alert info" দুইটার যেকোনো একটা লিখে আপডেট করলে, আপনি পোস্ট এ এসে দেখতে পাবেন  সূচিপত্রের চারিদিকে খুব সুন্দর একটা ডিজাইন তৈরি হয়েছে।

পোস্টের মাঝখানে বাটন বানাবেন যেভাবেঃ

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

এরপর মেন্যু বার  এর বাম কর্নারে পেন্সিল আইকনের পাশে  এড়ো বাটনে ক্লিক করে HTML VIEW এ যাবেন, এরপর সেখানে আপনি যে শব্দটিকে বাটন বানাতে চাচ্ছেন তার ঠিক আগে <BUTTON> এবং পরে </BUTTON> বাটন ট্যাগ নিয়ে, বাটন ট্যাগের ভিতরে class="btn-block" এই সুত্র টি লিখতে হবে। এরপর পাবলিশ অথবা আপডেট করে দিলে আপনি পোষ্টের ভিতর গিয়ে দেখবেন আপনার বাটন তৈরি হয়ে গিয়েছে এখন আপনি চাইলে আপনার বাটন কে বিভিন্ন কালার দিতে পারেন এজন্য সূত্র class="btn-block" এর জায়গায় block টা কেটে দিয়ে,
 oit-r, oit-g, oit-b, oit-y, oit-o, oit-p,  
এইগুলোর যে কোন একটা লিখে দিলেই বাটনের কালার চেঞ্জ হয়ে যাবে। যেমন: 
class="btn-oit-r" তবে এই সূত্রটি শুধুমাত্র ordinery it এর 4.0 থিমের ক্ষেত্রে প্রযোজ্য হবে।

যদি আপনি ordinery it  4.0  থিমটি ব্যবহার করে থাকেন তাহলে আপনি চাইলে সরাসরি নিচের সূত্রটি বসিয়ে বাটন বানিয়ে নিতে পারবেন। সেজন্য আপনাকে <p> অথবা <div> ট্যাগ এর ভিতরে এই সূত্রটি বসিয়ে দিলেই বাটন তৈরি হয়ে যাবে

<a href="#"><button class="btn-oit-r">বাটন নাম</button></a>


একটা নির্দিষ্ট প্যারাগ্রাফকে কিভাবে হাইলাইট করবেন চলুন জেনে নেইঃ

একটি নির্দিষ্ট প্যারাগ্রাফকে হাইলাইট করার জন্য প্রথমে প্যারাগ্রাফটি সম্পূর্ণ সিলেক্ট করে মেনুবার থেকে জাস্টিফাই করে নিতে হবে এরপরে HTML VIEW এ গিয়ে format html এ ক্লিক করে সবগুলো কোড গুলোকে ভেঙে নিতে হবে এরপর আপনি যে প্যারাটিকে জাস্টিফাই করলেন সেই পেয়ারার ঠিক আগে <p> অথবা <div> ট্যাগের ভিতর একটি সূত্র বসাতে হবে সূত্রটি হচ্ছে class="ph-oit-b" আপনি চাইলে শেষের b  এর জায়গায় y,r,g এই কালার গুলো ব্যবহার করতে পারেন। তবে এক্ষেত্রেও আপনার থিমটি ordinery it 4.0 থিম হতে হবে।

একটি টেবিল কিভাবে তৈরি করব চলুন এবার সেটা জানবোঃ


একটি টেবিল তৈরি করার জন্য প্রথমে আমরা HTML TABLE GENERATOR লিখে সার্চ দিব, এরপর  যে ওয়েবসাইটে আসবে সে ওয়েবসাইটের ভেতরে  গিয়ে, কিছুটা নিচের দিকে আসলে দেখতে পাবো একটা সুন্দর ঘর তৈরি করা আছে যার ভিতরে টেবিল কালার, টেক্সট কালার, বর্ডার কালার, হেডার এ ধরনের অপশন গুলো আছে এবং তার সব নিচে ROWS, COLOUMNS দুইটা অপশন আছে এবং এর পাশে নাম্বার লেখার একটা অপশন আছে সেইখানে গিয়ে আমাদের প্রয়োজন মত আমরা ROWS এবংCOLOUMNS এর সংখ্যা লিখব।
তারপর আর একটু নিচে গেলে দেখতে পাবো আমাদের প্রয়োজন অনুসারে যে টেবিলের ROW AND COLOUMNS এর সংখ্যা দিয়েছিলাম সেগুলোর একটা HTML কোড তৈরি হয়ে গিয়েছে। সেই কোডের যে কোন এক জায়গায় মাউস পয়েন্টার রেখে CTRL+A দিয়ে সবগুলো সিলেক্ট করে, এরপর CTRL+C দিয়ে কপি করে নিব, এরপর আমরা আমাদের ওয়েবসাইটে এসে যে পোস্টে আমরা টেবিলটা তৈরি করব সে পোষ্টের এডিট অপশনে যাব এরপর HTML VIEW এ গিয়ে নির্দিষ্ট স্থানে কপি করে নিয়ে আসা কোড টা CTRL+V দিয়ে পেস্ট করে দিব এরপর আমাদের প্রয়োজন অনুসারে ROW এবং COLOUMNS এড় ভিতরে প্রয়োজনীয় তথ্যগুলো লিখে টেবিলটা কমপ্লিট করব।


আরো পড়ুন সেকশন কিভাবে বানাবেন চলেন জেনে নেইঃ

আরো পড়ুন সেকশন বানানর জন্য, পোস্ট এর যেই যাইগা তে এই সেকশন তৈরি সেইখানে গিয়ে 
আরো পড়ুনঃ লিখে এর পাশে যেই পোস্ট টা পড়াতে চাচ্ছেন সেই পোস্ট এর টাইটেল টা লিখুন এর পরে পুরো লিখা টুকু সিলেক্ট করে, মেনুবার থেকে Insert or Edit Link এ ক্লিক করে লিঙ্ক এর যাইগায় আপনার সেই পোস্ট এর লিঙ্ক টা কপি করে এনে পেস্ট করে দিন। ব্যাস আপনার আরো পড়ুন সেকশন রেডি।
 
এখন এই সেকশন টা একটু ডিজাইন করার জন্য HTML VIEW এ এসে আরো পড়ুন সেকশন টা যেই<P> অথবা <div> ট্যাগ দিয়ে শুরু হয়েছে সেই ট্যাগ এর ভিতরে কার্সর রেখে এক্তা স্পেস দিয়ে class="alert info" এই সুত্র দিয়ে পাবলিশ অথবা আপডেট দিলেই আপনার আরো পড়ুন সেকশন টা সুন্দর একটা ডিজাইন পেয়ে যাবে। 

এই পোস্টটি পরিচিতদের সাথে শেয়ার করুন

পরবর্তী পোস্ট দেখুন
এই পোস্টে এখনো কেউ মন্তব্য করে নি
মন্তব্য করতে এখানে ক্লিক করুন

টিএম পিক এর নীতিমালা মেনে কমেন্ট করুন। প্রতিটি কমেন্ট রিভিউ করা হয়।

comment url