ब्लॉगर थ्रेडेड या प्रतियुत्तर टिप्पणी क्षेत्र को बेहतरीन लुक देना

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

आप इस लिंक पर जाकर इस बदलाव को वास्तविक रूप में देख सकते हैं –
http://demo.techprevue.com/2013/02/professional-blogger-comment.html.

आइए जानते हैं कि इस परिवर्तन को कैसे किया जाये –

1. ब्लॉगर “डैशबोर्ड” पर जायें और ब्लॉग चुनें
2. “Template”/ टेम्पलेट पर क्लिक करें
3. “Edit HTML” बटन पर क्लिक करें और फिर
4. इस कोड को ]]></b:skin> टेम्पलेट में खोजें।

5. नीचे दिये कोड ठीक टेम्पलेट में खोजे गये कोड के ऊपर पेस्ट कर दें।

CSS कोड:

/* Blogger threaded comments (system) stylization with CSS code
by Tech Prevue (http://www.techprevue.com)
-----------------------------------------*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#eb1e1e}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #eb1e1e;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#eb1e1e}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px;}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://taknikdrashta.com/wp-content/uploads/2014/01/red-author.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:100%!important}
.comment-form{width:100%;max-width:100%}

6. अब “Save template” बटन पर क्लिक करके परिवर्तन सहेज दें।

प्रमुख:
1. यदि पर रंग संयोजन में बदलाव करना चाहते हैं तो हेक्स कोड #eb1e1e को अपने मनचाहे रंग के हेक्स कोड से बदल दें और नीचे दिये किसी एक लेखक पदक का चुनाव करें। नीचे दिये किसी एक पदक को प्राप्त करने के लिए उस पर राइट क्लिक करके “Copy Image Link” या “Copy Image Location” विकल्प का चुनाव करेंगे, जिससे पदक का लिंक आपको क्लिप बोर्ड पर प्राप्त हो जायेगा। इस क्लिप बोर्ड कोड को उपरोक्त दिये CSS (लाल रंग से प्रदर्शित) कोड में दिये चित्र लिंक से बदल दें।
2. पाठक और लेखक प्रोफ़ाइल चित्रों को गोल दिखाने के लिए नीचे दिये कोड को उपरोक्त CSS कोड में आखिरी लाइन के नीचे पेस्ट कर दीजिए।

.comments .avatar-image-container{border-radius: 50%;}

Auhor Badges:

यह मेरा विश्वास है कि आप इस पोस्ट को बहुत-सा स्नेह देंगे। यदि आपके मन में इससे सम्बंधित कोई प्रश्न है तो मुझे अवश्य टिप्पणी द्वारा प्रश्न करें।

Keywords: Customize Blogger Comment Area, Stylize Blogger Comment Area, Modern Blogger Threaded Comments, Colorful Blogger Comment Threaded Area