Modifikasi theread komentar blog menjadi keren versi 1.1 - apa kabar sobat blogger, dalam postingan kali ini saya akan memberikan cara modifikasi theread komentar blogger menjadi keren seperti yang ada di blog ini, ini adalah versi pertama (1.1).
Jika kamu menemukan bug, seperti tidak responsif dan lainnya haram melaporkan melalui contact yang tersedia, supaya saya bisa dengan cepat memperbaiki nya dan kemudian memperbarui ke versi terbaru yaitu 1.2, jika kamu mempunyai konsep design theread komentar nya yang bagus kamu bisa request kepada saya.
Nah sekarang mari kita menuju langkah untuk modifikasi theread komentar blogger:
1. Buka Blogger
Untuk memulai silahkan kamu buka Blogger terlebih dahulu, kemudian kamu backup terlebih dahulu template nya, dan selanjutnya kamu masuk ke template editor / Edit html
2. Hapus style komentar lama
Nah untuk selanjutnya kamu cari css stylesheet komentar yang lama atau bawan si template tersebut, Dengan keyword ".comment-block" setelah kamu menemukan nya, dan kemudian kamu hapus semua css komentar tersebut beserta embel-embel nya.
3. Rekatkan css theread modifikasi
Langkah yang terakhir ini, sesudah kamu menemukan dan menghapus css theread komentar yang lama, sekarang kamu Rekatkan external css theread komentar di bawah ini tepat di bawah <head>.
<link href="https" rel="stylesheet" />
Jikalau kamu ingin menggunakan css internal, kamu bisa menggunakan internal css theread modifikasi komentar di bawah ini tepat di atas </head>
/*== COMMENT MATERIAL DESIGN ==*/
.comment-block a{color:#fff;position:relative;z-index:2}
#comments-block{margin:15px 0}
.comment-body{padding:15px 0;margin:0 0}
.comment-body p{margin:0}
.comment-form{overflow:hidden;margin-top:20px}
.comment-footer{margin:0 0 30px}
#comments-block .avatar-image-container{display:none}
h4#comment-post-message{display:none;margin:0}
.comments{border:1px solid #e0e0e0;border-radius:10px;margin:10px}
@media (max-width:400px){.comments{clear:both;padding:20px}}
@media (min-width:400px){.comments{clear:both;margin-top:10px;margin-bottom:0 padding:20px;padding-left:40px}}
.comments .comments-content{font-size:14px;margin-bottom:30px}
.comments .comments-content .comment-thread ol{text-align:left;margin:13px 0;padding:0;list-style:none}
.comment .avatar-image-container{float:left;max-height:40px;overflow:hidden;width:40px;margin-top:10px;margin-left:10px}
.comments .avatar-image-container img{max-width:34px;border-radius:100px;border:2px solid #000}
.comments .comment-block{background:linear-gradient(to right,#000,#000);width:200px;padding:20px;border-radius:10px;position:relative;margin:-5px 40px 0 70px}
.comments .comment-block:before{content:"left:-5px;top:10px;background:#000;z-index:-1;border-radius:100px 100px 100px 0;position:absolute;transform:rotate(45deg)}
.comments .comments-content .comment-replies{margin:10px 0;margin-left:45px}
.comments .comments-content .comment-thread:empty{display:none}
.comments .comment-replybox-single{margin-left:45px;margin:20px 0}
.comments .comment-replybox-thread{margin:20px 0}
.comments .comments-content .comment{margin-bottom:6px;padding:0}
.comments .comments-content .comment:first-child{padding:0;margin:0}
.comments .comments-content .comment:last-child{padding:0;margin:0}
.comments .comment-thread.inline-thread .comment,.comments .comment-thread.inline-thread .comment:last-child{margin:0 0 5px 14%}
.comment .comment-thread.inline-thread .comment:nth-child(6){margin:0 0 5px 12%}
.comment .comment-thread.inline-thread .comment:nth-child(5){margin:0 0 5px 10%}
.comment .comment-thread.inline-thread .comment:nth-child(4){margin:0 0 5px 8%}
.comment .comment-thread.inline-thread .comment:nth-child(3){margin:0 0 5px 4%}
.comment .comment-thread.inline-thread .comment:nth-child(2){margin:0 0 5px 2%}
.comment .comment-thread.inline-thread .comment:nth-child(1){margin:0 0 5px 0}
.comments .comments-content .comment-thread{background:#00000000;color:#fff;padding:0}
.comments .comments-content .inline-thread{background:#00000000;border-radius:10px;margin-left:-90px}
@media (max-width:400px){.comments .comments-content .inline-thread img{position:absolute;left:300px;border:2px solid #777}}
@media (min-width:400px){.comments .comments-content .inline-thread img{position:absolute;left:320px;border:2px solid #777}}
.comments .comments-content .inline-thread .comment-block{background:linear-gradient(to right,#777,#777);width:200px;padding:20px;border-radius:10px;position:relative;margin:0 40px 0 60px}
.comments .comments-content .inline-thread .comment-block:before{content:"right:-5px;top:10px;left:auto;bottom:auto;background:#777;z-index:-1;position:absolute;border-radius:100px 100px 100px 0;transform:rotate(220deg)}
.comments .comments-content .icon.blog-author{display:inline;height:18px;margin:0 0 -4px 6px;width:18px}
.comments .comments-content .icon.blog-author::after{content:"font-style:normal;font-weight:400;text-decoration:inherit;padding-right:4px;color:#175a96}
.comments .comments-content .comment-header{font-size:14px;margin:0 0 15px}
.comments .comments-content .comment-content{margin:0 0 15px;text-align:left;line-height:1.6}
.comments .comments-content .datetime{margin-left:6px}
.comments .comments-content .datetime a{color:#fff}
.comments .comments-content .user{font-weight:700;font-style:normal}
.comments .comment .comment-actions a{display:inline-block;font-size:13px;line-height:15px;margin:4px 8px 0 0}
.comments .continue a{display:inline-block;font-size:13px;padding:.5em}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{text-decoration:underline}
.pesan-komentar p{margin:5px 0 15px}
.deleted-comment{font-style:italic;opacity:.5}
.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{display:inline-block}
.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 .hidden{display:none}
/*== COMMENT MATERIAL DESIGN ==*/
4. Simpan template
Langkah terakhir kamu simpan tema dan kemudian lihat hasilnya, apakah sudah berubah, jika tidak kamu bisa menanyakan kepada saya melalui kolom komentar di bawah.
Template Tutorial modifikasi thread komentar blogspot akan terlihat rapi walaupun view-port browser berbeda
Template sudah di desain SEO Friendly mulai dari breadcrumb yang sudah terindex google sampai schema markup lainnya yang paling penting dalam mesin pencari
Sangat mudah untuk mengubah warna, lebar sampai font melalui Desainer Tema Blogger termasuk pengaturan widget pada menu Layout
Sudah disediakan slot iklan adsense yang siap pakai pada lokasi dengan click rate tinggi dan tidak menghalanginya saat pengguna membaca postingan, anda tinggal mengatur dalam menu layout blogger
Dioptimalkan dengan memperkecil ukuran template seperti kompres CSS dan Javascript agar loading lebih cepat dan tidak menjengkelkan pengguna
Didesain dengan lebih mengutamakan tampilan mobile, tampilannya dibuat modern dan lebih user friendly layaknya sebuah aplikasi mobile, apakah kamu tau?, survey menyatakan bahwa lebih banyak pengguna mobile yang melintas pada google dibandingkan perangkat dekstop
Mendukung berbagai browser berbeda seperti chrome, firefox, Opra, iE dan sebagainya
Tutorial modifikasi thread komentar blogspot
Penting!..
Tuliskan link web/blog anda yang ingin menggunakan template Tutorial modifikasi thread komentar blogspot dengan benar karena ini digunakan untuk verifikasi lisensi otomatis, jika salah maka template tidak bisa digunakan pada domain tersebut
Jika anda memiliki lebih dari satu, maka tuliskan sekaligus link web/blog anda dengan format
[domain-1.com] [domain-2.com] [domian-3.com]
Maksimal 3 domain utama/sub domain jika lebih link ke 4 dan seterusnya dianggap tidak ada
Tuliskan link web/blog anda yang ingin menggunakan template Tutorial modifikasi thread komentar blogspot dengan benar karena ini digunakan untuk verifikasi lisensi otomatis, jika salah maka template tidak bisa digunakan pada domain tersebut
Jika anda memiliki lebih dari satu, maka tuliskan sekaligus link web/blog anda dengan format
[domain-1.com] [domain-2.com] [domian-3.com]
Maksimal 3 domain utama/sub domain jika lebih link ke 4 dan seterusnya dianggap tidak ada
Total Pembayaran
Tidak ada komentar:
Posting Komentar