How to Add Code Box in blogger post || blogger me code box kaise dale||

 How to Add Code Box in Blogger

Code box in Blogger , blogger me code box kaise add kare , code box add kaise kare , blogger me code box , content box in Blogger 

HOW TO ADD CODE BOX WITH COPY BUTTON IN BLOGGER POST ?

अगर आप भी अपने blogger के post मे code box add करना चाहते हैं तो आप सही जगाह आये है | मैं आपको बताउंगा की अपने blogger की post मे code box कैसे लगाते हैं ?

अगर आप blogger use करते है तो आपको भी पता होणा चाहिए की blogger मे code box कैसे लागते हैं

आप कोनसा भी template blogger मे use करते है तो ये trick हर template pe work होगी |

STEP 1 : COPY CSS CODE AND PASTE IN THEME 

सबसे पहले आपको अपने Theme में CSS के कोड को Apply करना पडेगा। इस के लिये नीचे दिए गए CSS Code को कॉपी किजिए और उसके बाद अपने Blogger Layout में जाइए। इसके बाद आपको सबसे ऊपर Theme Designer option or text दिखाई देगा ऊस पे पर क्लिक करना है। 

अब आपको Advance option दिखाई देगा ऊस पर क्लिक कीजिए । इसमें आपको Scroll Down करके add CSS वाले option choose करना है option select करणे के बाद आपको copy किया हुआ code paste करना है उसके के बाद Save कर दीजिए।

1. In the left menu, click layout.
2. Layout click design ,” click Customize.
3. In the left menu, click Advanced.
4. Click the Down arrow Down arrow and then Add CSS.
5. Add your code, and at the bottom right, click Save.

COPY CSS CODE 

HTML

<p><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>  </p>

Step 2 PASTE HTML CODE IN BLOGGER POST

अब आपको अपने blogger के पोस्ट में Code Box ADD करणे के लिए HTML code को copy करना होगा। इसके बाद आप अपने Post में जाइए, इसके बाद आप HTML View पर क्लिक कीजिए। अब आप HTML Code को उस Place पर Paste करे जहां आप Code Box को Add करना चाहते हैं

1. Open your Post

2. Switch HTML viw

3. Place The Code There You Want

Copy HTML CODE 

HTML

<p><!--[ 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>&lt;p&gt;This is a simple HTML code &lt;/p&gt;</pre>

    </div>

  </div> </p>