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

सीएसएस

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

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

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

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

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

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

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

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

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

3 टिप्पणियाँ

  1. 1
  2. 2
  3. 3

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

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

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