কিভাবে ব্লগে কোড বক্স যোগ করবেন? Amarbanglakontho
হ্যালো বন্ধুরা, আজকের পোস্টে আপনি জানতে যাচ্ছেন, কিভাবে আপনি আপনার ব্লগে কোড বক্স যোগ করতে পারেন। যদি আপনার ব্লগ কোডিং এর সাথে সম্পর্কিত হয়, তাহলে অনেক সময় আপনাকে আপনার পোস্টে HTML, CSS, JavaScript ইত্যাদি কোড যোগ করতে হবে।
কিন্তু আমরা সকলেই এই জিনিসটি জানি যে আমরা ব্লগারে খুব কম বিকল্প দেখতে পাই। ওয়ার্ডপ্রেসে একটি কোড বক্স যোগ করতে, আপনি অনেকগুলি প্লাগইন পান, যাতে শুধুমাত্র একটি ক্লিকে, কোড বক্সটি আপনার পোস্টে যুক্ত হয়।
 |
কিন্তু ব্লগারে কোড বক্স যোগ করার জন্য আপনাকে এই কাজটি করতে হবে। বন্ধুরা, আজকের পোস্টে, আমরা আপনাকে কোড বক্স যুক্ত করার 3 টি উপায় সম্পর্কে বলতে যাচ্ছি, যাতে পড়ার পরে, আপনিও খুব আরামে আপনার ব্লগ পোস্টে একটি কোড বক্স যুক্ত করতে সক্ষম হবেন।
তো বন্ধুরা, সময় নষ্ট না করে চলুন জেনে নিই কিভাবে ব্লগে কোড বক্স যুক্ত করবেন।
কোড বক্স কি?
কোড বক্স হল একটি বিশেষ ধরনের বক্স, যাতে আমরা আমাদের কোডগুলি লিখি, যাতে ব্যবহারকারীরা কোডটি পড়তে এবং বুঝতে সহজ হয়৷
কেন ব্লগ পোস্টে কোড বক্স ব্যবহার করবেন?
আমরা যদি আমাদের ব্লগে কোডিং সম্পর্কিত তথ্য শেয়ার করি, তাহলে এই ক্ষেত্রে আমাদের ব্লগে কোড বক্স ব্যবহার করা উচিত।
কারণ এটি ব্যবহারকারীদের কোড বুঝতে সহজ করে তোলে, তারা সহজেই জানতে পারে নিবন্ধের কোন অংশে কোডটি দেওয়া হয়েছে।
এটির মাধ্যমে, তারা সেই কোডটি সহজেই অনুলিপি করতে সক্ষম হবে এবং তারা শীঘ্রই আপনার ব্লগে যা এসেছে তা তারা পাবে।
এর সাথে, কোড বক্স ব্যবহার করে আমাদের ব্লগের ইউজার ইন্টারফেসও উন্নত হয় এবং আমাদের ব্লগটিকে একটি পেশাদার চেহারা দেয়।
কিভাবে ব্লগে কোড বক্স যোগ করবেন?
যদিও আপনার ব্লগে কোড বক্স যোগ করার অনেক উপায় আছে, কিন্তু তাদের মধ্যে কিছু আমাদের ব্লগের জন্য বিপজ্জনক। আপনি যদি এমন কোন কোড ব্যবহার করেন, তাহলে আপনার ব্লগে মোবাইল রেসপন্সিভ বাগেরার ত্রুটি আসবে।
এমন পরিস্থিতিতে, আপনার ব্লগের র্যাঙ্কিংও প্রভাবিত হবে, ফলে আপনার ব্লগের ট্রাফিকও কমে যাবে। তবে চিন্তার কিছু নেই, কারণ আজ আমরা আপনাকে এমন 3টি পদ্ধতি বলব, যা সম্পূর্ণ নিরাপদ এবং যা আমরা আমাদের নিজস্ব ব্লগেও অনুসরণ করি।
1. ব্লগে সহজ কোড বক্স যোগ করুন
এই পদ্ধতিতে, আপনি শুধুমাত্র একটি সাধারণ HTML কোড ব্যবহার করবেন, এটি আপনার পোস্টে যোগ করার পরে, কোড বক্সটি আপনার পোস্টে যোগ করা হবে।
ধাপ 1: নীচে দেওয়া HTML কোডটি অনুলিপি করুন এবং আপনার ব্লগারের ড্যাশবোর্ডে যান এবং HTML ভিউতে পেস্ট করুন।
 |
<pre style="background: rgb(238, 238, 238); border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: initial; border-left-style: initial; border-radius: 10px; border-right-color: initial; border-right-style: initial; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 5px 0px 0px; color: #444444; font-family: "Courier New", Courier, monospace; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 12px; vertical-align: baseline;"><span style="font-size: 13px;">Replace the text with codes</span></pre><p>Start write the next paragraph here </p>
ধাপ 2: এখন আপনি কম্পোজ ভিউতে স্যুইচ করুন এবং কোডের সাথে পাঠ্য প্রতিস্থাপন করুন, আপনি আপনার কোড পেস্ট করুন। যা আপনি কোড বক্সের ভিতরে রাখতে চান।
 |
 |
এই পদ্ধতিতে শুধুমাত্র HTML ব্যবহার করা হয়েছে, যার কারণে আপনার ব্লগের গতি কোন ব্যাপার নয়।
এটির সবচেয়ে ভালো বিষয় হল এই কোড বক্সটি যুক্ত করতে আপনার ব্লগের থিমে কিছু পরিবর্তন করতে হবে না।
আপনি চাইলে এর মধ্যেও ব্যাকগ্রাউন্ড কালার, বর্ডার কালার এবং কোড কালার ইত্যাদি পরিবর্তন করতে পারেন। এর জন্য, আপনাকে যা করতে হবে তা হল HTML কোডে রঙের RGB মান পরিবর্তন করুন।
2. আপনার ব্লগে CSS স্টাইল কোড বক্স যোগ করুন।
ধাপ 1: প্রথমে hilite.me বা Pinetools খুলুন।
ধাপ 2: এখন আপনি যে কোডটি ব্যবহারকারীদের সাথে শেয়ার করতে চান সেটি সোর্স কোড সহ বাক্সে পেস্ট করুন।
 |
