अपने हर पोस्ट की टिप्पणियों का काउंट नंबर दिखाएँ

मनोज जैसवाल : सभी पाठकों को मेरा प्यार भरा नमस्कार। मेरी पिछली पोस्टों को पसंद करने के लिए आपका हार्दिक धन्यबाद। अपने व्यवसाय की बजह से ब्लॉग पर अधिक समय ना दे पाने और आप लोगों की टिप्पणियों का समय से उत्तर ना दे पाने के लिए मैं आप सभी से माफ़ी चाहता हूँ। आज तकनीकी पोस्टों के क्रम में पेश है अपने हर पोस्ट की टिप्पणियों का काउंट नंबर दिखाएँ। उदाहरण के लिए आप की किसी पोस्ट पर 01,05,15.75 या 175 टिप्पणी आती हैं उन्हें 01 से बढते क्रम 02,03,04,जैसे क्रम में दिखाया जा सकता है। इसका लाइव उदाहरण आप यहाँ देख सकते हैं। जब यह पोस्ट लाइव होगी तब आप मेरे इस ब्लॉग पर भी देख सकते हैं। इसे बेहद आसानी से लगाया जा सकता है, बस नीचे दिए आसान चरणों का पालन कीजिये।

 1. लेआउट में जाइए।

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

3. Expand Widget Templates को आवश्यक रूप से टिक कर दीजिए।

4. कोड में नीचे दिए गए हिस्से को ढूंढिए। सबसे अच्छा तरीका है Cont + F कुंजियों को दबाइए। एक फाइंड बॉक्स खुलेगा। इसमें नीचे दिए गए कोड को कॉपी कर पेस्ट कर दीजिए। एंटर करते ही आप कोड के इस हिस्से तक पहुंच जाएंगे।अब इस कोड को खोजें 

<b:loop values='data:post.comments' var='comment'>

     5.  इस के ठीक ऊपर नीचे दिया  कोड कॉपी कर पेस्ट कर दीजिए।

.<script type='text/javascript'>var CommentsCounter=0;</script>

   6.   अब आप नीचे दिया कोड खोजें.

  <data:commentPostedByMsg/>

     7.    इसके ठीक नीचे, नीचे दिया  कोड कॉपी कर पेस्ट कर दीजिये।

   <span class='comm-num'>

<a expr:href='data:comment.url' title='Comment Link'>

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>

    
टिप्पणी काउंट का काम यहीं पूरा हो जाता है,लेकिन इस को स्टाईल देने काम आप इस चरण में पूरा करें,या टेम्पलेट को सेव कर दें.इस को स्टाईल देने के लिए यह चरण का भी पालन करें.


8.अब इस कोड को खोजें 


       </head>


9.अब नीचे दिया कोड  </head> के ठीक ऊपर पेस्ट कर दीजिये। 


  <style type="text/css">

.comm-num a:link, .comm-num a:visited {

color: red !important;

text-decoration: none !important;

background: url(http://dl.dropbox.com/u/37128917/66m69g.png) no-repeat;
width: 50px;
height: 48px;

float: right;

display: block;

margin-right: 5px;

margin-top: -15px; /*comments-counter position*/

text-align: center;

font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;

font-size: 15px;

font-weight: normal;

}

.comm-num a:hover, .comm-num a:active {

color: gray !important;

text-decoration: none !important;

}

</style>

10. अब टेम्पलेट को सहेजें.

किसी भी परेशानी में आप मुझे मेल कर सकते हैं.

क्या आपको यह लेख पसंद आया? अगर हां, तो ...इस ब्लॉग के प्रशंसक बनिए !!