ব্লগার পোস্টে কোড বক্স যুক্ত করুন | Add Code Box in Blogger Post

আসসালামুঅলাইকুম। সবাই কেমন আছেন? আশা করি সবাই ভাল আছেন। আজকের আরটিকেলে আপনাকে স্বাগতম।

আপনি কি ব্লগ পোস্টে কোড প্রদর্শন করার চেষ্টা করছেন? কিন্তু করতে পারছেন না? চিন্তা করবেন না কারণ আমি আপনাকে সাহায্য করতে চলে এসেছি।

আজ আমি আপনাদের দেখাবো কিভাবে ব্লগার পোস্টে কোড Show করতে হয়। আপনি যদি কোডগুলিকে একটি কোড বাক্সে শেয়ার করেন তবে এটি সুন্দর দেখাবে এবং এটি ভিজিটরদের সেই কোডটি সহজেই পড়তে এবং কপি করতে সহায়তা করবে৷ তাহলে আর দেরি না করে চলুন টিউটোরিয়ালে আসা যাক।

অনেক বিখ্যাত ব্লগ সাইট ব্লগারে হোস্ট করা রয়েছে এবং প্রত্যেক ব্লগার কম বেশি তাদের ব্লগিং যাত্রা শুরু করে গুগল ব্লগার থেকে এবং তারপর অন্য কোন ব্লগে মুভ করে। Blogger আপনাকে আপনার পছন্দ অনুযায়ী আপনার ব্লগার ব্লগ থিম সম্পাদনা করার অপশন দেয়। শুধু আপনার HTML, CSS এবং (JS) Javascript এর কিছু প্রাথমিক জ্ঞান থাকা প্রয়োজন।

ব্লগার পোস্টে কেন আপনার কোড বক্স যুক্ত করা প্রয়োজন?

আপনি যখন আপনার ব্লগে ব্লগার টিউটোরিয়াল সম্পর্কে কোন ব্লগ পোস্ট লেখেন তখন আপনি আপনার পাঠকদের জন্য ব্লগ পোস্টে কোড শেয়ার করতে হতে পারে। সেই কোডগুলিকে আলাদা কোড বক্সে বা কোড স্নিপেট বক্সে এমনভাবে শেয়ার করা ভালো যে এটি যেন স্টাইলিশ দেখায়৷ এবং এটি আপনার দর্শকদের জন্য সহায়ক হয় কারণ তারা কোড বক্স থেকে কোডটি সহজেই কপি করতে পারবে। কখনও কখনও কোডগুলি সঠিক ভাবে ডেকোরেশন না করায় অনেক খারাপ দেখায় এবং ব্লগ পোস্টে অনেক জায়গা নেয়। তাই আপনাকে ব্লগার পোস্টে কপি বাটনে ক্লিক করে কোড কপি করার  মেথোড যোগ করতে হবে। 

ব্লগ পোস্টে কোড বক্স অ্যাড করতে নিচের ধাপগুলি অনুসরণ করুন।

ব্লগার পোস্টে কপি বাটন সহ কোড বক্স কীভাবে যুক্ত করবেন?

1. প্রথমে আপনার ব্লগার ড্যাশবোর্ডে যান৷

 2. থিম অপশন সিলেক্ট করুন।

 3. এরপরে, ড্রপ ডাউন মেনু থেকে HTML Edit নির্বাচন করুন।

 4. আপনি একটি HTML কোড দেখতে পাবেন, কোড বক্সের যেকোনো জায়গায় ক্লিক করুন। 

5. এখন Ctrl + F টিপুন এবং </body> ট্যাগ Search করুন।

 6. </body> ট্যাগের উপরে/আগে, নিচের কোডটি কপি করে পেস্ট করে দিন।

Copy This Code

