उन्नत टिप्पणी प्रणाली Expand/Collapse लगाएँ

Manoj Jaiswal :सभी पाठकों को मेरा प्यार भरा नमस्कार.तकनीकी पोस्टों के क्रम में आज पेश है,उन्नत टिप्पणी प्रणाली Expand/Collapse लगाएँ.यह विजेट आपके पाठकों को एक बेहतरीन विकल्प उपलव्ध कराता है जब भी वह आपकी पोस्ट पर टिप्पणी करेंगे तो इस विजेट पर क्लिक कर टिप्पणी बॉक्स खोल कर अपनी टिप्पणी पोस्ट कर सकते हैं,टिप्पणी पोस्ट करने के बाद या पहले यह स्वत ही खुल जाता है एंव बंद भी हो जाता है.इसका लाइव उदाहरण आप मेरे इसी ब्लॉग पर देख सकते हैं.इस विजेट को मैने काफी समय खर्च करने के बाद संशोधित किया है,कुछ इंग्लिश वेबसाईट पर उपलव्ध विजेट में कमी यह है कि उसको लगाने के बाद नीचे के लिनक्स मसलन अगली पोस्ट, पिछली पोस्ट का लिंक दिखना बंद हो जाता है,वह कमी इस विजेट में सुधार दी गयी है.आप नीचे दिए आसान चरणों को अपना कर इसे अपने ब्लॉग में आसानी से स्थापित कर सकते हैं.

 उन्नत टिप्पणी प्रणाली Expand/Collapse लगाएँ

1. आप ब्लॉगर  dashboard--> लेआउट  --> Template --> Edit Html ( Tick the Expand widget Template option).

2. इसे खोजें  </head> और बस यह निम्नलिखित  कोड इसके ठीक ऊपर चिपकाए.

.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function(){

$(&quot;.toggle_container2&quot;).hide();

$(&quot;h2.trigger2&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
});

});
</script>

 CCS शैली और  बॉक्स

3. अब इसे खोजें(Ctrl+F) से  ]]></b:skin> और नीचे दिया CCS कोड इसके ठीक ऊपर चिपकाएँ .

h2.trigger2{padding-left:50px;margin-top:5px;margin-left:0;margin-bottom:5px;background:url(https://dl.dropbox.com/u/37128917/Pictures/pbt.png) no-repeat;height:46px;line-height:46px;width:660px;font-family:Arial;font-size:1.4em;font-weight:400;text-align:left;color:#a1a1a1;float:left;cursor:pointer}h2.trigger2 a{color:#fff;text-decoration:none;display:block}h2.trigger2 a:hover{color:#ccc}h2.active{background-position:bottom left;color:#FFF}.toggle_container2{margin-left:-10px;padding-left:10px;border-left:1 solid #e6e6e6;overflow:hidden;width:711px;clear:both}

HTML कोड संपादित करें 

4.  अब इसे खोजें(Ctrl+F) से

<b:includable id='comment-form' var='post'>

5. अब इस कोड के ठीक नीचे  यह  कोड के  चिपकाएं.

<h2 class='trigger2'>Click to Add a New Comment</h2>
<div class='toggle_container2'>
<div class='block'>

6. अब आपको नीचे दिए कोड तरह क्लोजिग टैग बंद करना है Paste two div closing tags just before its closing includable tag as shown below.

<b:includable id='comment-form' var='post'>

<h2 class='trigger2'>Click to Add a New Comment</h2>

<div class='toggle_container2'>

<div class='block'>

<div id='pbt-form'>

<a name='comment-form'/><br/>
<h4 id='comment-post-message'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='580px'/>
<data:post.iframeColorizer/>
</div>

</div> 

</div>

</b:includable>

7. Finally अपने टेम्पलेट Save करें और अपनी टिप्पणी फार्म को देखें .


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