नई लुक अपना चुके ब्लॉगस पर Threaded Comments की सुविधा कैसे आन करें ?

नई लुक अपना चुके ब्लॉगस पर Threaded Comments की सुविधा कैसे आन करें ?

पिछले लेख से आगे का भाग उन ब्लॉगर के लिए जिन्होंने पहले से अपने ब्लॉग की नई लुक को अपना लिया है ...

स्टेप एक :अपने ब्लॉग पर लाग इन करें |
स्टेप दो :डिज़ाईन पर कलिक करें |
स्टेप तीन :Etit HTML पर कलिक करें
स्टेप चार :नोट :डाउनलोड फुल टेम्पलेट पर कलिक करके अपने ब्लॉग का बैकअप जरूर और जरूर ले लें, ताकि किसी भी प्रकार की अनहोनी होने की सूरत में आप अपने ब्लॉग की पुराणी लुकआउट को दोबारा से पा सकें |
स्टेप पाँच :Expand Widget Templates को चैक करें |
स्टेप छ :अब निम्न कोड को ढूंढें | बेहतर होगा कि आप CTRL+F कमांड का प्रयोग करें :-
<b:includable id='postQuickEdit' var='post'>
स्टेप सात :जब आप इस कोड को ढूंढ लें तो आप इस लाइन के ऊपर कुछ इस तरह से कोड को पाएंगे |
</div>
</div>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>

स्टेप आठ :आपको उपरोक्त कोड के ठीक ऊपर ये निम्न कोड पेस्ट करना है |

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data: post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data: post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>


स्टेप नौ :कोड पेस्ट करने के बाद आपको कोड निम्न प्रकार से दिखाई देगा :-

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data: post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data: post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</div>
</div>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>

स्टेप दस :अब आप निम्न को ढूंढें :-

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>


स्टेप ग्यारह :अब आप निम्न को उपरोक्त कोड से बदल दें :-

<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data: post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data: post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</div>

स्टेप बारह :सेव टेम्पलेट बटन पर कलिक करके अपने टेम्पलेट को सेव कर लें |

उम्मीद है कि प्रयुत्तर दें की आप्शन काम करने लगेगी | यदि फिर भी ये आप्शन काम न करे तो आपको Threaded Comments CSS कोड में बदलाव करना पड़ेगा | इसके लिए आपको निम्न प्रक्रिया अपनानी पडेगी :-

1. Design पर कलिक करें |
2. Edit HTML पर कलिक करें |
3. निम्न कोड को ढूंढे :-

/* Comments----------------------------------------------- */ #comments{padding:10px;background:#ffffff;border:1px solid #D3DEBE;} #comments h4{font-size:16px;font-weight:bold;margin:1em 0;color:$sidebarcolor} #comments-block3{padding:0;margin:0;float:left;overflow:hidden;position:relative;} #comment-name-url{width:465px;float:left} #comment-date{width:465px;float:left;margin-top:5px;font-size:10px;} #comment-header{float:left;border:1px solid #D3DEBE;padding:5px 0 40px 10px;margin:5px 0px 15px 0px;background-color:#ffffff;position:relative;} .avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0PYeu8ddUKBkc7WTQL8F5jtyr6ZaReFrxVYFk3E1rcgzMPdYOTyJlbeJaez6r-rWj8Y4BsW-1fR2o6bn6sFiPUp44dQt8nsougKtuJzXXBpKPPPcuF3WKv3M-9fsfW_Is0UMBEf9kCb6M/s1600/comment-avatar.jpg);width:32px;height:32px;float:right;margin:5px 10px 5px 5px;border:1px solid #ddd;} .avatar-image-container img{width:32px;height:32px;} a.comments-autor-name{color:#000;font:normal bold 14px Arial,Tahoma,Verdana} a.says{color:#000;font:normal 14px Arial,Tahoma,Verdana} .says a:hover{text-decoration:none} .deleted-comment{font-style:italic;color:gray}

4. अब उपरोक्त कोड को निम्न कोड से बदल दें व सेव टेम्पलेट बटन पर कलिक करें | Threaded Comments CSS आप्शन काम करने लगेगी |

