अपने ब्लॉग पर कोड के लिए सीएसएस शैली

सीएसएस

मेरे एक मित्र ने मुझसे पूछा कि मैंने अपने अंतिम ब्लॉग प्रविष्टि पर कोड क्षेत्र कैसे बनाए हैं। मैं वास्तव में एक शैली का उपयोग करते हुए कोड क्षेत्र को 'फेक' करता हूं। ब्लॉगर के भीतर, आप अपने टेम्पलेट को संपादित कर सकते हैं। मैंने निम्नलिखित शैली जोड़ी:

p.code {फ़ॉन्ट-परिवार: कूरियर नया; फ़ॉन्ट-आकार: 8pt; सीमा-शैली: इनसेट; सीमा-चौड़ाई: 3 पीएक्स; गद्दी: 5 पीएक्स; पृष्ठभूमि-रंग: # फफूंद; लाइन-ऊँचाई: 100%; मार्जिन: 10 पीएक्स}

अगला कदम 'एडिट एचटीएमएल' मोड में मेरे टैग को संपादित करना है। मैं केवल टैग बनाकर अपनी नई शैली को इंगित करता हूं। देखा! शैलियों को तोड़ना:

  • फ़ॉन्ट को कूरियर न्यू पर सेट करें ... एक सामान्य कोड संपादक की तरह दिखता है
  • सही दिखने के लिए फ़ॉन्ट आकार को 8pt पर सेट करें
  • पैराग्राफ बॉर्डर स्टाइल को 'इनसेट' पर सेट करें। यह बताता है कि पृष्ठ पर एक textarea कैसा दिखता है।
  • सीमा चौड़ाई 2 या 3 पिक्सेल पर सेट करें। इससे इनसेट बॉर्डर स्टाइल सही लगता है।
  • पैडिंग बॉर्डर और टेक्स्ट के बीच की दूरी तय करती है।
  • पृष्ठभूमि का रंग ... इसे सफेद पर सेट करें (# FFFFF)
  • रेखा-ऊँचाई - मैंने इसे 100% तक समायोजित किया क्योंकि मेरे ब्लॉगर विषय की कुछ अन्य शैलियों ने मेरी पंक्ति की ऊँचाई लगभग 200% कर दी
  • मार्जिन को 10 पीएक्स पर सेट करें। यह पैराग्राफ (पी टैग) 10 पिक्सल को हर चीज से दूर ले जाता है।

बस इतना ही है! एक नोट: ब्लॉगर के साथ आने वाला संपादक आपके ब्लॉग में प्रदर्शित होने में सक्षम नहीं है। लेकिन यह काम करता है और बहुत अच्छा लग रहा है!

एक और ध्यान दें ... टैग को संपादित करने के बाद, ब्लॉगर संपादक अपनी पोस्ट में बेतरतीब ढंग से इसका उपयोग करना पसंद करता है। यह थोड़ा कष्टप्रद है! मेरी सलाह होगी कि आप अपनी पूरी पोस्ट लिखें और फिर बाद में एक छोटा-सा संपादन करें।

एक अंतिम नोट ... अपने प्रतीकों को प्रदर्शित करने के लिए HTML संस्थाओं का उपयोग करना सुनिश्चित करें! कुछ उदाहरण:

  • उद्धरण (")"
  • > है>
  • > है>

हैप्पी कोडिंग!

3 टिप्पणियाँ

  1. 1
  2. 2
  3. 3

    मुझे लगता है कि अब लिखने की कोई जरूरत नहीं है। आप सहायक संपादकों का उपयोग कर सकते हैं। आप रंग, सीमा आदि चुन सकते हैं।

तुम्हें क्या लगता है?

यह साइट स्पैम को कम करने के लिए अकिस्मेट का उपयोग करती है। जानें कि आपका डेटा कैसे संसाधित किया जाता है.