உங்களுடைய Blogger ல் எவ்வாறு வெவ்வேறு நிறங்களில் Comment Box களை நிறுவுவது | HACKING ALL PRODUCT.
Recommend on Google

1 உங்களுடைய Blogger ல் எவ்வாறு வெவ்வேறு நிறங்களில் Comment Box களை நிறுவுவது


Hello Friends,

இறுதியாக நமது வலைத்தளத்தில் எவ்வாறு Blogger யில் சுழளக்கூடிய சமூகதள சின்னங்களை சேர்த்தல் என்பது பற்றி பார்த்தோம். அதற்கு நமது வாசகர்களிடம் நிறைய வரவேற்பு கிடைத்துள்ளது அதே வரிசையில் இன்றைக்கு நாம் உங்களுடைய தளங்களில் எவ்வாறு கலக்கலான வெவ்வேறு நிறங்களில் Comment Box களை நிறுவுவது என்று பார்ப்போம்.



முதலில்,

Sign in Your Blogger=> Template=> Customize=> Advanced=> Add CSS யை click செய்து அருகில் இருக்கும் பெட்டியினுள் கீழே உள்ள code களில் உங்களுக்கு பிடித்ததை copy செய்து Paste செய்யுங்கள்.

பச்சை நிற Comment Box ஐ வைக்க கீழே உள்ள code ஐ பயன்படுத்துங்கள்.


#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:#56d805}
#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 #56d805;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:#56d805}
.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(http://2.bp.blogspot.com/-zz8GxHMWPAo/T89XNSMjjeI/AAAAAAAAGl4/7IfX13BSmxg/s320/picresized_1338989738_comment-author-green.gif);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:103%!important}
.comment-form{width:100%;max-width:100%}


இதற்கான Demo வை இந்த பதிவின் கீழ் காணலாம்.

நீல நிற Comment Box ஐ வைக்க கீழே உள்ள code ஐ பயன்படுத்துங்கள்.

#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:#1e05d8}
#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 #1e05d8;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:#1e05d8}
.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(http://4.bp.blogspot.com/-awl7HMjMgh4/T89YtINejTI/AAAAAAAAGmQ/XxcTVLKUAtI/s320/picresized_1338990142_comment-author-blue.gif);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:103%!important}
.comment-form{width:100%;max-width:100%}


இதற்கான Demo வை இந்த Link ல் காணலாம்.




இந்தப்பதிவு பிடித்திருந்தால் உங்களுடைய பொன்னான ஓட்டை ஏதாவது ஒரு சின்னத்தில் குத்துங்கள்.

கீழே உள்ள பெட்டியினுள் உங்களுடைய மின்னஞ்சலை Type செய்து பதிவுகளை இலவசமாக பெற்றுக்கொள்ளுங்கள்

1 கருத்து:

இந்த பதிவிலுள்ள குறைகளையும், இந்த தளம் பற்றிய கருத்துக்களையும் குறிப்பிடுக.

Hello Friends இப்போது என்னிடம் தமிழில் 4 புத்தகங்கள் இருக்கின்றன. அவற்றை உங்களோடு பகிர்ந்து கொள்ள விரும்புகிறேன். அதில் உங்களுக்கு மிகவும் பயனளிக்க கூடியது எது என்பதை தெரிந்து வாக்களிக்கவும்.