Membuat kotak komentar blogger dengan threaded comment, Aplikasi membalas komentar yang keren dan pasti nya akan menambah kesan indah di blog anda. Custom kotak komentar ini tidak merusak atau menghilangkan kotak komentar default blogger anda.
OK langsung aja !?
Pertama aktifkan dulu thread comment blog mu, Cara nya bisa di simak di sini :
Cara mengaktifkan Threaded Comments blogger
Langkah pertama tentu anda harus mengaktifkan pengaturan komentar anda, ke halaman setting > Comments.
Pilih show dan Embedded below post untuk Comment Form Placement
Langkah kedua jangan lupa backup templates untuk menjaga hal yang tidak di inginkan.
Buka halaman design > Edit HTML > centang expand widgets templates
Cari kode
<b:include data='post' name='comments'/>.
Kira kira kodenya seperti di bawah ini.
<b:if cond='data:blog.pageType == "static_page"'> <b:include data='post' name='comments'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> </b:if>
Jika sudah ketemu, silahkan anda ganti semua kode tersebut dengan kode di bawah ini
<b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if>
Langkah terahir yaitu simpan template dan lihat hasilnya. ( cara ini di ambil dari
blog bamz.us )
OK jika yang di atas ini suda selesai silakan di lanjut untuk memasang java script dan custom css nya, Mari simak tutorial ke 2 ini dengan baik-baik .
Pertama login ke blog anda > Design > Edit Html > Expand Widget Templates.
(jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan)
Cari kode
<b:includable id='threaded_comment_css'>, kira kira semua kodenya seperti di bawah ini.
<b:includable id="threaded_comment_css"><style>.comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em;}.comments .comments-content { font-size: 13px; margin-bottom: 16px;}.comments .comment .comment-actions a { padding-top: 5px; padding-right: 5px;}.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 0px;}.comments .comments-content .comment-thread:empty { display: none;}.comments .comments-content .comment-replies { margin-top: 1em; margin-left: 36px;}.comments .comments-content .comment { margin-bottom:16px; padding-bottom:8px;}KARENA KEPANJANGAN, SAYA SINGKAT SAJA KODENYA,.comments .avatar-image-container { float: left; width: 36px; max-height: 36px; overflow: hidden;}.comments .avatar-image-container img { width: 36px;}.comments .comment-block { margin-left: 48px; position: relative;}/* Responsive styles. */@media screen and (max-device-width: 480px) { .comments .comments-content .comment-replies { margin-left: 0; }}</style></b:includable>
Silahkan anda ganti semua kode tersebut dengan kode di bawah ini
<b:includable id='threaded_comment_css'> <style>.comments { clear: both; marfin-top: 10px; margin-bottom: 0px; line-height: 1em;}.comments .comments-content { font-size: 12px; margin-bottom: 16px;font-family: Verdana;font-weight: normal;text-align:left;line-height: 1.4em;}.comments .comment .comment-actions a {background:#1F9EE5;cursor:pointer;color:#ffffff;padding:2px 3px; margin-right:10px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;font:9px sans-serif; border:1px solid #1F9EE5;}.comments .comment .comment-actions a:hover { text-decoration: none; background:#5AB1E2; border:1px solid #5AB1E2;}.comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: none;}.comments .comments-content .inline-thread { padding: 0.5em 1em;}.comments .comments-content .comment-thread { margin: 8px 0px;}.comments .comments-content .comment-thread:empty { display: none;}.comments .comments-content .comment-replies { margin-top: 1em; margin-left: 40px; font-size:12px; background:#EBF5FE; border: 1px dotted #DDD;}.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-style:normal; font-weight:bold;}.comments .comments-content .icon.blog-author { width: 18px; height: 18px; display: inline-block; margin: 0 0 -4px 6px;}.comments .comments-content .datetime { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrw6wahzpbLwsyBgXmbxxEBwm3CVxyI3yfCuciXt8RvLcxJ2tCUYx9DH2tFDUHIHkEZC0Ck45r9UmPrhe7H3kXRsp0Ep7JCXIIpXOMqqaBmKOB_4HdiNF99-W6YTdIHRgH4F36Dw1FGin9/h80/icon_clock.gif) no-repeat; margin-left:6px;padding-left:20px;font-size:10px;float:right;}.comments .comments-content .comment-header,.comments .comments-content .comment-content { margin:0 0 8px;}.comments .comments-content .comment-content { text-align:none;}.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-top: 5px; margin-left: 48px;}.comments .commdnt-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; padding: 0.5em; font-weight: bold;}.comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em;}.comments .comments-content .loadmore.loaded { max-height: 0px; 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;}.comments .avatar-image-container { float: left; width: 36px; max-height: 36px; overflow: hidden;}.comments .avatar-image-container img { width: 36px;}.comments .comment-block { margin-left: 48px; position: relative;}/* Responsive styles. */@media screen and (max-device-width: 480px) { .comments .comments-content .comment-replies { margin-left: 0; }} </style></b:includable>
Langkah terahir yaitu simpan template dan lihat hasilnya.
Anda tidak perlu bingung, pokoknya yang di ganti yaitu mulai dari
<b:includable id='threaded_comment_css'> sampai
</b:includable>.comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em; } .comments .comments-content { font-size: 12px; margin-bottom: 16px; font-family: Verdana; font-weight: normal; text-align:left; line-height: 1.4em; } .comments .comment .comment-actions a { background:#1F9EE5; cursor:pointer; color:#ffffff; padding:2px 3px; margin-right:10px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:9px sans-serif; border:1px solid #1F9EE5; } .comments .comment .comment-actions a:hover { text-decoration: none; background:#5AB1E2; border:1px solid #5AB1E2; } .comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: none; } .comments .comments-content .inline-thread { padding: 0.5em 1em; } .comments .comments-content .comment-thread { margin: 8px 0px; } .comments .comments-content .comment-thread:empty { display: none; } .comments .comments-bontent .comment-replies { margin-top: 1em; margin-left: 40px; font-size:12px; background:#EBF5FE; border: 1px dotted #DDD; } .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-style:normal; font-weight:bold; } .comments .comments-content .icon.blog-author { width: 18px; height: 18px; display: inline-block; margin: 0 0 -4px 6px; } .comments .comments-content .datetime { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrw6wahzpbLwsyBgXmbxxEBwm3CVxyI3yfCuciXt8RvLcxJ2tCUYx9DH2tFDUHIHkEZC0Ck45r9UmPrhe7H3kXRsp0Ep7JCXIIpXOMqqaBmKOB_4HdiNF99-W6YTdIHRgH4F36Dw1FGin9/h80/icon_clock.gif) no-repeat; margin-left:6px; padding-left:20px; font-size:10px; float:right; } .comments .comments-content .comment-header, .comments .comments-content .comment-content { margin:0 0 8px; } .comments .comments-content .comment-content { text-align:none; } .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-top: 5px; margin-left: 48px; } .comments .commdnt-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; padding: 0.5em; font-weight: bold; } .comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em; } .comments .comments-content .loadmore.loaded { max-height: 0px; 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; } .comments .avatar-image-container { float: left; width: 36px; max-height: 36px; overflow: hidden; } .comments .avatar-image-container img { width: 36px; } .comments .comment-block { margin-left: 48px; position: relative; } /* Responsive styles. */ @media screen and (max-device-width: 480px) { .comments .comments-content .comment-replies { margin-left: 0; } }
OK cara dan tutorial lengkap untuk membuat
custom kotak komentar blogger menjadi threaded comments default. semoga cara ini dapat di mengerti dan jika masi ada kesulitan silakan tanyakan kembali kesaya. insya allah saya bisa bantu!?
History:
Tutorial ini 80% saya buat dengan mencuri script
hide page sorce template nya blogger
www.bamz.us, namun saya suda izin dengan abang bamz untuk di jadikan sebuah postingan di blog saya. dan abang bamz hanya bilang no problem.
Postingan ini juga permintaan dari seorang blogger dengan domain
www.Chenkgelate.com .
OK trimakasi happy blogging !! :D 
No comments:
Post a Comment