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

Code Box को हम अपनी post के अंदर html, css और JavaScript को highlight करने के लिए add करते हैं ताकि हमारे readers किसी भी code को आसानी से copy कर सके | अगर आप अपने blog पर coding से सम्बन्धित article लिखते है तो आपको सबसे बड़ी problem code को show करने में आई होगी | इसके अलावा आपके readers को भी code को copy करने में समस्या आती है क्योंकि जब वे code को copy करने के लिए select करते हैं तो वे code के साथ-साथ आपके content को भी copy कर लेते हैं | जिसका result होता है code का सही से काम न करना |

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

वैसे तो हम अपने blog पर code box का इस्तेमाल इसलिए करते हैं ताकि हमारा code साफ-सुथरा दिखाई दे और हमारी post के content के साथ mix न हो | परन्तु कई बार  हमें अपनी post में ऐसे code को इस्तेमाल करना पड़ता है जो की copyright होता है जिसके कारण हमारा content भी copyright हो जाता है और हमे अपनी post के लिए google से ranking मिलने की बजाए penalty मिलती है और इस समस्या का हल हम केवल code block का इस्तेमाल करके निकाल सकते हैं |

इस प्रकार आप देख सकते हैं की इस feature को blog में add करने के दो फायदे हैं -
पहला Code को highlight करने के लिए
दूसरा copyright penelty से बचने के लिए

अगर आपको लगता है की ये feature आपके blog में कुछ quality add कर सकता है तो निचे दिए गए step को follow करें -

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

अगर आप एक WordPress blogger हैं तो WordPress Code Plugin का इस्तेमाल करके आसानी से code block को अपने blog में add कर सकते हैं | परन्तु BlogSpot पर इस feature को add करने के लिए हमे template को edit करना पड़ेगा |

STEP 1.  अपने BlogSpot blog के dashboard पर जाएँ और वहां से Template >>Edit template पर क्लिक करें

STEP 2.  Edit template पर click करने के बाद एक code editor खुलेगा उसके अंदर click करके Ctr+F दबाए

STEP 3.  Ctr+F दबाने के बाद आपको एक छोटा सा search box दिखाई देगा उसमे  ]]></b:skin>  type करके enter दबाए |

STEP 4.  आपको जहाँ पर भी  ]]></b:skin>  दिखाई दे उसके just ऊपर निचे दिया गया code paste करें |


                                         .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: 10px 10px 10px; width: 90%; } .code:hover { background: #FAFAFA; background-repeat:no-repeat; }


STEP 5.  Code paste करने के बाद  Save template पर क्लिक करें |

STEP 6. Template को save करने के बाद आपको कुछ भी edit करने की जरूरत  नही है बस अब आप जब भी कोई post लिखे और उसमे किसी भी code को highlight करना हो तो उस code को नीचे दिए गए tag के अंदर ही रखे |

NOTE : Code को paste करने से पहले Compose की जगह HTML को select करें  ( निचे pic देखे )

 
<div class ="code">

code को यहाँ पर paste करना है |

</div> 

अब post को save करके दुसरे browser में open करके देखिए आपको अपनी post पर code box दिखाई देगा अगर आपको कोई समस्या आए तो मुझे comment section में बताए मै 24 hour के अंदर आपकी समस्या को सुलझाने का प्रयास करूंगा | धन्यवाद !
 
हमारे facebook page को like जरुर करे |