Fitur threaded comment yang akan saya berikan adalah
1. Comment boubble
2. Author badge
3. Tambahkan komentar shorcut, costum reply dan delete button
4. Reply and delete dengan efek Hover button
Tertarik ?
Pemasangan
1. Login ke akun blogger
2. Pastikan bahwa anda telah mengaktifkan Threaded comment di blog anda.
3. Template > Edit HTML
4. Pergi ke
]]></b:skin>5. Paste kode ini diatasnya
/*Costum threaded comment style by idbloggertrick.blogspot.com*/ /*Credit by idbloggertrick.blogspot.com*/ .comments { padding-top: 30px; clear:both; margin: 0; } .comments h4 { font-size: 23px; text-transform: capitalize; } #comments-block .avatar-image-container.avatar-stock img{ border-width:0; padding:1px; } #comments-block .avatar-image-container{ height:37px; left:-45px; position:absolute; width:37px; } #comments-block.avatar-comment-indent{ margin-left:45px; position:relative; } #comments-block.avatar-comment-indent dd{ margin-left:0; } iframe.avatar-hovercard-iframe{ border:0 none; padding:0; width:25em; height:9.4em; margin:.5em; } .comments .comments-content{ margin-bottom:16px; } .comments .continue, .comments .comment .comment-actions { display: block; text-align: right; } .comments .continue a, .comments .comment .comment-actions a{ display: inline-block; padding: 0 14px; background: #E53B2C; color: #fff; font-family: Georgia, sans-serif; font-style: italic; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; transition: all 0.25s linear; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; } .comments .continue a:hover, .comments .comment .comment-actions a:hover{ background: #333; color: #fff; text-decoration: none; } .comments .comments-content .comment-thread ol{ margin:20px 0 0 -10px; overflow:hidden;} .comments .comments-content .inline-thread{ padding:0;} .comments .comments-content .comment-thread{ margin:0 0 0 -15px;} .comments .comments-content .comment-thread:empty{ display:none} .comments .comments-content .comment-replies{ margin-left:0px;margin-top:0px;} .comments .comments-content .comment:first-child{padding-top:4px} .comments .comments-content .comment:last-child {border-bottom: 1px solid #DDDDDD; padding-bottom:0; } .comments .comments-content .comment-body{position:relative} .comments .comments-content .user a { font-size: 16px; font-style: normal; font-weight: bold; line-height: 1.375em; } .comments .comments-content .icon.blog-author {display:inline-block;height:18px;margin:0 0 -4px 6px;width:18px} .comments .comments-content .datetime { display: block; line-height: 21px; margin-bottom: 1em; margin-left: 0px; } .comments .comments-content .datetime a { color: #333; } .comments .comments-content .datetime a:hover { text-decoration:none; } .comments .comments-content .comment-header { margin: 0; min-height: 40px; padding: 10px; position: relative; } .comments .comments-content .comment-content{ margin: 0; padding: 0 10px 10px 10px; position: relative; } .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:4px;margin-top:5px} .comments .comment-replybox-thread { margin: 5px 0 5px 15px; } .comments .comments-content .loadmore a { display:block;padding:10px 16px;text-align:center} .comments .thread-toggle { cursor:pointer;display:none;} .comments .continue{ float: right; cursor:pointer; display:inline-block; } .comments .continue a{ display:block; font-weight: normal; margin: 0 15px 0 0; } .comments .comments-content .loadmore{cursor:pointer;margin-top:3em;max-height:3em} .comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden} .comments .thread-chrome.thread-collapsed{display:none} .comments .thread-toggle .thread-arrow{display:inline-block;height:6px;margin:.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: right; padding: 0; margin: 0; max-height:55px; width:55px; } .comments .avatar-image-container img { display: block; max-width: 55px; width: 55px; border-radius: 27.5px; -moz-border-radius: 27.5px; -o-border-radius: 27.5px; -webkit-border-radius: 27.5px; } .comments .comment-block { margin-left: 0px; position: relative; } .comments .comments-content .comment { background: #fff; border: 1px solid #DDDDDD; list-style: none outside none; margin: 0 13px 15px 25px; padding: 10px !important; } .comments .comments-content .comment:nth-child(even) { background: #F9F9F9; } .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHpAHWvtK7RklFDZjSdwumrFPYP_aoMTeX2rXSXdJEst4ivCwVGofdiOzd7HVw2DfHzJ2WJs77Q-vCWSLWRV3E2Kq2CbhGc9lIV3UaadyeThvJixhi4YykVZ79Notx-cXkxiYqT7SBxQ/s320/picresized_1338989738_comment-author-green.gif);width:36px;height:36px} .comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: left; font-size: 20px; color: #555555; padding-left:10px; padding-top:3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZTQHIzTfgTnF7icnBJ4Ls7HxImVazGtesPOQ9fP9QMerOWNlXQK2YE7NhAvg1J7LHKsLS3Ahww2ZkDUaG1Md826yT00-a6rzr4xFthM8QL7xaGzmAFjn9dt3QZCTGx-DWXFgSt4IiT5xi/s1600/bubble+comment.png) no-repeat; margin-top:7px; margin-left:10px; width: 50px; height: 48px; } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: left; font-size: 18px; color: #666666; }
Tidak ada komentar:
Posting Komentar