Blog में Code Box कैसे Add करे ?

नमस्कार दोस्तों, आज की इस पोस्ट में आप जानने वाले है, की आप किस तरह से अपने ब्लॉग में कोड बॉक्स बॉक्स ऐड कर सकते है | अगर आपका ब्लॉग कोडिंग से सबंधित है, तो आपको कई बार अपने पोस्ट में HTML, CSS, JavaScript इत्यादि के कोड ऐड करने होते है |

पर ये बात तो हम सभी जानते है की ब्लॉगर में हमे बोहोत ही कम Options देखने को मिलते है | वर्डप्रेस में कोड बॉक्स ऐड करने के लिए आपको कई सारे Plugins मिल जाते है, जिससे की सिर्फ एक क्लिक में ही आपके पोस्ट में कोड बॉक्स ऐड हो जाता है |

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

पर ब्लॉगर पर कोड बॉक्स ऐड करने के लिए आपको खुद ही ये काम करना पड़ता  है | दोस्तों, आज की पोस्ट में हम आपको कोड बॉक्स ऐड करने के 3 तरीको के बारे में बताने वाले है, जिससे पढने के बाद आप भी बड़े आराम से अपने ब्लॉग पोस्ट में कोड बॉक्स ऐड कर पायेंगे |

तो दोस्तों, बिना समय व्यर्थ करे चलिए जानते है की ब्लॉग में कोड बॉक्स कैसे ऐड करे |

Code Box क्या होता है ?

Code Box एक ख़ास तरह का बॉक्स होता है, जिसमे हम अपने codes डालते है, ताकि Users को Code पढने और समझने में आसानी हो |

Blog Post में Code Box का इस्तेमाल क्यों करे ?

अगर हम अपने ब्लॉग में Coding से जुडी जानकारी share करते है, तो ऐसे में हमे अपने ब्लॉग में कोड बॉक्स का इस्तेमाल करना चाहिए |

क्योंकि इससे users को कोड समझने में आसानी होती है, वो आसानी से जान पाते है की article के किस भाग में कोड दिया गया है |

इससे वो उस कोड को आसानी से copy भी कर पाएंगे और वो जिस चीज़ के लिए आपके ब्लॉग पर आये थे वो उनको जल्द ही मिल जायेगा |

इसके साथ साथ कोड बॉक्स का इस्तेमाल करना हमारा ब्लॉग के User Interface को भी Improve करता है, और हमारे ब्लॉग को एक Professional look भी देता है |

Blog में Code Box कैसे Add करे ?

वैसे तो अपने ब्लॉग में कोड बॉक्स Add करने के बहुत सारे तरीके है, पर उनमे से कुछ तरीके हमारे ब्लॉग के लिए खतरनाक भी है | अगर आप किसी भी ऐसे वैसे कोड का इस्तेमाल करेंगे, तो आपके ब्लॉग पर Mobile Responsive बगेरा के Errors आ जायेंगे |

ऐसे में आपके ब्लॉग के रैंकिंग पर भी असर पड़ेगा, नतीजन आपके ब्लॉग की ट्रैफिक में भी गिरावट आएगी | पर चिंता की कोई बात नही है, क्योंकि आज हम आपको ऐसे 3 तरीके बतायेंगे, जो की पूरी तरह से Safe है और जो हम खुद अपने ब्लॉग पर भी follow करते है   |

1. Blog में Simple कोड बॉक्स ऐड करे

इस मेथड में आप सिर्फ एक सिंपल HTML कोड का इस्तेमाल करेंगे, जिसे की अपने पोस्ट में ऐड करने के बाद आपके पोस्ट में कोड बॉक्स ऐड हो जायेगा |

Step 1: नीचे दिए गये HTML कोड को Copy करे, और अपने ब्लॉगर के डैशबोर्ड में जाकर उसे HTML View में Paste कर दे |

Blog में Code Box कैसे Add करे
<pre style="background: rgb(238, 238, 238); border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: initial; border-left-style: initial; border-radius: 10px; border-right-color: initial; border-right-style: initial; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 5px 0px 0px; color: #444444; font-family: &quot;Courier New&quot;, Courier, monospace; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 12px; vertical-align: baseline;"><span style="font-size: 13px;">Replace the text with codes</span></pre><p>Start write the next paragraph here </p>

Step 2: अब आप Compose View पर Switch करे और Replace the text with codes को मिटा, आप अपना कोड पेस्ट कर दे | जिसे की आप कोड बॉक्स के अंदर रखना चाहते है |

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

Step 3: अब आपके पोस्ट में कोड बॉक्स ऐड हो चूका है, आप अपने पोस्ट को पब्लिश कर सकते है |

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

