নির্দিষ্ট Blockquote থেকে কোটেশন মার্ক রিমুভ করার উপায়

ব্লগের নির্দিষ্ট Blockquote থেকে কোটেশন মার্ক (") রিমুভ করার সহজ উপায়

কাস্টম CSS ব্যবহার করে ব্লগের নির্দিষ্ট ব্লগকোট (Blockquote) থেকে কোটেশন মার্ক সরানোর আগের ও পরের একটি তুলনামূলক চিত্র

ব্লগকে পাঠকদের কাছে আকর্ষণীয় করে তুলতে আমরা অনেকেই কাস্টম ব্লগকোট (Blockquote) বা সুন্দর টেক্সট বক্স ব্যবহার করি। কিন্তু অনেক সময় দেখা যায়, নিজের পছন্দমতো ব্যাকগ্রাউন্ড বা বর্ডার দেওয়ার পরেও বক্সের দুই মাথায় দুটি অনাকাঙ্ক্ষিত কোটেশন মার্ক (") চলে আসে।

এটি মূলত ঘটে আপনার ব্যবহার করা ব্লগ থিমের ডিফল্ট সিএসএস (CSS) কোডিংয়ের কারণে। থিমে আগে থেকেই বলা থাকে যে ব্লগকোট হলেই সেখানে কোটেশন মার্ক দেখাতে হবে।

আজকের এই ছোট্ট গাইডলাইন থেকে আমরা জানবো—থিমের মূল ডিজাইন নষ্ট না করে, কীভাবে কেবল নির্দিষ্ট একটি ব্লগকোট থেকে এই কোটেশন মার্ক পুরোপুরি মুছে ফেলা যায়!

---

কেন ইনলাইন স্টাইল (Inline Style) দিয়ে কোটেশন মার্ক মোছা যায় না?

অনেকে ব্লগকোটের ভেতরেই style="font-style: normal;" বা এই জাতীয় কোড লিখে কোটেশন মার্ক সরানোর চেষ্টা করেন, কিন্তু তা কাজ করে না। এর কারণ হলো, থিমগুলো কোটেশন মার্ক তৈরি করতে CSS-এর ::before এবং ::after নামক সিউডো-এলিমেন্ট (Pseudo-element) ব্যবহার করে। এই এলিমেন্টগুলোকে সরাসরি এইচটিএমএল (HTML) লাইনের ভেতরে নিয়ন্ত্রণ করা যায় না। এর জন্য আমাদের একটি কাস্টম Class বা নাম ব্যবহার করতে হয়。

---

নির্দিষ্ট একটি ব্লগকোট থেকে কোটেশন মার্ক সরানোর নিয়ম (ধাপে ধাপে)

ধরে নিন, আপনার ব্লগে একটি সুন্দর কোট বক্স আছে এবং আপনি চান থিমের বাকি সব ব্লগকোট আগের মতোই থাকুক, শুধু এই নির্দিষ্ট বক্সটি থেকে কোটেশন মার্ক চলে যাক। এটি করার জন্য নিচের ২টি সহজ ধাপ অনুসরণ করুন:

ধাপ ১: HTML কোডে Class যোগ করুন

আপনার পোস্ট এডিটরে (HTML View) গিয়ে নির্দিষ্ট ব্লগকোটের শুরুতে blockquote ট্যাগের ভেতর class="no-quotes" কথাটি লিখে দিন।

উদাহরণস্বরূপ (নিচের কোডটি লক্ষ্য করুন):

HTML CODE

<blockquote class="no-quotes" style="background-color: #f8f9fa; border-left: 4px solid rgb(52, 73, 94); font-style: normal; padding: 15px;">
    <b>পড়ে দেখতে পারেন :</b><br /> 
    যদুনাথ সরকার মোগল সম্রাট ঔরঙ্গজেবকে কীভাবে মূল্যায়ন করেছেন? 👉 <a href="#">দেখুন এখানে</a>
</blockquote>

ধাপ ২: থিমে কাস্টম CSS কোড যোগ করুন

এবার আপনার ব্লগের থিম বা ডিজাইনে নিচের সিএসএস কোডটুকু যোগ করতে হবে। এই কোডটি আপনার তৈরি করা no-quotes ক্লাসের ভেতরের কোটেশন মার্কগুলোকে অদৃশ্য করে দেবে।

CSS CODE

/* নির্দিষ্ট ব্লগকোটের কোটেশন মার্ক রিমুভ করার কোড */
.no-quotes::before, .no-quotes::after {
    content: none !important;
}

---

এই CSS কোডটি আপনার ব্লগে কোথায় বসাবেন?

আপনি যে প্ল্যাটফর্মই ব্যবহার করেন না কেন, কোডটি বসানো খুবই সহজ:

১. blogger (Blogger / Blogspot) সাইটের জন্য:

• আপনার blogger ড্যাশবোর্ড থেকে Theme-এ যান।
• Customize বাটনের পাশে থাকা ড্রপডাউন থেকে Edit HTML-এ ক্লিক করুন。
• এবার কোড বক্সের ভেতর একটি ক্লিক করে কিবোর্ডের Ctrl + F চাপুন এবং ]]></b:skin> লিখে সার্চ করুন।
• এই ]]></b:skin> লেখাটির ঠিক এক লাইন উপরে আমাদের দেওয়া CSS কোডটি পেস্ট করে দিয়ে থিমটি Save করুন।

২. ওয়ার্ডপ্রেস (WordPress) সাইটের জন্য:

• আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Appearance > Customize-এ যান।
• বাঁদিকের মেনু থেকে Additional CSS অপশনে ক্লিক করুন।
• বক্সের একদম নিচে কোডটি পেস্ট করে দিয়ে উপরে থাকা Publish বাটনে ক্লিক করুন।

---

সব ব্লগকোট থেকে একসাথে কোটেশন মার্ক সরানোর উপায়

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

GLOBAL CSS CODE

blockquote::before, blockquote::after {
    content: none !important;
}

শেষ কথা

কোডিংয়ের এই ছোট ট্রিকসটি ব্যবহার করে আপনি আপনার ব্লগের আর্টিকেলের মাঝখানে চমৎকার সব "নোট বক্স" বা "পড়ে দেখতে পারেন" জাতীয় নোটিশ বক্স তৈরি করতে পারবেন, যা দেখতে অত্যন্ত প্রফেশনাল লাগবে। কোডটি সেভ করার পর অবশ্যই আপনার ব্রাউজারের ক্যাশ ক্লিয়ার (Ctrl + F5) করে একবার চেক করে নেবেন।

ব্লগিং বা ওয়েব ডিজাইন সংক্রান্ত যেকোনো সমস্যায় আমাদের জানাতে পারেন। হ্যাপি ব্লগিং!