9
Costum threaded comment di Blogger
Sejak Threaded comment diperkenal di blogger, sudah banyak yang memasangnya. Jika anda ingin mencari Costum threaded comment yang bagus, anda tidak salah masuk. Sebenarnya tidak mudah untuk membuat threaded comment yang bagus karena butuh pengetahuan tentang CSS yang banyak tetapi saya akan menyediakannya secara gratis.
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(http://2.bp.blogspot.com/-zz8GxHMWPAo/T89XNSMjjeI/AAAAAAAAGl4/7IfX13BSmxg/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(http://3.bp.blogspot.com/-VUzYUHeMr9A/T4x_6ddRwNI/AAAAAAAAB14/zMBy66dPc_Q/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; }

Posting Komentar Blogger

  1. saya coba ni gan , oh ya kunjungi juga www.mshareart.blogspot.com banyak info menarik seputar blog terbaru 2013

    BalasHapus
  2. cara ngapus nomor nya gmn ya ?

    BalasHapus
    Balasan
    1. hapus yang sudah saya beri background merah

      Hapus
  3. http://www.mashafiz.com/2014/04/loading-blog.html heheheh.. ikut nimbrung deh mas :D

    BalasHapus
  4. ini model yang saya cari gan, tolong ditambahkan versi responsivenya. trims

    BalasHapus
  5. Terimakasih artikelnya sangat membantu,
    titip link ane ya gan

    http://bit.ly/1LENlgG

    terbaik dan terpercaya

    BalasHapus

 
Top