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 April 11, 2022 by Md Arshad Noor 2 Comments

हमारे ब्लॉग का 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

  • WordPress Theme Select Karne Se Pahle 8 Chize Consider Kare

    WordPress Theme Select Karne Se Pahle 8 Chize Consider Kare

  • Top 10 Big Companies Jinki Website WordPress Par Hai

    Top 10 Big Companies Jinki Website WordPress Par Hai

  • Cornerstone Content Kya Hai? Cornerstone Content Kaise Likhte Hai?

    Cornerstone Content Kya Hai? Cornerstone Content Kaise Likhte Hai?

  • WordPress Me Comment Ki Minimum Aur Maximum Length Set Kare

    WordPress Me Comment Ki Minimum Aur Maximum Length Set Kare

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

Google Keyword Ranking Check karne ke liye 5 Best Website

Website Ko User Friendly Banane Ke Liye 5 Secrets

PHP Version Ko Upgrade Karke Site Speed Ko 20% Increase Kare

WordPress Toolbar/Adminbar Ko Hide Aur Customize Kaise Kare

Adsense Account Kaise Banaye [Step By Step]

Blogging Ke 10 Important Myths ke Bare Me Apko Pata Hona Chahiye

Hostlelo Review – A Great Solution for New Bloggers

QR Code Kya Hai? QR Code Kaise Banaye aur Scan Kaise Kare

Blog Me Live Cricket Score Widget Kaise Add Kare

7 Karn WordPress Me Jyada Plugin Use Nahi Karni Chahiye

Directory Browsing Kya Hota Hai-Isko Disable Karne Ke 2 Tarike

Twitter Account Ko Secure Kaise Rakhe

Blog ko Delete kaise kare aur Delete kiya hua blog wapas kaise laye

About Us

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

SUBSCRIBE OUR NEWSLATTER

हमारे नवीनतम पोस्ट की सूचना एवं उपयोगी सामग्री प्राप्त करने के लिए हमसे जुड़ें

Posts for WP Users:

WordPress Par 20 Types Ke Websites Bana Sakte Hai

CPanel Dwara Blog Ka Backup Kaise Lete Hai

Contact Form 7 Ke CSS & JS Ko Only Contact Us Page Me Load Kaise Kare

cPanel (FileManager) Me Htaccess File Show Kaise Karaye

WordPress Theme Select Karne Se Pahle 8 Chize Consider Kare

More Posts from this Category

DMCA.com Protection Status

Recommended For You

WordPress Theme Change Karne Se Pahle 10 jaruri Kaam Kare

Blog Me Meta Tag with Advanced Future Kaise Add Kare

Blog Post Ki Heading Ko Stylish Design Kaise Kare. Without Plugin

Blogging Apke Life Ko Kaise Change Kar Sakti Hai

No-Follow Backink Ke 5 Fayde (Benefits) Apko Janna Chahiye

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

Copyright © 2021 - All rights reserved. AboutContactSitemapDisclaimer