<style>
/* Codebox by Blogger 4 Ever */
.B4eBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:20px;margin:30px 0 30px}
.B4eBox .B4eBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.B4eBox .B4eBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.B4eBox .B4eBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#056aff;transition:all .3s ease;-webkit-transition:all .3s ease}
.B4eBox .B4eBoxB:hover{opacity:.8}
.B4eBox .B4eBoxB .icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center}
.B4eBox .B4eBoxB.copied{background:#2dcda7}
.B4eBox .B4eBoxB.copied .icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")}
.B4eBox pre{min-height:200px;margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.B4eBox pre::before, .B4eBox pre::after{content:''}
.darkMode .B4eBox{background:#2d2d30}
.darkMode .B4eBox pre{background:#252526;color:#fffdfc}
.B4eNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.B4eNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .B4eNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}</style>
<div id='B4eNotif' class='B4eNtf'></div>
<script>/*<![CDATA[*/ /* Codebox Script by Blogger 4 Ever */ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("B4eNotif").innerHTML="<span>Copied To Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>

7. এখন "Save" থিমে ক্লিক করুন বেশ আপনার কাজ শেষ!

ব্লগার পোস্টে কোড বক্সটি কিভাবে ব্যবহার করবেন?

আপনার পোস্টে কোড বক্স ব্যবহার করতে নিম্নলিখিত ধাপগুলি অনুসরণ করুন।

 1. একটি নতুন পোস্ট যোগ করুন।

 2. পোস্ট এডিটরে ড্রপ-ডাউন মেনু থেকে HTML ভিউ নির্বাচন করুন।

 3. তারপর, নীচের কোডটি কপি করুন এবং যেখানে আপনি কোড বক্সটি অ্যাড করতে চান সেখানে পেস্ট করুন। 

Copy This Code

<!--[ Code Box 1 ]-->
<div class='B4eBox'>
<div class='B4eBoxH'>
<span>HTML</span>
<button id='copy1' class='B4eBoxB' onclick="copyC('copy1','code1')">
<i class='icn'></i>
</button>
</div>
<div id='code1'>
<pre>Your-HTML-Code-Here</pre>
</div>
</div>
<!--[ Code Box 2 ]-->
<div class='B4eBox'>
<div class='B4eBoxH'>
<span>CSS</span>
<button id='copy2' class='B4eBoxB' onclick="copyC('copy2','code2')">
<i class='icn'></i>
</button>
</div>
<div id='code2'>
<pre>Your-CSS-Code-Here</pre>
</div>
</div>
<!--[ Code Box 3 ]-->
<div class='B4eBox'>
<div class='B4eBoxH'>
<span>JS</span>
<button id='copy3' class='B4eBoxB' onclick="copyC('copy3','code3')">
<i class='icn'></i>
</button>
</div>
<div id='code3'>
<pre>Your-JS (JavaScript)-Code-Here</pre>
</div>
</div>

4. প্রতিটি বাক্সে আপনার পছন্দসই কোড দিয়ে "Your-HTML-CSS-JS-Code-Here" প্রতিস্থাপন করুন। 

5. এখন এটির লাইভ দেখতে  Preview বা Publish বাটনে ক্লিক করুন।

 তাহলে আপনি ব্লগার পোস্টে কপি বাটন সহ কোড বক্স সফলভাবে অ্যাড করেছেন। 

কিভাবে ব্লগার পোস্টে 3 টির বেশি কোড বক্স দেখাবেন বা প্রদর্শন করবেন?

আপনি যদি একই ব্লগার পোস্টে 3 টির বেশি কোড বক্স প্রদর্শন করতে চান তবে কেবল নীচের কোডটি যোগ করুন এবং এর মানগুলো পরিবর্তন করুন। {alertInfo} 

Copy This Code

<!--[ Code Box 3 ]-->
<div class='B4eBox'>
<div class='B4eBoxH'>
<span>Your-Heading-Here</span>
<button id='copy3' class='B4eBoxB' onclick="copyC('copy3','code3')">
<i class='icn'></i>
</button>
</div>
<div id='code3'>
<pre>Your-Code-Here</pre>
</div>
</div>

1. কোড বক্সে নম্বরগুলোকে 4, 5 বা 6 হিসাবে আপনার ইচ্ছা অনুযায়ী নম্বর দিয়ে প্রতিস্থাপন করুন।

 2. Your-Heading-Here এখানে আপনার শিরোনামটি CODE, HTML, CSS, JS (Javascript), Jquery ইত্যাদি দিয়ে প্রতিস্থাপন করুন।

 3. আপনার কাঙ্খিত কোডবক্স নম্বরগুলো দিয়ে সমস্ত নম্বর প্রতিস্থাপন করে নিন।

 এটাই.... আপনার সমস্ত কাজ শেষ হয়ে গেছে!

 উপসংহার:

আপনাকে কি এই আর্টিকেলটি ব্লগার পোস্টে কপি বাটন সহ কোড বক্স যুক্ত করতে সহায়তা করেছে বলে মনে করছেন?  অবশ্যই জানাবেন।  এই টিউটোরিয়ালটি সম্পর্কিত কোন সমস্যা হলে নিচে কমেন্ট করুন এবং শেয়ার করতে ভুলবেন না।{alertSuccess}

আজ এই পর্যন্তই। সবাই ভালো থাকবেন সুস্থ থাকবেন।

ধন্যবাদ।