Menggunakan Threaded Comments Blogger sekarang Mojang dan Bujang sudah dapat menggunakan-nya di Template Jenis Blogger ini merupakan tambahan fitur baru jadi tinggal meng-aktifkan-nya, kenapa demikian karena sebagian besar Template Bloggernize Mojang dan Bujang sudah di modifikasi.
Go Blog Go tidak menerangkan secara mendetail karena sudah banyak artikel share posting semacam ini bertebaran di Internet, Saya hanya share posting ini sebagai koleksi saja setelah mencoba Try and Error membuat Threaded Comments Bertingkat untuk memahami Susunan CSS-nya setelah melihat dibeberapa situs luar yang disinyalir sebagai awal-mula Ide Briliant ini lahir.
1. Login ke Blogger
2. Dasboard -> Klik Monetize -> Klik Template
3. Jangan lupa Back-Up dulu template-nya
4. Edit HTML -> Klik Expand widget template
5. Cari Kode Tag berikut dengan menggunakan Ctrl + F
<b:include data='post' name='comments'/>Catatan: Kode Tag diatas biasa-nya ada 4 (empat) ditemplate
6. Ganti semua dengan Kode Tag berikut ini (Namun di Template Blogger yang baru Kode Tag ini sudah ada, jadi Mojang dan Mojang bisa abaikan cara ini)
<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if>7. Save Template
8. Kembali ke Dasboard -> Klik Monetize -> Klik Setting
9. Klik Post and Comments -> Klik Monetize Comment Location ? -> Pilih Embedded
10. Scrolling ke bawah -> Klik Other -> Klik Monetize Allow Blog Feed ? -> Pilih Full
11. Save Setting (Sebelah kanan atas)
12. Setting Threaded Comments sudah selesai
13. Sekarang hanya bagaimana membuat tampilan Threaded Comments ini menjadi Cool dilihat-nya
14. Cari Kode Tag <b:includable id='feedLinksBody' var='links'> di Template (gunakan Ctrl+f)
15. Apabila sudah ditemukan, tambahkan Kode CSS berikut ini sebelum Kode Tag <b:includable id='feedLinksBody' var='links'> :
<b:includable id='threaded_comment_css'>
<style type='text/css'>
.comment-thread ol {counter-reset:countcomments}
.comment-thread li:before {content: counter(countcomments,decimal);counter-increment: countcomments;float:right;font-size:16px;color:#555;padding-left:13px;padding-top:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe79adlXdLjBGkHN021qFzEP7XD5WThj8zjS4Z5ZoS212Daj3PeEiA-DGZkOi7PiduzDzKkLtn9F2PufBZbZvP7168iUy0zrxPRcnSCT2iWH-NtX4xTC8bgFIE8X4MZ-Ir1-D6Eftoc0w9/s1600/comment+bubble2.png) no-repeat;margin-top:3px;margin-left:10px;width:42px;height:46px;}
.comment-thread ol ol {counter-reset:contrebasse}
.comment-thread li li:before {content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);counter-increment:contrebasse;float:right;font-size:16px;color:#666}
.comment-block{position:relative;padding:8px;margin:0 5px 0 0;border:1px solid #ddd;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px}
.comment-block .icon.blog-author{position:absolute;right:0;bottom:0;background:rgba(232,149,19,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl5Yt8aXpK4uZZ6Ym8jISWQsPPbj6DIuTD3M4pfq6pWXLN36tln9o81RO4g-ddYJMZNaaipFV3dBbVj32D3RpJU7uUVNQYZLZWm6qOzgRSywywoBVWlKPwy0kGFmlV2zAJPYexKm2h1Cs/s1600/admin2.png) bottom right no-repeat !important;width:100% !important;height:100% !important;margin:0 !important}
.comment-block:hover{background:rgba(139,139,139,0.1);border:1px solid #eee;box-shadow:1px 3px 4px #000;-moz-box-shadow:1px 3px 4px #000;-webkit-box-shadow:1px 3px 4px #000}
.comment-block:hover .icon.blog-author{width:60px !important;height:22px !important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl5Yt8aXpK4uZZ6Ym8jISWQsPPbj6DIuTD3M4pfq6pWXLN36tln9o81RO4g-ddYJMZNaaipFV3dBbVj32D3RpJU7uUVNQYZLZWm6qOzgRSywywoBVWlKPwy0kGFmlV2zAJPYexKm2h1Cs/s1600/admin2.png) bottom right no-repeat !important;background-size:60px 22px !important}
.item-control {display:inline}
.comments .comment .comment-actions a {display:inline-block;margin:0;padding:1px 6px;border:1px solid #C4C4C4;border-top-color:#E4E4E4;border-left-color:#E4E4E4;color:#424242 !important;text-align:center;text-shadow:0 -1px 0 #ffffff;text-decoration:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#EDEDED;background:-webkit-gradient(linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5));background:-moz-linear-gradient(center top,white 20%,#E5E5E5 100%);font:11px/18px sans-serif;padding:2px 8px;margin-right:10px}
.comments .comment .comment-actions a:hover {text-decoration:none;background:#fff;border:1px solid #333}
.comments .thread-toggle {background:#8899d0;font:normal 12px Arial,Sans-Serif;padding:3px 12px;margin-bottom:10px;text-shadow:0 1px 1px rgba(0,0,0,.5);border:2px solid #e9e9e9 !important;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-webkit-box-shadow:0 1px 3px #666;-moz-box-shadow:0 1px 3px #666;box-shadow:0 1px 3px #666}
.comments .thread-toggle:hover {background:#f78d1d}
.comments .comment-thread.inline-thread .comment .comment-block{margin-left:52px}
.comments .comment-thread.inline-thread .comment{margin:0 0 5px 30%;background-color:#666;border:2px solid #999;box-shadow:inset 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px #000;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;padding:10px 15px;color:#222}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0 0 7px 25%}
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0 0 7px 20%}
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0 0 7px 15%}
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0 0 7px 10%}
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0 0 7px 5%}
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0 0 7px 0%}
</style>
</b:includable>
16. Save Template-nya
17. Silahkan Coba hasil-nya dengan mengisi Form Komentar untuk melihat hasil-nya
Cukup panjang juga tadi-nya mau simple Share Posting-nya, semoga bermanfaat dan berguna Mojang dan Bujang. Go Blog Go...!!! Amiin
Wassalam,
0 comments:
Post a Comment
Catatan :
1.Untuk menyisipkan Kode, gunakan Tag <i rel="code">Kode Anda Di-Sini...</i>
2.Untuk menyisipkan Kode Panjang, gunakan Tag <i rel="pre">Kode Anda Di-Sini...</i>
3.Untuk menyisipkan Kode Gambar, gunakan Tag <i rel="image">URL Gambar Anda Di-Sini...</i>
4.Untuk menyisipkan Catatan, gunakan Tag <b rel="quote">Catatan Anda Di-Sini...</i>
NB: Sebelum menyisipkan Kode, konversi terlebih dulu Kode-nya agar bisa tampil di Kolom Komentar