ব্লগারের লেখা কপি করার html কোড

যদি আপনি আপনার ব্লগে কোডিং সম্পর্কিত পোস্ট করতে চান বা কোন কোড দিতে চান তবে আপনার ব্লগ পোস্টে HTML কপি কোড বক্স ব্যবহার করতে হবে। কারণ এটি আপনার ব্লগ পোস্ট থেকে আলাদাভাবে আপনার কোড দেখাবে, যাতে ব্লগের দর্শক সহজে কোডটি কপি করতে পারে। এটি ব্লগটিকে পেশাদার দৃষ্টিভঙ্গি দেয় এবং সাইটি দেখতেও অনেক ভালো লাগে।

এই আর্টিকেলে আমি আপনাকে ব্লগার পোস্টে HTML কপি কোড বক্স যুক্ত করার সহজ পদ্ধতি দেখিয়ে দেওয়ার চেষ্টা করব।

ব্লগে কিভাবে html কপি কোড বক্স তৈরী করবেন ?

ধাপ ১ : প্রথমে নিচের css কোডটি কপি করে আপনি আপনার ব্লগার ডেসবোর্ডে চলে আসুন তারপর THEME অপশনে গিয়ে Edit HTML এ চলে আসুন । তারপর </body> Tag সার্চ করে </Body> ট্যাগের ঠিক উপরে css কোডটি পেস্ট করে দিন ।

Copy Now

<style>
  .K2_CBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;padding:10px;margin:30px 0 30px}
  .K2_CBox .CB_Heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
  .K2_CBox .CB_Heading span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
  .K2_CBox .C_box_main{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#004cbd;transition:all .3s ease;-webkit-transition:all .3s ease}.K2_CBox .C_box_main:hover{opacity:.8}.K2_CBox .C_box_main .CBox_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}
  .K2_CBox .C_box_main.copied{background:#2dcda7}
  .K2_CBox .C_box_main.copied .CBox_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>")}
  .K2_CBox pre{margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; white-space: pre-wrap;}
  .K2_CBox pre::before, .K2_CBox pre::after{content:''}
  .dark-Mode .K2_CBox{background:#2d2d30}.dark-Mode .K2_CBox pre{background:#252526;color:#fffdfc}
  .tNtf 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){.tNtf 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 .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
  </style>
<div id='toastNotif' class='tNtf'></div> 
<script>/*<![CDATA[*/ 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("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>

ধাপ ২ : তারপর ব্লগের যে পেজ বা পোস্টে কপি বক্সটি যুক্ত করবেন সেখানে নিচের কোডটি পেস্ট করে দিন এবং XXXXXXXXXXXXXXX এর স্থানে আপনি আপনার যে কোডটি বা লেখা কপি করার জন্য দিবেন সেটি এখানে পেস্ট করে Save করে দিন।

Copy Now

<!--[ Code Box 1 ]-->
  <div class='K2_CBox'>
    <div class='CB_Heading'>
      <span>HTML</span>
      <button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')">
        <i class='CBox_icn'></i>
      </button>
    </div>
    <!--Add Your Parse HTML code Here-->
    <div id='code1'>
      <pre>XXXXXXXXXXXXXXX</pre>
    </div>
  </div>

এই কোড বক্সের সাহায্যে আপনি সহজেই CSS ব্লগের কোডিং, জাভা স্ক্রিপ্ট ইত্যাদি কোড আপনার ব্লগের দর্শকদের সাথে একটি ব্লগ পোস্ট হিসাবে দিতে পারেন। এটি আপনার ব্লগের দর্শকদের সহজেই কোডটি পেতে পারবে এবং কপি করতে পারবে। এভাবে খুব সহজে আপনি আপনার ব্লগে কপি কোড বক্স তৈরী করে নিতে পারবেন।

সকল সিমের প্রয়োজনীয় সব কোড। All sim important code