Saturday, October 4

यूं सजेगी आपकी पोस्ट (Dropletter)

स पोस्ट पर नज़र डालिए। इस पोस्ट का पहला शब्द बिल्कुल उसी तरह दिख रहा है, जैसे आप कोई मैगजीन पढ़ रहे हों। यानी पहले शब्द का रंग भी अलग औऱ आकार भी बड़ा। तकनीकी भाषा में इसे ड्रॉपकैप या ड्रॉपलैटर कहा जाता है। क्या आप भी अपने ब्लॉग पर इसे लगाना चाहते हैं। तरीका एकदम आसान है। कहानी, कविता और साहित्य की दूसरी विधाओं से जुड़े कई ब्लॉगर साथियों ने इस तरह की सजावट की फरमाइश की थी। अब आइए जानते हैं इसे लागू करने का आसान सा तरीका-

1. डैशबोर्ड पर जाकर संबंधित ब्लॉग के लेआउट पर क्लिक करें।

2. Edit HTML पर क्लिक करें। (एचटीएमएल कोड में परिवर्तन करने से पहले अपनी टेम्पलेट का बैकअप जरूर रखें। इससे आप अपनी मूल टेम्पलेट फिर से पा सकते हैं। टेम्पलेट को डाउनलोड करने का तरीका यहां दिया गया है।)

3. दिए गए कोड में यह ढूंढ़े-

]]></b:skin>

(सबसे अच्छा तरीका है कि Cont+F कुंजियों को दबाकर फाइंड बॉक्स खोलें और उसमें ऊपर दिया गया हिस्सा कॉपी-पेस्ट कर इसे ढूंढ़ें। )

4. इस हिस्से के ठीक ऊपर यह कोड पेस्ट कर दें।

.dropcaps {
float:left;
color: $headerBgColor;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}


तरीका इस इमेज में दिखाया गया है-



5. इसके बाद परिवर्तन को सेव कर दें।

6. अब जिस भी पोस्ट में आप ड्रॉपलैटर का इस्तेमाल करना चाहते हैं, उस पोस्ट की शुरूआत इस कोड के साथ करें-

<span style="color: #ff0000"><span class="dropcaps">पोस्ट का पहला अक्षर यहां लिखें</span></span>

याद रखें कि इसमें पोस्ट का पहला अक्षर लिख दें। और शेष हिस्सा इस कोड के तुरंत बाद लिखें। जैसे अगर आपकी पोस्ट का पहला शब्द "हिन्दी" है तो "हि" को इस कोड के भीतर लिखें और "न्दी" को कोड के तुरंत बाद। इसके बाद जैसे ही आप पोस्ट को प्रकाशित करेंगे तो यह आपको ड्रॉपलैटर के रूप में दिखने लगेगा। आप चाहें तो इस कोड के रंग में परिवर्तन कर सकते हैं। रंग कोड के लिए एचटीएमएल कलर चार्ट यहां दिया गया है।

12 comments:

  1. नही हो रहा है आशीष ,.मेरा टेम्पलेट्स ही परिवर्तन लेने से मना कर रहा है ,मैंने ठीक वैसे ही किया जैसा तुमने कहा ....उसके बाद देखो अक्षर का साइज़ समे है बस कलर चेंज है

    ReplyDelete
  2. आशीष जी.. काश ये ब्लोग blogger पढे़ और ये सभी जुगाड़ उसी में inbuild कर दे.. मजा आ जाये

    ReplyDelete
  3. बहुत सही जुगाड़-कई दिन से चाह रहा था इसे.

    ReplyDelete
  4. आशीष भाई जुगाडू टैम्‍पलेट में यह नहीं हो पा रहा है ।

    ReplyDelete
  5. अनुरागजी, मैंने आपकी टेम्पलेट देख ली है। आप दिए गए कोड को

    /* credits
    ===============================

    से ठीक ऊपर पेस्ट कर टेम्पलेट को सेव कर दीजिए। आपकी टेम्पलेट परिवर्तन ले लेगी।

    ReplyDelete
  6. गुरतुर गोठ के संचालक महोदय, आप अपनी टेम्पलेट का कोड कॉपी कर मुझे ई-मेल कर दीजिए (com.ashish@gmail.com)। परिवर्तन के बाद का कोड मैं आपको भेज दूंगा।

    ReplyDelete
  7. नही हो रहा है ,अक्षर का साइज़ समे है बस कलर चेंज है

    ReplyDelete
  8. रंजीत जी, मैंने आपकी टेम्पलेट देखी है। आपने स्टेप चार में सबसे पहले दिया गया कोड लगाया ही नहीं है। कृपया इसे बताए गए तरीके से लगा लें।

    ReplyDelete
  9. धन्यबाद आशीष जी ,पर जैसे ही मै वह कोड लगाकर सेब करता हु तो निम्न बात लिखी आती है
    We were unable to preview your template
    Please correct the error below, and submit your template again.
    Invalid variable declaration in page skin: Variable is used but not defined. Input: headerBgColor

    ReplyDelete
  10. मजा आ गया भाई,कुछ समझा,कुछ नहीं भी... असल में नया कंप्यूटर यूजर हूँ...समझते-समझते थोड़ा समय तो लगेगा ना ....!!

    ReplyDelete
  11. आप अच्छी एवं लाभप्रद जानकारी दे रहे हैं। साधुवाद

    ReplyDelete
  12. नहीं हो रहा है सर जी ....
    जो दिक्कत ranjeet जी को हो रही, वही मुझे भी...

    ReplyDelete