अपने Blog में Code Box कैसे Add करे - Apne Blog me Code Box kaise Add Kare

अपने Blog में Code Box कैसे Add करे ? यदि आप भी एक ब्लॉगर है और आप Blogspot का इस्तेमाल करते है, तो ये बात आप भली भूति जानते होंगे की हमे Blogger में Wordpress जैसे plugins नही मिलते. 

ऐसे में वे bloggers जिनका ब्लॉग Coding से सबंधित होता है, उन्हें काफी मुश्किलो का सामना करना पड़ता है.

पर चिंता करने जैसी कोई बात नही है, क्योंकि आज के पोस्ट में हम आपको बताने वाले है की आप अपने blogspot के ब्लॉग में Code Box का कैसे इस्तेमाल कर सकते है

अपने Blog में Code Box कैसे Add करे - Apne Blog me Code Box kaise Add Kare- Shi Rasta
Apne Blog me Code Box kaise Add Kare

इसके साथ-साथ हम इससे जूरी जानकारी जैसे की Code Box क्या होता है, Blog Post में Code Box का Use क्यों करना चाहिए, ब्लॉग में Code बॉक्स कैसे Add करे तथा code बॉक्स के फायदों के बारे में भी बात करेंगे.

तो चलिए बिना और समय बर्बाद करे, जानते है इसके बारे में  


कोड बॉक्स क्या होता है 

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


Read Also:

Blog Post में Code Box का Use क्यों करे 

अगर हम अपने ब्लॉग में coding से जुडी जानकारी share करते है, तो ऐसे में हमे अपने ब्लॉग में कोड बॉक्स का इस्तेमाल करना चाहिए क्योंकि इससे users को कोड समझने में आसानी होती है, वो आसानी से जान पाते है की article के किस भाग में कोड दिया गया है.

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

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

तो चलिए अब जानते है हम अपने ब्लॉग में कोड बॉक्स में कैसे Add कर सकते है 

Read Also:


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 को ओपन करे                                                                             
    Apne Blog me Code Box kaise Add Kare

  2. अब आप जो कोड users के साथ share करना चाहते है उसे Source Code वाले Box में paste कर दे
  3. Language में python ही रहने दे , अब Highlight वाले button पर click करे                                               
    अपने Blog में Code Box कैसे Add करे
    Code Box

  4. अब Html Box के अंदर जो भी कोड है उसे copy कर ले                                                                             
    अपने Blog में Code Box कैसे Add करे  - Shi Rasta

  5. इतना करने के बाद अपने ब्लॉगर के डैशबोर्ड में जाये, और जिस पोस्ट में इसका इस्तेमाल करना चाहते है. उसे 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> के उपर 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:

Conclusion

तो दोस्तों, अब तक आपको कोड बॉक्स से जुड़ी सारी जानकारी जैसे की ( Code Box क्या होता है, code box क्यों इस्तेमाल करना चाहिए, कोड बॉक्स के फायदे तथा अपने ब्लॉग में Code Box कैसे ऐड करे ) इत्यादि मिल गयी होगी 

इसके बावजूद अगर आपको किसी कोड बॉक्स से सबंधित किसी तरह की समस्या आती है, तो बिना किसी हिचकिचाहट Comment करे, हम आपके doubt को जल्द से जल्द Solve करने की कोशिश करेंगे 

आज के Post को अपने Blogger friends और Relatives के साथ Share करना न भूले क्योंकि ज्ञान बाँटने से बढती है, और संग्रह करने पर घटती है. में मिलता हूँ आप सब से अगले पोस्ट में तब तक के लिए स्वस्थ रहे और मुस्कुराते रहे.

मेरा देश! मेरा गर्व! मेरा कर्तव्य!   

टिप्पणी पोस्ट करें

9 टिप्पणियां

  1. aapke Jaisa mera nhi ho paa rha hai pls aap apna wala dijiye n bhai

    जवाब देंहटाएं
    उत्तर
    1. Aap Igniel fiksioner version 2 ka istemaal kre, me v whi use krta hu. Mujhe lgta h aapne fiksioner V3 download kr liya hoga.

      हटाएं
  2. उत्तर
    1. aap mujhe apne gmail se mail kre me apko whi pr ye theme de dunga. Apko mera email address contact us page me mil jayega.

      हटाएं
  3. khushwantaulakh49@gmail.com aap mujh ko bhi apna theme de dijiye aapka bahut abhari huga brooo..

    जवाब देंहटाएं