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

दोस्तों क्या आप अपने Blogger Blog Post में Code Box Add करना चाहते हैं तो आप बिल्कुल सही article पढ़ रहे हैं क्योंकि हम इस लेख में आपको बताएंगे कि How to Add Code Box in Blogger Post?

यदि आप Blogger platform का उपयोग करने वाले Blogger हैं तो कुछ ऐसे तरीके हैं जिनका इस्तेमाल कर आप अपने Blogger Blog Post में Code Box Add कर सकते हैं।

यदि आप अपने blog reader के साथ code snippets share करना चाहते हैं तो Blogger Blog Post में Code Box Add करना बहुत ही उपयोगी होता है।

Also Read:-

Blogger Blog Post में Code Box Add क्यों करना चाहिए? 

अगर आप अपने ब्लॉग पोस्ट में blog reader के साथ किसी भी प्रकार का कोड (जैसे Html, Javascript, CSS) शेयर करते हैं तो यह आवश्यक हो जाता है कि आप अपने ब्लॉग पोस्ट में Code Box अवश्य add करें।

क्योंकि अगर आप code box का इस्तेमाल नहीं करते हैं तो blog reader को यह पता नहीं चल पाएगा कि कौन सा code है और कौन सा text और अगर code को user copy करना चाहेगा तो वह उस कोड को आसानी से copy नहीं कर पाएगा।

लेकिन अगर आप अपने ब्लॉग पोस्ट में कोड बॉक्स ऐड करते हैं तो जो भी Html, Javascript और CSS code आप यूजर के साथ शेयर करेंगे वह एक बॉक्स में दिखाई देगा। जिसे यूजर आसानी से कॉपी कर पाएगा इसलिए आपको अपने blog पोस्ट में किसी भी कोड को हमेशा code box में हीं देना चाहिए।

Blogger Blog Post में Code Box Add करने से यूजर पर भी सकारात्मक प्रभाव पड़ता है क्योंकि आपका blog प्रोफेशनल दिखाई देता है।

Blogger Blog Post में Code Box Add कैसे करें? ( How to Add Code Box in Blogger Post )

ब्लॉगर ब्लॉग पोस्ट में कोड बॉक्स ऐड करना बहुत ही असान है। यहां पर हम आपको कुछ तरीके बताने वाले हैं जिनका इस्तेमाल कर आप आसानी से अपने पोस्ट में कोड बॉक्स ऐड कर सकते हैं।

सबसे पहले हम आपको एक आसान तरीका बताने वाले हैं जिसका इस्तेमाल कर आप आसानी से कोड बॉक्स को ब्लॉगर पोस्ट में ऐड कर सकते हैं इसके लिए नीचे दिए गए स्टेप्स को फॉलो करें।

Method 1:- Simple Method to Add Code Box in Blogger Post

  • सबसे पहले hilite.me या pinetools.com वेबसाइट पर जाएं।
  • यहां पर Source code के नीचे बने बॉक्स में वह code पेस्ट करें जो आप अपने ब्लॉगर ब्लॉग पोस्ट में शेयर करना चाहते हैं।
hilite.me
  • इसके बाद Highlight के बटन पर क्लिक करें।
  • अब  एक नया code create हो जाएगा जिसे आपको html के नीचे बने बॉक्स से copy कर लेना है और ध्यान में रखें कि आपको पूरा html code copy करना है।
  • अब आपको ब्लॉगर में उस पोस्ट को post editor में open कर लेना है जिस पोस्ट में आप code add करना चाहते हैं।
blogger html editor
  • अब लेफ्ट साइड में pencil के आइकन पर क्लिक कर post को Html View में open कर लेना है।
  • अब जिस जगह पर आप code box अपने पोस्ट में दिखाना चाहते हैं उस जगह पर कॉपी किए हुए एचटीएमएल कोड को पेस्ट कर देना है।
  • अब आपको फिर से पेंसिल के आइकन पर क्लिक करना है और Compose view में switch कर लेना है।

अब आप देख पाएंगे कि आपके ब्लॉग पोस्ट में एक code box add हो चुका है और उसमें वह कोड भी आ चुका होगा जिसे आप अपने blogger blog पोस्ट में शेयर करना चाहते थे।

अब कोई भी आपके ब्लॉग पोस्ट पर आने वाला यूजर इस कोड को आसानी से कॉपी कर पाएगा।