ধাপ 3: আপনার ব্লগে যে ভাষায় আপনার কোড আছে সেটি নির্বাচন করুন। যেমন HTML, CSS, Python, ইত্যাদি এবং তারপর হাইলাইট বোতামে ক্লিক করুন।
 |
ধাপ 4: এখন আপনি আপনার এইচটিএমএল বক্সের ভিতরে যাই হোক না কেন কোড কপি করুন।
 |
ধাপ 5: এটি করার পরে, আপনার ব্লগারের ড্যাশবোর্ডে যান, এবং যে পোস্টে আপনি কোড বক্স যোগ করতে চান সেটি খুলুন, html ভিউতে এবং কপি করা কোডটি যেখানে আপনি প্রদর্শন করতে চান ঠিক সেখানে পেস্ট করুন। এবং প্রকাশ করুন। পোস্ট
 |
এখন আপনার ব্লগে একটি CSS শৈলী বক্স যোগ করা হবে যা সম্পূর্ণরূপে মোবাইল-বান্ধব হবে এবং ব্যবহারকারীদের একটি ভাল অভিজ্ঞতা দেবে।
 |
এই কোড বক্সটিও যোগ করতে, আপনাকে আপনার থিমে কিছু পরিবর্তন করতে হবে না।
3. ব্লগে সিনট্যাক্স হাইলাইটার কোড বক্স যোগ করুন
এখন পরিশেষে আমরা আপনাকে বলব কিভাবে সিনট্যাক্স হাইলাইটার কোড বক্স যোগ করবেন যা সবচেয়ে স্টাইলিশ কোড বক্স।
ধাপ 1: প্রথমে আপনার ব্লগার অ্যাকাউন্টে লগইন করুন তারপর ড্যাশবোর্ডের সাহায্যে থিম অপশনে যান এবং edit html এ ক্লিক করুন।
ধাপ 2: এখন নিম্নলিখিত কোডটি </style> অথবা ]]></b:skin> এ পেস্ট করুন।
 |
.post-body pre {
background-color: #292E34; /* Change Background Colour */
border-left: 5px solid #008c5f; /*Left Border Colour */
padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
color: #BFBF90;
font-size: 12px; /* ukuran huruf */
max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}
ধাপ 3: এখন থিম সংরক্ষণ করুন।html ভিউতে আপনি যে পোস্ট বক্স যোগ করতে চান সেটি খুলুন এবং কোড বক্সটি যেখানেই প্রদর্শন করতে চান সেখানে নিচের কোডটি পেস্ট করুন।
<pre><code>
Enter Your Code
</pre></code> এবং এই Enter Your Code এর জায়গায় আপনি যে কোডটি দেখাতে চান সেটি ভালো ভাবে পেস্ট করুন।এটি করার পরে আপনার ব্লগে একটি দুর্দান্ত কোড বক্স যুক্ত হবে।
ব্লগে কোড বক্স ব্যবহারের সুবিধা
এটি আপনার ব্লগকে একটি পেশাদার চেহারা দেয়।
ব্যবহারকারীরা এটি এক জায়গায় পাবেন।
কোড চিনতে সহজ.
কোড এক বার কপি করা যাবে.
ব্যবহারকারীর অভিজ্ঞতার উন্নতি ঘটবে।
তো বন্ধুরা, আমি আশা করি আজকের পোস্ট পড়ার পর আপনারা অবশ্যই জেনে থাকবেন কিভাবে ব্লগে কোড বক্স যুক্ত করতে হয়।
আপনি উপরের 3টি পদ্ধতির যেকোনো একটি ব্যবহার করতে পারেন। আপনি যদি আমাকে জিজ্ঞাসা করেন আমি কোন পদ্ধতি ব্যবহার করি।
তাই আমি বেশিরভাগই আমার ব্লগার ব্লগে প্রথম পদ্ধতি ব্যবহার করি, কারণ এটি ব্যবহার করা খুবই সহজ এবং স্বজ্ঞাত। এবং আমি বিশ্বাস করি আপনি একই ব্যবহার করা উচিত. এতে আপনার সময় বাঁচবে।
আপনি যদি এই পোস্টটি পছন্দ করেন, তাহলে আপনার ব্লগার বন্ধুদের সাথে শেয়ার করতে ভুলবেন না। যাতে তারাও এ থেকে সাহায্য পেতে পারে।
আমি আপনার সাথে এরকম আরেকটি পোস্টের সাথে দেখা করি, ততক্ষণ আপনি যেখানেই থাকুন না কেন নতুন এবং অনন্য কিছু শিখতে থাকুন।
আমার বাংলা কন্ঠ
"আমার বাংলা কন্ঠ" ব্লগ ওয়েবসাইট এবং ইউটিউব চ্যানেলে ধর্মীয়,অধ্যাত্মিক, প্রেরণাদায়ক এবং জ্ঞানবর্ধক ভাবনা শেয়ার করি। যাতে আমাদের পরিবার, সমাজ, দেশ এবং বিশ্বকে ভালোভাবে গড়ে তুলে। আমরা আশা করি যে আমাদের চিন্তাধারা থেকে আপনার জীবনকে সঠিক পথ দেখাবে। ধন্যবাদ
