ब्लोगर टिप्सः ब्लोग लेखक के कमेंट को हाईलाईटेड बॉक्स में कैसे दिखायें

डा. अनुराग ने मुझसे बहुत पहले पूछा था “एक सवाल जैसे की मैंने इंग्लिश के कई टेम्पलेट्स में देखा है author कमेन्ट highlight होते है ऐसा कैसे ?” तो आज आपको बताते हैं कि आप ये कैसे कर सकते हैं।

सबसे पहले तो अपने टेंपलेट का बैकअप ले लें (बैकअप कैसे लें जानने के लिये इस पोस्ट को पढ़ सकते हैं)। उसके बाद सबसे पहले आपको अपने कमेंट के लिये एक सेटिंग बदलनी है। इसे करने के लिये सेटिंग में जायें फिर कमेंट के टैब पर क्लिक करके “Comment Form Placement” के लिये तीसरा आप्शन “Embedded below post” सलेक्ट कर लें।

इसके बाद आपको layout टैब पर जाकर Edit HTML पर क्लिक करना है, उसके बाद आपको HTML कोड एक बड़े बॉक्स में दिखायी देगा। इस बॉक्स के ऊपर लिखे “Expand Widget Templates” आप्शन को सलेक्ट करना है। अब कोड के बॉक्स में आपको कमेंट के कोड से कमेंट के कुछ टैग सर्च करने या ढूँढने होंगे। मैंने अपने टेस्ट ब्लोग के टेंपलेट में से कोड लेकर नीचे कॉपी किया है, आप में से ज्यादातर के ब्लोग में शायद ये कोड ऐसा ही मिलेगा लेकिन यहाँ पर ध्यान रहे ये जरूरी नही कि आपको अपने टेंपलेट में बिल्कुल यही कोड दिखायी दे। उसके लिये इसी कोड से आयडिया लेकर कुछ कमेंट के टैग सर्च कर सकते हैं।

सर्च करने के लिये आप चाहें तो निम्न टैग ढूँढ सकते हैं -

मेरे ब्लोग टेंपलेट में कमेंट का पूरा कोड ऐसा है, ऐसा ही आप को भी देखना है -

<dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
<dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>

<data:comment.body/>

            </b:if>
          </dd>
<dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>

        </b:loop>
      </dl>

आपने यहाँ नोट किया होगा कि ऊपर के कोड में <dl> और <dd> के टैग यूज हुए हैं, हो सकता है कुछ टेंपलेट में इनके जगह पर <li> या <ul> टैग दिखें और या हो सकता है सिर्फ <div> टैग ही नजर आये।

एक बार आपको ये कोड अपने ब्लोगर टेंपलेट में मिल जाये तो उसे हाइलाईट करके नीचे दिये गये कोड से उसको बदल लें -

<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<li class='author-commenting-style' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>

<data:comment.body/>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>

<b:else/>
<li class='general-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>

<data:comment.body/>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>

</b:if>
</b:loop>
</ul>

कोड को बदलने के बाद Preview के बटन पर क्लिक करके देखें, अगर कोई Error नही आती है तो आप आगे बढ़ सकते हैं और अगर कोई Error आये तो फिर Clear Edits के बटन पर क्लिक करके अपने Changes को Undo कर लें। इससे पुराना कोड वापस आ जाता है। फिर से एक बार कोड को चैक करके बदलने की कोशिश करें हो सकता है आपने कोई एक लाईन छोड़ दी हो।

बस अब हमें ब्लोग लेखक के कमेंट को स्पेशल तरीके से दिखाने का इंतजाम करना है। इसके लिये हम टेंपलेट में एक नये स्टाईल के लिये क्लास एलीमेंट डालेंगे। ऊपर दिये गये कोड में हमने author-commenting-style यूज की है। तो इसके लिये नीचे दिया गया कोड टेंपलेट में डालना है। अपने टेंपलेट में </b:skin> कोड को ढूँढे और इससे ठीक पहले जो भी ऐलीमेंट का क्लोज ब्रैकेट दिखता है (ये कुछ ऐसा दिखेगा } ), उसके तुरंत बाद नीचे दिया गया कोड कॉपी करके डाल दें।

.author-commenting-style {
background: #ffcc66;
border: 1px solid #e1771e;
padding: 5px;
}

अगर आपको मेरे दिये गये रंग से अलग रंग दिखाना है तो आप बैकग्राउंड और बोर्डर का कलर कोड अलग दे सकते हैं। (ये आप इस Color Picker की साईट से पिक कर सकते हैं) ये सब करने के बाद आपका कमेंट कुछ ऐसा दिखायी देगा -

इस स्टाईल में आप चाहें तो थोड़ा और बदलाव ला सकते हैं जैसे मैने इसे कुछ इस तरह से बदला -

.author-commenting-style {
color: #DD6245;
font-size: 12pt;
font-weight:italic;
background: #ffcc66;
border: 1px solid #e1771e;
padding: 10px;
}

तो अब ये कैसा दिखेगा वो आप यहाँ पर जाकर देख सकते हैं। अगर आपको कोई समस्या आती है कमेंट का कोड ढूँढने में तो आप अपना टेंपलेट बतायें और कहाँ से डाऊनलोड किया है, मैं कोशिश करके देख सकता हूँ।