ப்ளாக்கரில் புதிய Reply Button வைக்க

ப்ளாக்கர் தளம் சமீபத்தில் Threaded Comments என்னும் புதிய கருத்துரை வசதியை தந்தது. அதாவது வாசகர்கள் கருத்திடும் போது அந்தந்த கருத்துக்களுக்கு அதற்கு கீழேயே தொடரிழையாக கருத்திடும் வசதி. பயனுள்ள அந்த வசதியில் Reply என்னும் எழுத்துக்களுக்கு பதிலாக பட்டன் வைப்பது எப்படி? என்று பார்ப்போம்.

Threaded Comments வசதியை உங்கள் ப்ளாக்கில் வைப்பதற்கு  
Blogger Dashboard => settings => Posts and comments பகுதிக்கு சென்று அங்கு Comment Location என்ற இடத்தில் Embedded என்பதை தேர்வு செய்ய வேண்டும்.

1. முதலில் Blogger Dashboard => Template பக்கத்திற்கு சென்று, அங்கு மேலே Backup/Restore பட்டனை க்ளிக் செய்து உங்கள் டெம்ப்ளேட்டை Backup எடுத்துக் கொள்ளுங்கள்.

2. பிறகு அதே பக்கத்தில் Edit Html என்பதை க்ளிக் செய்து, Proceed என்பதை க்ளிக் செய்யுங்கள்.

3. பிறகு Expand Widget Templates என்பதில் டிக் செய்யுங்கள்.


4. பிறகு

]]></b:skin>

என்ற Code-ஐ தேடி அதற்கு முன்னால் பின்வரும் Code-ஐ Paste செய்யுங்கள்.

/* Start Comment Style Code */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.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:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;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 a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;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}
.avatar-image-container{background:url(https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
/* End Comment Style Code */

*மேலுள்ள கோடில் சிவப்பு கலரில் உள்ள fede72 என்பதற்கு பதிலாக உங்களுக்கு விருப்பமான கலருக்கான HTML COLOUR CODE-ஐ சேர்க்கவும்.

** நீல நிறத்தில் உள்ளா 26, 28 என்பது பட்டனின் அளவு. அதை உங்கள் தேவைக்கேற்ப குறைத்துக் கொள்ளவும்.

5. பிறகு Save Template என்பதை கிளிக் செய்யுங்கள். 


அவ்வளவு தான்! உங்கள் ப்ளாக்கில் கருத்துரை பகுதி அழகிய வடிவில் காட்சி அளிக்கும்.


இதன் மாதிரியை இந்த தளத்தின் கருத்துரை பகுதியில் பார்க்கலாம்.


தகவல்: சகோ. பிரபு கிருஷ்ணா


நன்றி: Spice up your Blog