चुकी इस वाले मेथड में सिर्फ HTML का इस्तेमाल किया गया है, इसके कारण आपके ब्लॉग के स्पीड पर भी फर्क नहीं पड़ता |

इसकी सबसे अच्छी बात ये है की इस कोड बॉक्स को ऐड करने के लिए आपको अपने ब्लॉग के Theme में कुछ भी बदलने की जरुरत नहीं पड़ती |

आप चाहे तो इसमें भी Background Colour, Border Colour और Code Colour इत्यादि बदल सकते है | इसके लिए बस आपको HTML Code में Colours की RGB Value को बदलना है |

2. Blog में CSS Style Code Box Add करे 

Step 1: सबसे पहले hilite.me ya Pinetools को ओपन करे |

Step 2: अब आप जो कोड users के साथ share करना चाहते है उसे Source Code वाले Box में paste कर दे |

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

Step 3: जिस Language में आपका कोड है, उसे Select कर ले जैसे की HTML,CSS, Python इत्यादि और फिर Highlight वाले button पर click करे |

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

Step 4: अब Html Box के अंदर जो भी कोड है उसे copy कर ले |     

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

Step 5: इतना करने के बाद अपने ब्लॉगर के डैशबोर्ड में जाये, और जिस पोस्ट में कोड बॉक्स ऐड करना चाहते है, उसे html view में खोले और जहाँ पर आप कोड डिस्प्ले करवाना चाहते हो, वह पर Copy किये गये कोड को paste कर दे और पोस्ट को पब्लिश कर दे |

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

आपके ब्लॉग में एक CSS Style box ऐड हो जायेगा जो की पूरी तरह से Mobile-friendly रहेगा और users को एक अच्छा experience देगा |  

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

इस कोड बॉक्स को भी ऐड करने के लिए, आपको अपने Theme में कुछ भी फेर-बदल करने की जरुरत नहीं |

3. Blog में Syntax Highlighter Code Box Add करे 

अब आखिर में हम आपको Syntax Highlighter Code Box को ऐड करने के बारे में बतायेंगे जो की सबसे stylish कोड बॉक्स होता है |

Step 1: सबसे पहले अपने ब्लॉगर account में login करे फिर dashboard के हेल्प से themes के option में जाये और एडिट html पर click करे |

Step 2: अब नीचे दिए गये कोड को </style> या ]]></b:skin> के उपर paste कर दे |

Blog में Code Box कैसे Add करे
.post-body pre {
  background-color: #292E34; /* Change Background Colour */
  border-left: 5px solid #008c5f; /*Left Border Colour */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; 
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Step 3: अब theme को save कर ले |

आपको जिस भी पोस्ट बॉक्स ऐड करना हो उसे html view में ओपन करे, और जहाँ पर भी कोड बॉक्स डिस्प्ले करना हो वहाँ पर नीचे दिया गया कोड paste कर दे |

<pre><code>
  Enter Your Code 
</pre></code>

और Enter Your Code की जगह पर आप जो कोड दिखाना चाहते हो, वो paste कर दे |

इतना करने के बाद आपके ब्लॉग में एक जबरदस्त कोड बॉक्स ऐड हो जायेगा |

Blog में Code Box इस्तेमाल करने के फायदे

  • यह आपके ब्लॉग को एक Professional look देता है |
  • Users को एक ही जगह पर मिल जाता है |
  • कोड पहचाननें में आसानी होती है |
  • कोड को एक ही बार में copy किया जा सकता है | 
  • User Experience Improve होता है |

आपने क्या सिखा

तो दोस्तों, मुझे उम्मीद है की आज की पोस्ट को पढ़ने के बाद आप जान गये होंगे की Blog में Code Box कैसे Add करे |

आप उपर दिए गये 3 Methods में से किसी का भी इस्तेमाल कर सकते है | अगर आप मुझसे पूछेंगे की मैं किस Method का इस्तेमाल करता हूँ |

तो मैं अपने ब्लॉगर ब्लोग्स पर ज्यादातर पहले मेथड का इस्तेमाल करता हूँ, क्योकि वो इस्तेमाल करने में काफी आसान और सहज है | और मेरी माने तो आपको भी उसी का इस्तेमाल करने चाहिए | इससे आपका ही समय बचेगा |

अगर आपको ये पोस्ट अच्छी लगी हो तो, इसे अपने ब्लॉगर दोस्तों के साथ Share करना न भूले | ताकि उनको भी इससे मदद मिल सके |

मैं मिलता हूँ आपसे ऐसे ही किसी और पोस्ट के साथ, तब तक के लिए जहा भी रहे कुछ नया और अनोखा सीखते रहे |

Leave a Comment

Your email address will not be published. Required fields are marked *

error: Content is protected !!