हमारे ब्लॉग का design बहुत important होता है. अगर आप ये सोचते हैं कि हम अपने without better design किये site में अच्छी traffic ला सकते हैं तो यह possible नही है. जब हमारे site की design better होती है तो users पर ज्यादा attract पड़ता है. इसीलिए हम इस post में आपको बताने वाले हैं कि wordpress में code snippet box को css से better look कैसे देते हैं।

अभी के समय मे किसी पर भी विश्वास करना possible नही है. पैसे के लिए आदमी बहुत कुछ कर सकता है. यही कारण है कि सभी professional ब्लॉगर अपने ब्लॉग में ज्यादा plugin use नही करता है. उन्हें ये पता होता है कि ज्यादा plugin use करने से हमारे ब्लॉग की performance खराब हो सकती है और security lost हो सकता है।

मेने बहुत से लोगों को देख है कि जब वो अपना ब्लॉग बनाता है तो बहुत सारे plugin को install कर देता है और जब ब्लॉग का loading speed slow होने लगता है तो उसका सारा दोष hosting वाले को देता है. में ऐसे भाइयों से कहना चाहता हूँ कि हर hosting company चाहती है कि वो लोगों को better से better service provide करें. इसलिए सारा दोष उसपर देने से पहले कभी अपने ब्लॉग को भी ठीक से देखिए।

Bye the way, हम इस post में बात करने वाले हैं कि हम code box को better look कैसे दे सकते हैं. मुझसे बहुत से लोगों ने पूछा था कि आप मुझे अपने code box का css भेजो तो इसलिए में यह post लिखा रहा हूँ. सबसे पहले तो में आपको ये बता देता हूँ कि मेरे ब्लॉग में जो code box होती है वो बिल्कुल simple है.

WordPress code box को stylish कैसे बनाये।

अब हम आपको बताने वाले हैं कि wordpress ब्लॉग के post में code box को stylish कैसे बनाये. सबसे पहले हम आपको ये बात बता देते हैं कि अगर आप किसी highter plugin का use करते हो तो इससे आपके site की loading पर बहुत बुरा impact पड़ेगा. लगभग बहुत से ब्लॉगर अपने site में highlighter plugin का use नही करते हैं.

In my case, मेने starting में crayon syntax highlighter plugin use किया था but मुझे कुछ time बाद realize हुआ की इससे मेरी site की performance काफी खराब हो गयी है तो इसलिए मैंने इसका use करना बंद कर दिया और custom css से design करके ही अपने post में code show कराता हूँ. अगर आप भी अपने ब्लॉग में बिना plugin के code index करना चाहते हो तो हम आपको नीचे इसका full process बता रहे हैं।

Add CSS for better Look:

सबसे पहले हम ये जान लेते हैं की css से code box को stylish कैसे बनाये. हमारे ब्लॉग में जिस तरह के design का code box है, उसी तरह का code box आप भी बना सकते हो. इसके लिए आपको कुछ css code को अपने ब्लॉग में add करना होगा. अगर अपने मेरे ब्लॉग का codebox नही देखा है तो में आपको नीचे इसका डेमो दिखा देता हूँ।

इस तरह के codebox को आप भी अपने ब्लॉग में भी दिख सकते हो. इसके लिए सबसे पहले आप नीचे दिए CSS को copy कर लीजिए।

/** Make Code Box Stylish By BloggingHindi **/
pre{-webkit-user-select:text;overflow:auto;font-size:smaller;font-family:monospace;}pre{resize:auto;padding:1em;white-space:pre-wrap;word-wrap:break-word;font-style:italic;font-weight:600;background:#222;color:#fff;box-shadow:inset 0 0 3px 4px #3c3d39,3 2 20px rgba(0,0,0,.5);border:2px solid #0b0c0a;}

अब आप अपने wordpress ब्लॉग में login करके Dashboard » Appearance » Editor » Style.css में copy किये code को paste करके save कर लीजिए. इसके और बात का ध्यान रखें कि आपके theme की style.css में जो pre{} पहले से है, उसको remove कर देना वरना sytax error आएगी।
अगर आपका ब्लॉग Blogger पर है तो आपको अपने template के <b:skin> के under ही code add करना होगा।

Post में code कैसे Add करें:―

अब अपने अपने ब्लॉग में css को add कर दिया है. अब आप post में html, css, php, Javascript, etc. code को show करा सकते हो. इसके लिए हम आपको नीचे process बता देते हैं.

अगर आप अपने post में code show कराना चाहते हो तो इसके लिए सबसे पहले आपको code को encode करना होगा. अगर आप code को encode किए बिना post में add करोगे तो run हो जाएगी. अगर आप code encode करना चाहते हो तो हमारे HTML Encoder Tool में जाएँ और वहाँ पर अपने code को encode कर लीजिए।

बिना encode किये हुए code इस तरह होगा।

<html>
<head>
<body>
<h1>This is an example </h1>
</body>
</head>
</html>

Encode करने के बाद इस तरह हो जाएगा:―

&lt;html&gt;
&lt;head&gt;&lt;body&gt;
&lt;h1&gt;This is an example &lt;/h1&gt;
&lt;/body&gt;
&lt;/head&gt;
&lt;/html&gt;

अब encode किये हुए code के पहले <pre> और last में </pre> ऐड कर दीजिए और post में add कीजिए. उसके बाद post में आपका code show होने लगेगा।

इस तरह से आप अपने post में code को बिना किसी plugin के show कर सकते हो. अगर आपको कोई सवाल पूछना है तो नीचे comment करे. इस post को social media में share जरूर करें।