Advertisement
Welcome
Login / Register
Code Web designe Web Development Wordpress

আপনার ব্লগে কোড শেয়ার করার জন্য প্রফেশনাল Code Block এবং Copy Button যোগ করুন।

Asraful Islam
9 May, 2026
0 22 1
Code

আপনার ব্লগে কোড শেয়ার করার জন্য প্রফেশনাল Code Block এবং Copy Button যোগ করুন।

Asraful Islam
May 9, 2026 22 Views
10 / 100 SEO Score

আপনার ব্লগে কোড শেয়ার করার জন্য আমার মতো প্রফেশনাল Code Block এবং Copy Button যোগ করা বেশ সহজ।

আপনি যেহেতু ওয়ার্ডপ্রেসের ক্লাসিক এডিটর ব্যবহার করছেন, তাই আপনার জন্য নিচের পদ্ধতিগুলো সবচেয়ে কার্যকর হবে

1. প্লাগইন ব্যবহার করা (সবচেয়ে সহজ পদ্ধতি)
আপনি যদি কোনো কোডিং ঝামেলা ছাড়াই আমার মতো সুন্দর কোড বক্স এবং কপি বাটন চান, তবে একটি Syntax Highlighter প্লাগইন ব্যবহার করা সেরা উপায়।

Enlighter – Customizable Syntax Highlighter এটি বর্তমানে সবচেয়ে জনপ্রিয়।

এটি ইন্সটল করলে আপনি এডিটরে একটি নতুন ‘Code’ বাটন পাবেন।

সেখান থেকে থিম হিসেবে ‘Dracula’ বা ‘Classic’ সিলেক্ট করলে একদম এআই (AI) এর মতো ডার্ক মোড লুক আসবে এবং অটোমেটিক **Copy** বাটন যুক্ত হবে।

CodeBlock Pro:** এটি বিশেষভাবে তৈরি করা হয়েছে কোডকে সুন্দরভাবে দেখানোর জন্য।

**কিভাবে করবেন:**

  1. ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে **Plugins > Add New**-এ যান

2. Enlighter লিখে সার্চ দিন এবং ইন্সটল করে অ্যাক্টিভ করুন।

3. এখন পোস্ট লেখার সময় টুলবারে **”Insert Enlighter Code”** নামে একটি অপশন পাবেন। সেখানে কোড পেস্ট করলেই তা আমার মতো বক্সে দেখাবে।

#2.  এইচটিএমএল (HTML) ব্যবহার করে (প্লাগইন ছাড়া)
আপনি যদি প্লাগইন ব্যবহার করতে না চান, তবে নিচের কোডটি আপনার এডিটরের **’Code’** ট্যাবে গিয়ে ব্যবহার করতে পারেন

Html

CODE
<pre style="background: #282c34; color: #fff; padding: 15px; border-radius: 8px; overflow-x: auto;">
<code>
// আপনার কোড এখানে লিখুন
console.log("Hello World");
</code>
</pre>
[\code]<div class="ilybd-ad-slot">
                <!-- ADSENSE CODE HERE -->
                <div class="ad-placeholder">Advertisement</div>
            </div>
<h4 style="text-align: center;"><strong>#3. আপনার 'Cyber' থিমের জন্য বিশেষ পরামর্শ </strong><strong>যেহেতু আপনি একটি প্রফেশনাল এবং ইউনিক ইন্টারফেস তৈরি করছেন, আপনি চাইলে আপনার থিমের **style.css** ফাইলে নিচের ডিজাইনটি যোগ করতে পারেন। এতে আপনার ওয়েবসাইটের কোড বক্সগুলো দেখতে আরও </strong></h4>
[code]/* কোড বক্সের ডিজাইন */
pre {
    background-color: #1e1e1e; /* ডার্ক ব্যাকগ্রাউন্ড */
    border-left: 4px solid #00ff00; /* নিয়ন গ্রিন বর্ডার */
    color: #dcdcdc;
    padding: 20px;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    position: relative;
}
/* কপি বাটনের জন্য হালকা সিএসএস */
pre::before {
    content: "CODE";
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 10px;
    color: #888;
}

# আমার পরামর্শ:
আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স ভালো করার জন্য **"Enlighter"** প্লাগইনটি ট্রাই করুন। এটি ব্যবহার করলে ভিজিটররা এক ক্লিকেই কোড কপি করতে পারবে, যা আপনার টেকনিক্যাল পোস্টগুলোর মান অনেক বাড়িয়ে দেবে।

Insurance Agency, Mesothelioma Lawyer, Donate Cars for Charity, Online Banking, Cryptocurrency Trading, Cloud Hosting Solutions

Advertisement

PuroCheck™ Analysis Report

Official Authenticity Verification for this Document

CERTIFIED HUMAN
AI PROBABILITY
1.6%
PLAGIARISM
0%
INTEGRITY SCORE
98.4%
HIGH QUALITY
ID: PURO-5429-A255
ENGINE: PUROCHECK-V3.2 (NEURAL)
Run New Analysis
বন্ধুদের সাথে শেয়ার করুন

পোস্ট রিপোর্ট করুন

কেন এই পোস্টটি রিপোর্ট করছেন তা লিখুন:

মন্তব্য করুন

Asraful Islam

VERIFIED

আমি একজন প্রফেশনাল কন্টেন্ট ক্রিয়েটর। নতুন নতুন প্রযুক্তি এবং সাইবার সিকিউরিটি নিয়ে গবেষণা করতে আমার ভালো লাগে।

আপনার জন্য আরও কিছু...

CYBER ASSISTANT | IBD CORE
> Establishing secure connection...
Hello! I am IBD Cyber Bot. How can I assist you today?