/* Comments----------------------------------------------- */ .comments {clear: both;margin-top: 10px;margin-bottom: 0px;line-height: 1em;} .comments .comments-content {color:blue;font-size: 14px;margin-bottom: 16px;font-weight: normal;text-align:left;line-height: 1.4em;} .comments .comment .comment-actions a {display: inline-block;margin: 0;padding: 1px 6px;border: 1px solid #196904;border-top-color: #196904;border-left-color: #196904; color: #186504 !important;text-align: center;text-shadow: 0 -1px 0 white; text-decoration: none;-webkit-border-radius: 2px;-moz-border-radius: 2px; border-radius: 2px;background: #EDEDED;background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 14px/18px sans-serif;padding:2px 8px; margin-right:10px;} .comments .comment .comment-actions a:hover {font-size:14px; text-decoration: none; background:#fff; border:1px solid #f60; } .comments .comments-content .comment-thread ol {list-style-type: none;padding: 0; text-align: none;} .comments .comments-content .inline-thread {padding: 0.5em 1em;} .comments .comments-content .comment-thread {margin: 8px 0px;} .comments .comments-content .comment-thread:empty {display: none;} .comments .comments-content .comment-replies {margin-top: 1em; margin-left: 40px; font-size:14px; background:#Fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFY6eG8WlmtldSxDHgEOSc2N7phHq1BYUJ8SkgxykMPO0n_KEXz35RwOE9ge4QxhYElEk9wGNVZ2TLdUc0gD92CljRS3to35lPvKLntwoLeVFtwfA63zIskITzgzn0lnDNdN9IY5LZik/s1600/title-tail_ornage1.png) repeat-x bottom;} .comments .comments-content .comment {margin-bottom:16px;padding-bottom:8px;} .comments .comments-content .comment:first-child {padding-top:16px;} .comments .comments-content .comment:last-child {border-bottom:0;padding-bottom:0;} .comments .comments-content .comment-body {position:relative;} .comments .comments-content .user {font-style:normal;font-weight:bold;} .comments .comments-content .user a {color:#185906; font-size:14px; font-weight: bold;text-decoration: none;} .comments .comments-content .icon.blog-author {width: 18px;height: 18px;display: inline-block;margin: 0 0 -4px 6px;} .comments .comments-content .datetime {color: #999999;float: right; font-size: 13px;text-decoration: none;} .comments .comments-content,.comments .comments-content .comment-content { margin:0 0 8px;} .comment-header {background-color: #ffffff;border: 2px solid #224718; margin-bottom: 5px;padding: 5px;} .comments .comments-content .comment-content {text-align:none;} .comments .comments-content .owner-actions {position:absolute; right:0;top:0;} .comments .comments-replybox {border: none;height: 250px;width: 100%;} .comments .comment-replybox-single {margin-top: 5px;margin-left: 48px;} .comments .comment-replybox-thread {margin-top: 5px;} .comments .comments-content .loadmore a {display: block; padding: 10px 16px;text-align: center;} .comments .thread-toggle {cursor: pointer;display: inline-block;} .comments .continue {cursor: pointer;} .comments .continue a {display: inline-block;margin: 0;padding: 1px 6px; border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4; color: #424242 !important;text-align: center;text-shadow: 0 -1px 0 white; text-decoration: none;-webkit-border-radius: 2px;-moz-border-radius: 2px; border-radius: 2px;background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; padding:2px 8px; margin-right:10px;} .comments .comments-content .loadmore {cursor: pointer;max-height: 3em; margin-top: 3em;} .comments .comments-content .loadmore.loaded { max-height: 0px;opacity: 0;overflow: hidden;} .comments .thread-chrome.thread-collapsed {display: none;} .comments .thread-toggle {display: inline-block;} .comments .thread-toggle .thread-arrow {display: inline-block; height: 6px;width: 7px;overflow: visible;margin: 0.3em;padding-right: 4px;} .comments .thread-expanded .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;} .comments .thread-collapsed .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;} .comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 34px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden; border: 1px solid #DDDDDD;} .comments .avatar-image-container img {width: 36px;} .comments .comment-block {margin-left: 48px;position: relative;} /* Responsive styles. */ @media screen and (max-device-width: 480px) { .comments .comments-content .comment-replies { margin-left: 0; } } #comments{color:blue;padding:10px;font-size:16px;background:#ffffff;border:1px solid #224718;-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;} .comments .comments-content .icon.blog-author { background-repeat: no-repeat; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1tzxoW3HnR_VgBBlVr7pPMAoYsiIugw1vigfg4TlByC4w9uJBjYXN-L-Y4RmznGatx_9pIrB8O1XwfNMq282pgprXw2f0OiXH-vMImLGcmGk2tAXhDU0dFdh-swJY4p8A6dMN1tH1kY/s1600/author_v.png); }

क्या आपको ये आई-मैजिक अंदाज़ पसंद आया ? यदि हां !!! तो अपने विचारों से अवगत कराएं |