Blogger post-এ stylish codebox তৈরি করার সহজ ও step-by-step guide
Blogger post-এ stylish codebox তৈরি করার সহজ ও step-by-step guide
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 দেখানো…
About the author
👋 Hi, I’m Alnur Araf — a passionate 🌐 Website Developer, ✍️ Blogger, 💼 Freelancer, and 📊 Digital Marketing Specialist. I create modern, engaging, and result-driven digital experiences that help brands and businesses grow online. 💻 As a develop…
