BloggingHindi - Blogging Aur Internet Ki Sabhi Jankari

  • About Us
  • Contact Us
  • Blogging
  • WordPress
  • SEO

CSS Se WordPress Me CodeBox Ko Stylish Kaise Banaye

Last Updated on January 5, 2021 by Md Arshad Noor 2 Comments

Content Summary

  • WordPress code box को stylish कैसे बनाये।
        • Add CSS for better Look:
        • Post में code कैसे Add करें:―

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

WordPress me code box ko better looking kaise banaye

अभी के समय मे किसी पर भी विश्वास करना 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 नही देखा है तो में आपको नीचे इसका डेमो दिखा देता हूँ।

WordPress me style css se code box ko better look kaise dete hai

इस तरह के 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 जरूर करें।

You May Also Like

  • cPanel (FileManager) Me Htaccess File Show Kaise Karaye

    cPanel (FileManager) Me Htaccess File Show Kaise Karaye

  • Bina Plugin Ke Automatically WordPress Backup Setup Kaise Kare

    Bina Plugin Ke Automatically WordPress Backup Setup Kaise Kare

  • WordPress.com Ki 5 Kamiya – Apko Janna Chahiye

  • WordPress Blog Ki Database Prefix Ko Manually Change Kaise Kare (Without Plugin)

    WordPress Blog Ki Database Prefix Ko Manually Change Kaise Kare (Without Plugin)

About Md Arshad Noor

हेलो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में इस ब्लॉग में रेगुलर नई नई आर्टिकल्स लिखता हूँ. यहाँ पर हम ज्यादातर Blogging, Make Money, SEO, WordPress आदि से सम्बंधित Article मिलेगी. आपको हमारी लेख पसंद आती है तो इसे सोशल मीडिया में शेयर करें। अगर आपको कोई सहायता चाहिए तो कमेंट कीजिए।

COMMENTs ( 2 )

  1. Jitender Singh says

    Sir Kya aap mujhe yeh bata satey hai ki blog mein ko pages hote hai uss main hum site map ka page kasie create karte hai.

    Reply
    • Md Arshad Noor says

      Hi Jitender,
      Aap Hierarchical HTML Sitemap plugin use kar sakte ho.

      Reply

Leave a Reply Cancel reply

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

Please do not spam! otherwise your comment will be removed.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Useful Articles

Ethical Hacker कैसे बने? Ethical Hacking Course की पूरी जानकारी

Super Computer क्या है? इसके फायदे और इसका उपयोग कहाँ होता है?

Khush Nahi Rahne Wale Logo Ki 5 Buri Aadte

Revenue Hits kya hai aur isme Account kaise banaye

Blogspot Blog me Country Specific Redirect Disable kaise Kare

Spam Mail Sender Se Unsubscribe Karke Spam Mail Se Kaise Bache

Google Me Search Karne Ke Top 10 Tips & Trick – [Get Right Results Fast]

Google Search Results Me Blog Ke Sabhi Posts Me Star Rating Kaise Dikhaye

Blog Homepage Me Only Post Title Kaise Dikhaye

Blogging me fail hone ka 10 sabse Bada Karan

Social Media se More Traffic Pane ke Liye 10 Important Tips

Quora Se Blog Ki Traffic Kaise Badhaye? 5 Tips

Blog Post me Keyboard key kaise lagaye

About Us

mdarshadnoorहेल्लो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में अररिया, बिहार का रहने वाला हूँ. मुझे नयी चीजें सीखना-सिखाना बहुत पसंद है. में पिछले 5 सालों से ब्लॉगिंग के फील्ड में हूँ. इस ब्लॉग में आपको ब्लॉगिंग और इन्टरनेट से सम्बन्धित जानकारी मिलेगी.

SUBSCRIBE OUR NEWSLATTER

हमारे ब्लॉग के रेगुलर विजिटर हो तो अभी Subscribe कर लीजिए ताकि आप हमारे नए पोस्ट को सबसे पहले पढ़ पाएँ!

Posts for WP Users:

WordPress Toolbar/Adminbar Ko Hide Aur Customize Kaise Kare

WordPress Me Briefly Unavailable for Scheduled Maintenance Error Fix Kaise Kare

Free Theme Ya Template Use Karne Ke 5 Big Nuksan (Cons)

WordPress Site Ka Password Change Kaise Kare – Easy Method

[Manually] Blog Ki CSS Ko Compress Karke Loading Speed Fast Kare

More Posts from this Category

Recommended For You

India Me Bitcoin Kaise Kharide [Buy Bitcoin]

Blog Me Live Cricket Score Widget Kaise Add Kare

Top 10 Big Companies Jinki Website WordPress Par Hai

Apni Online Presence Build Karne Ke Liye 5 Bacis Tips

Blog Ke Owner Hone Ke Nate 5 Kaam Jarur Kare [Important Tips]

YouTube Channel Ko Promote Karne Ke Liye 10 Tarike

Bank Branch Ka SWIFT Code Kaise Pata Kare? (Nahi Hone Par Kya Kare?)

Blogger Ke Liye Top 10 Templates Sabhi Extra Futures Ke Sath

Politechnic क्या है? पॉलिटेक्निक कैसे करें? पूरी जानकारी

Copyright © 2020 - All rights reserved.AboutContactSitemapDisclaimer