Method 2:- Use HTML Code to Add Code Box in Blogger Post

जो तरीका अब हम आपको बताने वाले हैं यह भी बहुत ही आसान है इसमें आपको केवल अपने ब्लॉक पोस्ट एडिटर में एक कोड ऐड करना है और आपके ब्लॉग पोस्ट में  कोड बॉक्स ऐड हो जाएगा।

  • सबसे पहले Blogger Dashboard में login करें।
  • इसके बाद उस पोस्ट पर जाएं जिस पोस्ट में आप कोड बॉक्स ऐड करना चाहते हैं।
  • अब पोस्ट एडिटर को HTML View में switch करें और जहां पर आप code box ऐड करना चाहते हैं नीचे दिए गए HTML Code को वहां पर पेस्ट कर दें।
  • अब आपको फिर से compose view में switch करना है और यहां पर आपको कोड बॉक्स दिखाई दे जाएगा उसमें आपको अपना code paste कर देना है।
Use HTML Code to Add Code Box in Blogger Post
  • अब आपको नीचे “start next paragraph” लिखा हुआ दिखाई देगा वहां से आप अपना नेक्स्ट पैराग्राफ लिखना स्टार्ट कर सकते हैं।

इस प्रकार से आप बिलकुल आसानी से html code का इस्तेमाल कर Blogger Blog Post में Code Box Add कर सकते हैं

Method 3:- How to add code box in blogger post with theme edit

 इस तरीके का इस्तेमाल कर आपको अपने blogger theme को edit करना होगा और उसमें एक code insert करना होगा जो हम आपको नीचे देने वाले हैं।

  • ब्राउज़र डैशबोर्ड में लॉगिन करें और theme पर क्लिक करने के बाद edit HTML पर क्लिक करें।
blogger theme edit
  • अब theme editor open हो जाएगा और theme editor में कहीं पर भी क्लिक कर Ctrl + F key press करें।
How to add code box in blogger post
  • इसके बाद ऊपर एक search box open हो जाएगा अब search box में “  ]]></b:skin> ” search करना है।
  • अब आपको “ ]]></b:skin> ” code के ठीक ऊपर नीचे दिए हुए code को पेस्ट कर देना है।
.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }

अब राइट साइड में बिल्कुल ऊपर save icon पर क्लिक कर changes को save कर देना है।

  • अब आपको उस पोस्ट पर जाना है जिस पोस्ट में आप code box add करना चाहते हैं।
  • अब पोस्ट को HTML View में switch कर लेना है और जहां पर आप कोड बॉक्स जोड़ना चाहते हैं उस जगह पर नीचे दिए गए code को पेस्ट कर दे।
<div class="code"> Your Code Here </div>

Note :- “Your Code Here” की जगह पर आप वह कोड डाल दें जो आप code box में user के साथ शेयर करना चाहते हैं।

अब पोस्ट को पब्लिश कर दें या preview button पर क्लिक करके आप देख सकते हैं कि एक बहुत ही सुंदर code box आपके पोस्ट में जुड़ चुका होगा।

दोस्तों इस प्रकार से आप ऊपर दिए गए तीनों मेथड का इस्तेमाल कर अपने ब्लॉगर ब्लॉग पोस्ट में code बॉक्स जोड़ सकते हैं।

आज आपने क्या सीखा?

आज के इस लेख में हमने आपको बताया है कि how to add code box in blogger post. अगर आप भी अपने ब्लॉगर ब्लॉग पोस्ट में कोड बॉक्स ऐड करना चाहते हैं तो हम उम्मीद करते हैं कि आपको यह लेख पसंद आया होगा।

अगर आपको यह लेख पसंद आया हो तो इसे अपने दोस्तों के साथ शेयर करें और उन्हें भी बताएं कि blogger blog post में code box कैसे add करते हैं।

अगर आपको कोड बॉक्स add करने में  किसी भी प्रकार की दिक्कत का सामना करना पड़ रहा है तो आप हमें कमेंट बॉक्स में कमेंट कर सकते हैं हमें आपकी सहायता करने में खुशी होगी।

Kuljinder Singh जो कि इस website का owner है haryana में एक छोटे से विलेज gledwa से है जो kurukshetra का पास पड़ता है। लाइफ मे कुछ कर गुजरने कि चाहत लेकर 2020 मे reliance jio कि job छोड़कर Blogging को ही अपना carrier बनाया।  Read More Click Here

Leave a Comment