Blogger post-এ code দেখানোর জন্য simple text এর বদলে stylish codebox ব্যবহার করলে পোস্ট professional এবং readable দেখায়। এখানে step-by-step guide দেওয়া হলো কিভাবে CSS এবং HTML ব্যবহার করে সুন্দর codebox তৈরি করবেন।
Step 1: Add HTML Structure
আপনার কোড যা দেখাতে চান তা <pre> এবং <code> tag-এর মধ্যে রাখুন:
<pre class="custom-code">
print("Hello World!")
</pre>Step 2: Add CSS Styling
Blogger Theme → Theme → Customize → Advanced → Add CSS বা <style> tag ব্যবহার করে নিচের CSS যোগ করুন:
.custom-code {
background-color: #1e1e1e;
color: #f8f8f2;
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
overflow-x: auto;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
Step 3: Make it Responsive
Overflow এবং width সেট করুন যাতে mobile devices-এ scrollbar দেখায়:
.custom-code {
max-width: 100%;
overflow-x: auto;
}
Step 4: Optional – Add Line Numbers
Line numbers দেখানোর জন্য small CSS trick ব্যবহার করা যায়।
Tips
- Dark background + light text খুব ভালো readability দেয়।
- Font-family monospace ব্যবহার করা উচিত।
- Post readers সহজে copy করতে scrollbar enabled রাখা ভালো।
Conclusion
এই সহজ steps অনুসরণ করলে আপনি আপনার Blogger post-এ সুন্দর, responsive, এবং professional codebox বানাতে পারবেন। এটি SEO ও user experience দুই-ই উন্নত করবে।
