बगैर HTML टेबल की सहायता के पोस्ट या साईट के लिये कलर बॉक्स कैसे बनायें

कुछ पोस्टस पहले एचटीएमएल श्रृंखला के तहत मैंने टेबल के बारे में काफी जानकारी दी थी। टेबल की सहायता से कलर बॉक्स बनाने का एक नुकसान ये है कि या तो हर बार पोस्ट या पेज में आपको कोडिंग करनी होगी या पिछली पोस्ट या पेज से कोड कॉपी पेस्ट करना पड़ता है।

आज जो तरीका कलर बॉक्स के लिये बता रहा हूँ उसे मैं काफी समय से अपनी साईटस में उपयोग में ला रहा हूँ। इस पोस्ट के अंत में आप उस बॉक्स को देख सकते हैं। इस तरह का बॉक्स आप CSS स्टाईलशीट की मदद से आसानी से बना सकते हैं।

अगर आप वर्डप्रेस उपयोग में लाते हैं तो उसकी स्टाईलशीट वाली फाईल (style.css) के अंत में नीचे दिया गया कोड कॉपी करके पेस्ट कर लें।

अगर आपका ब्लोग ब्लोगर में है तो उसके लिये आपको टेंपलेट में बदलाव करना होगा। ब्लोगर के टेंपलेट में किसी भी तरह का बदलाव करने से पहले उसका बैकअप ले लें (कैसे?, पढ़ें)। उसके बाद टेंपलेट के कोड में (LAYOUT–>Edit HTML के लिंक पर क्लिक करें) इस कोड को सर्च (Find) करें ]]></b:skin>

इसके ठीक पहले आप नीचे दिया कोड कॉपी कर पेस्ट कर दें। आप चाहें तो boxfornote की जगह कोई भी दूसरा नाम दे सकते हैं जो आपको याद रहे या बॉक्स लगाने के संदर्भ में तुरंत याद आ जाये।

.boxfornote
{
 background-color:#feb;
 border:1px solid #ee7;
 padding: 3px 15px;
 margin: 5px 0px;
 display:block;
 color:#994400;
 font-family: verdana,arial,helvetica,sans-serif;
 font-size: 11px;
 font-weight: normal;
}

इस तरह से आपने कलर बॉक्स के लिये स्टाईल डिफाईन कर दी, ये तब तक काम करेगा जब तक आप कोई दूसरा टेंपलेट नही बदलते। टेंपलेट बदलने पर यही कोड नये टेंपलेट में डाल दें।

अब जब भी आप किसी पोस्ट या पेज में कलर बॉक्स देना चाहते हैं वहाँ <div> टैग में क्लास एट्रीब्यूट का इस्तेमाल करके ये बॉक्स दिखा सकते हैं। जैसे नीचे बॉक्स दिखाने के लिये मैने लिखा है।

उदाहरण के लिये ये कुछ ऐसा होगा -

<div class=”boxfornote”> बॉक्स के अंदर जो लिखना है वो यहाँ लिखिये</div>

और ये कुछ इस तरह दिखायी देगा (टेस्ट ब्लोगर बॉक्स में यहाँ देख सकते हैं) -

बॉक्स के अंदर जो लिखना है वो यहाँ लिखिये

है ना टेबल की सहायता से बॉक्स बनाने से ज्यादा आसान, आप चाहें तो इसका बार्डर कम बाकी भी कर सकते हैं और बैकग्राउंड और फोरग्राउंड का कलर भी बदल सकते हैं।