Friday, July 6, 2012

பிளாக்கர்: Reply Comment-களுக்கு புதிய வடிவம்

வோர்ட் பிரஸ்-ல் இருந்த reply comments என்னும் வசதி பல நாட்களாக பிளாக்கர் தளத்தில் இல்லை .இதனால் வாசகர்கள் குறிப்பிட்டு தான் அதற்கு பதில் அழிப்பார்கள் . பதிவுகளில் முக்கியமானது  அதன் கருத்துரைகள் தான் . பதிவில் பலரின் கருத்துக்கள் நம்மை மேலும் பல பதிவுகள் எழுத தூண்டும் .

நம் வலைப்பதிவில் கேள்வி கேட்பவர்களுக்கு பதில் அந்த இடத்திலேயே அழிக்க இந்த thread Comments " வசதி நமக்கு உதவுகிறது ..

எப்படி இருக்கும் என்று
இங்கே சென்று Comment செய்து பார்த்து கொள்ளுங்கள் .

இந்த வடிவத்தை பெற நீங்கள் செய்ய வேண்டியது :

1. முதலில் Blogger Dashboard => Template பக்கத்திற்கு சென்று, அங்கு மேலே

Backup/Restore பட்டனை க்ளிக் செய்து உங்கள் டெம்ப்ளேட்டை Backup

எடுத்துக் கொள்ளுங்கள்.

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

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

]]></b:skin> -என்ற Code-ஐ தேடி அதற்கு முன்னால் பின்வரும் Code-ஐ Paste

செய்யுங்கள்.


.comments {
    clear: both;
    margin-top: 10px;
    margin-bottom: 0
    }
.item-control {
    display: inline;
}
.comments .comments-content {
    margin-bottom: 16px;
    }

.comments .comment .comment-actions a {
    padding: 0;
    margin: 0 0 0 5px;
    position: relative;
    color: #0E63E2;
    font: normal 13px/20px Arial, sans-serif
    }

.comments .comment .comment-actions a:hover {
    text-decoration: underline
    }

.comments .comments-content .comment-thread ol {
    list-style-type: none;
    padding: 0;
    text-align: left
    }

.comments .comments-content .inline-thread {
    padding: 0.5em 1em
    }

.comments .comments-content .comment-thread {
    margin: 8px 0
    }

.comments .comments-content .comment-thread:empty {
    display: none
    }

.comments .comments-content .comment-replies {
    margin-left: 36px;
    margin-top: 1em
    }

.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: bold 12px/20px Arial,sans-serif;
    }

.comments .comments-content .icon.blog-author {
    display: inline-block;
    height: 16px;
    margin: 0 0 -6px 6px;
    width: 16px;
    background: white url(http://cdn3.iconfinder.com/data/icons/fugue/icon/plus-circle.png) no-repeat center;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    border: 2px solid #FFF;
    -moz-box-shadow: 0 0 10px 3px #FFF;
    -webkit-box-shadow: 0 0 10px 3px #FFF;
    box-shadow: 0 0 10px 3px #FFF
    }

.comments .comments-content .datetime {
    margin: 0 0 0 6px;
    font: normal 13px/20px Arial,sans-serif;
    }
.comments .comments-content .datetime a {
    color: #0561D5
    }
.comments .comments-content .comment-header {
    margin: 0 0 8px;
    background: rgba(0, 65, 170, 0.22);
    padding: 5px 0 5px 10px;
    border-left: 5px solid #247AFA
    }

.comments .comments-content .comment-content {
    text-align: justify;
    background: rgba(0, 55, 124, 0.15);
    font: normal 12px/20px Arial, sans-serif;
    padding: 5px 10px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #0B6DD8
    }

.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-left: 48px;
    margin-top: 5px
    }

.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: block;
    font-weight: bold;
    padding: 0.5em
    }

.comments .comments-content .loadmore {
    cursor: pointer;
    margin-top: 3em;
    max-height: 3em
    }

.comments .comments-content .loadmore.loaded {
    max-height: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=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;
    margin: 0.3em;
    overflow: visible;
    padding-right: 4px;
    width: 7px
    }

.comments .thread-expanded .thread-arrow {
    background: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent
    }

.comments .thread-collapsed .thread-arrow {
    background: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent
    }

.comments .avatar-image-container {
    float: left;
    max-height: 36px;
    overflow: hidden;
    width: 36px
    }

.comments .avatar-image-container img {
    max-width: 36px
    }

.comments .comment-block {
    margin-left: 48px;
    position: relative;
    background: #D5D5D5 url(http://3.bp.blogspot.com/-vnyRslt3Xzo/T8m4ABYzAQI/AAAAAAAACUg/jiUhn5t7ym0/s1600/komen.png);
    padding: 5px;
    border: 2px solid #0D749C;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 5px #1FA5FF;
    -webkit-box-shadow: 0 0 5px #1FA5FF;
    box-shadow: 0 0 5px #1FA5FF;
    font: normal 13px/20px Arial,sans-serif;
    }

@media screen and (max-device-width: 480px) {
    .comments .comments-content .comment-replies {
        margin-left: 0
        }
    }
5. பிறகு Save Template என்பதை கிளிக் செய்யுங்கள். 

அவ்வளவு தான் இனி கருத்துரைகள் புதிய தோற்றத்தில் தெரியும் .

நன்றி ..

16 comments:

  1. தகவலுக்கு நன்றி நண்பா

    ReplyDelete
  2. பிரயோசனமான பதிவு பாஸ்...........

    ReplyDelete
  3. ஒரிஜினல் மென்பொருள்களை இலவசமாக பதிவிறக்கம் செய்து கொள்ளுங்கள் ----- http://puthuputhuthagavalgal.blogspot.in/2012/06/download-original-softwares.html

    ReplyDelete
  4. ஓகே..!பாஸ்! நல்ல தகவல்! நன்றி!

    ReplyDelete
  5. நல்ல பதிவு நண்பா .... நன்றி ..

    ReplyDelete
  6. பயனுள்ள பதிவை பதிவிட்ட நண்பனுக்கு நன்றிகள்

    ReplyDelete
  7. நான் இணைத்து விட்டேன் ஆனால் ரிப்ளை ஆப்சன் வரவில்லை

    ReplyDelete
  8. அருமையான பதிவு., இம்முறையில் அனைத்து வலைப்பதிவிலும் இந்த வசதியை கொண்டுவந்துவிடலாம்! நன்றி நண்பரே பகிர்வுக்கு!

    ReplyDelete
  9. நல்ல பதிவு நண்பா .... நன்றி ..

    ReplyDelete
  10. பயனுள்ள பதிவு நண்பரே

    ReplyDelete
  11. அழகாக உள்ளது நண்பா!

    ReplyDelete
  12. Reply பட்டன் வேலை செய்யவில்லை என்று நினைக்கிறேன்.

    ReplyDelete
    Replies
    1. நண்பா கீழே உள்ள இணைப்புக்கு செல்லவும் வேலை செய்கிறது ...

      http://nasalab4.blogspot.in/2012/07/comments-and-buttons.html

      Delete
  13. புதிதாக வெப்சைட் தொடங்க வேண்டுமா...?

    http://zhosting.in சென்று உங்களின் புதிய வெப்சைட்டை நிறுவுங்கள். உங்களுக்கு தமிழிலேயே உதவிகள் வழங்கப்படும்.

    ReplyDelete