अपने Blog में Code Box कैसे Add करे ? यदि आप भी एक ब्लॉगर है और आप Blogspot का इस्तेमाल करते है, तो ये बात आप भली भूति जानते होंगे की हमे Blogger में Wordpress जैसे plugins नही मिलते.
ऐसे में वे bloggers जिनका ब्लॉग Coding से सबंधित होता है, उन्हें काफी मुश्किलो का सामना करना पड़ता है.
पर चिंता करने जैसी कोई बात नही है, क्योंकि आज के पोस्ट में हम आपको बताने वाले है की आप अपने blogspot के ब्लॉग में Code Box का कैसे इस्तेमाल कर सकते है.
इसके साथ-साथ हम इससे जूरी जानकारी जैसे की Code Box क्या होता है, Blog Post में Code Box का Use क्यों करना चाहिए, ब्लॉग में Code बॉक्स कैसे Add करे तथा code बॉक्स के फायदों के बारे में भी बात करेंगे.
तो चलिए बिना और समय बर्बाद करे, जानते है इसके बारे में .
कोड बॉक्स क्या होता है
Code Box एक तरह का बॉक्स होता है, जिसमे हम अपने codes डालते है ताकि Users को Code पढने और समझने में आसानी हो.
Read Also: 99% Bloggers इसी वजह से फ़ैल होते है – Why Do Most Bloggers Fail
Blog Post में Code Box का Use क्यों करे
अगर हम अपने ब्लॉग में coding से जुडी जानकारी share करते है, तो ऐसे में हमे अपने ब्लॉग में कोड बॉक्स का इस्तेमाल करना चाहिए क्योंकि इससे users को कोड समझने में आसानी होती है, वो आसानी से जान पाते है की article के किस भाग में कोड दिया गया है.
इससे वो उस कोड को आसानी से copy भी कर पाएंगे और वो जिस चीज़ के लिए आपके ब्लॉग पर आये थे वो उनको जल्द ही मिल जायेगा.
इसके साथ साथ कोड बॉक्स का इस्तेमाल करना हमारा ब्लॉग के User Interface को भी Improve करता है और हमारे ब्लॉग को एक Professional look भी देता है.
तो चलिए अब जानते है हम अपने ब्लॉग में कोड बॉक्स में कैसे Add कर सकते है.
Read Also:
Backlink क्या है और अच्छे Backlink कैसे बनाये
Apne Blog me Code Box kaise Add Kare
वैसे तो अपने ब्लॉग में कोड बॉक्स Add करने के बोहोत सारे तरीके है पर उनमे से कुछ तरीके हमारे ब्लॉग के लिए खतरनाक है, अगर आप भी किसी भी ऐसे वैसे कोड का इस्तेमाल करेंगे तो आपके ब्लॉग पर Mobile Responsive बगेरा के errors आ जायेंगे.
ऐसे में आपके ब्लॉग के रैंकिंग पर भी असर पड़ेगा नतीजन आपके ब्लॉग की ट्रैफिक में भी गिरावट आएगी. पर चिंता की कोई बात नही है क्योंकि आज हम आपको ऐसे 3 तरीके बतायेंगे जो की पूरी तरह से safe है और जो हम खुद अपने ब्लॉग पर भी follow करते है .
Method 1 – Simple Code Box
यह अपने ब्लॉग में Code Box Add करने का सबसे आसान तरीका है
> अपने Blogger account में login कर ले
> अब आपको जिस पोस्ट में इसका इस्तेमाल करना है उसे html view में ओपन करे ले
> अब आपको जहाँ पर कोड बॉक्स लगाना हो, वहाँ पर ये नीचे दिया गया कोड copy कर के paste कर दे
> “Enter Your Code” की जगह पर जो कोड आप लगाना चाहते है वो paste कर दे.
<form><textarea rows="5" cols="40" onClick=select() readonly>Enter Your Code.</textarea></form>
आपके ब्लॉग में Simple कोड बॉक्स Add हो गया, अब हम आपको थोड़े stylish code box add करने के बारे में बतायेंगे
Method 2 – CSS Style Code Box
1. सबसे पहले hilite.me ya Pinetools को ओपन करे.
2. अब आप जो कोड users के साथ share करना चाहते है उसे Source Code वाले Box में paste कर दे
3. Language में python ही रहने दे , अब Highlight वाले button पर click करे
4. अब Html Box के अंदर जो भी कोड है उसे copy कर ले.
अपने Blog में Code Box कैसे Add करे – Shi Rasta
इतना करने के बाद अपने ब्लॉगर के डैशबोर्ड में जाये, और जिस पोस्ट में इसका इस्तेमाल करना चाहते है. उसे html view में खोले और जहाँ पर आप कोड डिस्प्ले करवाना चाहते हो, वह पर copy किये गये कोड को paste कर दे और पोस्ट को पब्लिश कर दे
आपके ब्लॉग में एक CSS Style box ऐड हो जायेगा जो की पूरी तरह से mobile-friendly रहेगा और users को एक अच्छा experience देगा.
Method 3 – Syntax Highlighter Code Box
अब आखिर में हम आपको Syntax Highlighter Code Box को ऐड करने के बारे में बतायेंगे जो की सबसे stylish कोड बॉक्स होता है.
सबसे पहले अपने ब्लॉगर account में login करे फिर dashboard के हेल्प से themes के option में जाये और एडिट html पर click करे.
अब नीचे दिए गये कोड को </style> या ]]></b:skin> के उपर ke line pe paste कर दे.
.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; /* warna huruf */
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
}
अब 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 होता है
Read Also:
अपने Blog के लिए SEO friendly Article कैसे लिखे
Conclusion
तो दोस्तों, अब तक आपको कोड बॉक्स से जुड़ी सारी जानकारी जैसे की ( Code Box क्या होता है, code box क्यों इस्तेमाल करना चाहिए, कोड बॉक्स के फायदे तथा अपने ब्लॉग में Code Box कैसे ऐड करे ) इत्यादि मिल गयी होगी
इसके बावजूद अगर आपको किसी कोड बॉक्स से सबंधित किसी तरह की समस्या आती है, तो बिना किसी हिचकिचाहट Comment करे, हम आपके doubt को जल्द से जल्द Solve करने की कोशिश करेंगे.
आज के Post को अपने Blogger friends और Relatives के साथ Share करना न भूले क्योंकि ज्ञान बाँटने से बढती है, और संग्रह करने पर घटती है. में मिलता हूँ आप सब से अगले पोस्ट में तब तक के लिए स्वस्थ रहे और मुस्कुराते रहे.
मेरा देश! मेरा गर्व! मेरा कर्तव्य!