Blogger Comments को Stylish और Professional बनाना
[ब्लॉगर टेम्पलेट में परिवर्तन के निर्देश, इनके बारे में अधिक जानकारी के लिए यहाँ क्लिक करें।]
1. ब्लॉगर डैशबोर्ड (DASHBOARD) पर जायें
2. डैशबोर्ड से टेम्पलेट टैब (TEMPLATE TAB) पर जायें
3. टेम्पलेट टैब से आगे जाते हुए प्रोसीड (Proceed) पर क्लिक करें
4. अब आप ब्लॉगर टेम्प्लेट के HTML व CSS में परिवर्तन के तैयार हैं
5. अब नीचे दिया गया CSS कोड इस कोड को ]]></b:skin> टेम्पलेट में खोजकर उसके ठीक ऊपर (JUST ABOVE) पेस्ट कर दें।
Blogger Comment Form Stylization CSS Code:
/* Tech Prevue Comment Area Stylization
-----------------------------------------*/
#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSbVYAtA29OgNS46eq9rOfhX5PjGJQD61-Jo-L_vxZsgWpyBXkTDonDAx4VESwGm-bKY0WlG6-FpMcNW3I87Gech_QQZdlGGyQroLxF8DgBrUdh0sae4i5aLyogtWOkyF8-3EBGGx2hU/s320/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%}
विशेष:
1. इस परिवर्तन के पूर्ण प्रयोग के लिए आपको ब्लॉगर के एम्बेड या थ्रेडेड कमेंट सिस्टम (Embedded or Threaded Comments System) का प्रयोग करना होगा।
2. रंग में परिवर्तन के लिए लाल रंग से दिखाये गये हेक्स कोड (HEX CODE, e.g. #eb1e1e) और लेखक बिल्ले (Author badge) के इमेज/फोटो लिंक को बदलना होगा।
1. इस परिवर्तन के पूर्ण प्रयोग के लिए आपको ब्लॉगर के एम्बेड या थ्रेडेड कमेंट सिस्टम (Embedded or Threaded Comments System) का प्रयोग करना होगा।
2. रंग में परिवर्तन के लिए लाल रंग से दिखाये गये हेक्स कोड (HEX CODE, e.g. #eb1e1e) और लेखक बिल्ले (Author badge) के इमेज/फोटो लिंक को बदलना होगा।
6. उपरोक्त सारे चरण ठीक से पूरे कर लेने के बाद अब आप अपने टेम्पलेट को सहेज लें।
अब जब आप अपने ब्लॉग पोस्ट की टिप्पणियों को देखेंगे तो उन्हें पहले के अपेक्षा अधिक सुव्यवस्थित एवं सुंदर पायेंगे।
नीचे लेखक बिल्लों (Author Badges) के उदाहरण दिये गये हैं। इनमें से आप अपने मन का रंग चुनकर उसे अपने ब्लॉग पर प्रयोग में ला सकते हैं। मनचाहे रंग के बिल्ले के ऊपर राइट क्लिक करके 'कॉपी इमेज लिंक' विकल्प द्वारा आप चित्र का लिंक प्राप्त कर सकते हैं।
आशा करता हूँ कि आपको यह पोस्ट पसंद आयी होगी। आपके ब्लॉग की सुंदरता बढ़ाने में मेरा भी कुछ योगदान रहेगा। यदि हाँ तो मेरे फेसबुक पेज को पसंद करना न भूलें। लाइक बटन यहीं नीचे है। :D
Post a Comment