आज मै आपको Blogger के Post में Code Box कैसे Add करे? की जानकारी देने वाला हूॅ। आप Blogging से जुड़ post लिखते है और आपकी website blogger.com से बनी है तो आपको अपने Website में Code Box को लगाने की बहुत सी जरूरत पड़ती होगी है क्युकी wordpress से बनी Website पर तो आपको Code Box Add करने के लिए Plugin को Install कर सकते है लेकिन

Blogger पर कोई Plugin होता नहीं है अगर आप blog में बिना CSS या Java Script या Coding के इस्तेमाल से कोई Code को Direct Paste करते है तो आपके visitors को Code Copy करने और समझने में तकलीफ उठानी पडती है जिससे आपके Website की Ranking पर प्रभाव पड़ता है इसलिए आप Blogger में Code Box का इस्तेमाल कर के visitors के लिए आकर्षक तथा visitors को Code Copy करने में और समझने में तकलीफ ना पड़े ऐसा बनाना चाहते है , तो आप बिल्कुल सही Website पर आए है क्यू की हमारी Hindi Me World की टिम आपकी परेशानियां सूलझानें मे सक्षम हैं। तो चलिए अब जानते है की blogger के post में code box केसे add करते है?।

Blog Me Code Box Kaise Add Kare?


Blogger के Post में Code Box कैसे Add करें ?
Blogger के Post में Code Box कैसे Add करें ?


Blogger के लिए हम 2 तरह की Code Box लगा सकते है 

    • Simple Code Box
    • Stylish Code Box

    चलिए हम आपको  दोनो code box के बारे में बता रहे हैं आपको जो भी code box अच्छा लगे वो code box अपने blog में लगाना। वैसे हम सब का पसंद Style Code Box ही है लेकिन आपको कौनसा Code Box पसंद है हमे Comment Box में जरूर बताए। 

    1. Simple Code Box कैसे Add करे ?

    Simple Code Box लगाना Blogger में बहूत ही आसान है 

    Step1– आप नीचे दिए गए code को copy कर ले ।

    Step2– अपने blog के Dashboard में जाए। 

    Step3– जिस Post में आपको Code Box लगाना है उस Post को open करे।

    Step4– और Compose View से  HTML View पर Click करे।

    Step5– अब आपको अपनी पोस्ट में जहां पर code box लगाना है वहां ये code paste कर दीजिए

    सबसे पहले नीचे दिऐ गए code को copy कर ले👇👇

    <form><textarea rows="5" cols="40" onClick=select() readonly>Your Code Text Paste.</textarea></form>
    Blogger के Post में Code Box कैसे Add करें ?
    Blogger के Post में Code Box कैसे Add करें ?


    Step6– “Your Code Text Paste” की जगह अपना
    Code Paste कर दिजिए।




    2. Stylish Code Box कैसे Add करे ?

    Stylish Code Box में आप अपने visitors को आसानी से समझाने के लिए अपने code को कुछ शब्दों को Color करके समझा सकते है जैसे मैने ऊपर दिए गए Simple Code Box मे “Your Code Text Paste” को Red colour का किया है चलिए अब हम बताते है Blogger के Post में Stylish Code Box कैसे लगाएं?

    Step1– सर्वप्रथम आपको नीचे दिया गया Code Copy कर लेना हैं।



    CSS & Java Script  
    <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>

     

    Step2– अब आपको Blogger के Dashboard में जाकर Theme पर Click करना है

    Step3– Theme पे click करने के बाद आपको Edit HTML पर click करना है

    Step4– अब पूरे Theme के Coding में कही भी click कर लेना है




    Step5– Click करने के आपको Keyboard में CTRL+F Click करना है जिससे search box open हो जाएगा और search box में </body> search कीजिए कि जगह।

    Step6– अब आपको </body> इस Code के ऊपर वाली Line में copy किया हुआ code Paste कर देना है बिल्कुल ऊपर दिखाई गए photo की तरह।

    Step7– अब आपको Theme को Save Theme पर click करके Save कर लेना है

    Step8– अब आपको अपनी blog post में जाना है।

    Step9– आपको नीचे 👇👇 दिए गए Code को copy करना है 

    HTML 
    <!--[ 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>


    Step10– आपको Post में जहाॅ पर code box add करना है वहाॅ पर code Paste कर दिजिए

     Note:- अब आपके Blog में Code Box Add‌ हो गया होगा और यदि Blogger के Post में code box add करने में कोई problem होती है तो comment box में comment करके हमे अपनी problem जरूर बताएं ताकि हम उसका solution देने की हर सम्भव प्रयास करेंगे। 

    यह भी पढ़ें👇