Anda dapat melihat contoh demo tutorial kali ini secara langsung di blog ini. Untuk melihatnya anda harus berkomentar terlebih dahulu dibawah. Yang akan saya sajikan adalah komentar dengan count (perhitungan/nomor), clean design, rounded photo, dan komentar admin. Apakah anda sudah siap? mari masuk ke tutorialnya :
#1 Install Threaded Comments:
Karena tutorial ini tentang desain threaded comments, maka langkah awal yang harus dilakukan adalah membuat komentar anda menjadi threaded comments. Tetapi jika komentar anda sudah threaded comment (sudah ada fiktur reply), anda tidak perlu mengikuti langkah awal ini. Langsung masuk ke tahap kedua saja.
- Masuk ke akun blogger anda
- Masuk ke bagian template dan edit HTML template
- Cari kode dibawah ini dengan menggunakan fungsi CTRL+F
<b:if cond='data:blog.pageType == "item"'><b:include data='post' name='comments'/> </b:if>
- Hapus dan ganti dengan kode dibawah 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>
#2 Customize Your Comments Format !
Dilangkah kedua ini, kita akan memasukan kode CSS kedalam template. Kode kode CSS ini berisi desain, ukuran, font dsb. Setiap template pasti memiliki kode CSS template default (bawaan), jadi hapus kode bawaannya dan gantikan dengan kode dibawah. Untuk langkah-langkahnya, ikuti step by stepnya dibawah :
- Masuk ke akun Blogger anda > Template
- Backup your template - Kita harus selalu berhati-hati jika terjadi kerusakan pada template
- Kode CSS threaded comments fantastis
.comment-thread ol { counter-reset: mbt-comments;}
.comment-thread li:before {
content: "\25C4"counter(mbt-comments) "\25BA";
counter-increment: mbt-comments;
font-size: 16px;
position: relative;
top: 100px;
font-weight: bold;
font-family: arial, georgia;
color: rgb(199, 199, 199);
left: -110px;
padding: 4px 8px;}
.comment-thread ol ol {
counter-reset: mbt-comments-sub;
padding-top: 20px!important;
margin-bottom: 25px; }
.comment-thread li li:before {
content: counter(mbt-comments) "." counter(mbt-comments-sub);
counter-increment: mbt-comments-sub;
font-size: 14px;
position: relative;
top: 100px;
left: -80px; }
.comments .comments-content .comment-thread ol ol {
padding: 0px 10px 40px 40px;
border: 1px solid #ddd;
box-shadow: 3px 4px 9px rgb(218, 218, 218);
margin-top: 10px; }
.comments .comments-content .comment-thread ol ol li {
margin-bottom: -40px; }
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em; border:0px !important; }
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
width:88%; margin-left:70px;}
.comment-form {
max-width: 100%;
clear: both; }
.comments .comments-content .comment-thread ol li { margin-top: -30px; }
.comments .comment .comment-actions a {
cursor: pointer;
color: rgb(46, 46, 46);
padding: 2px 3px 2px 30px;
Position: RElative;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 12px;
font-weight: 700;
margin-right: 15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYmMqPuaHi3ehQ9y8aXft5gF48bYkrvoFIyXnsGkCk_JlspteASeOQHq6VKjernqlI8jljTuvsNuprlbK5rZPOQBUTatA0yeP901JnDBKT56O_xod_ONC4PgD39Yfrsh0m5RtELluC_-52/s1600/reply.png) no-repeat 9px 0px; float:right; }
.comments .comment .comment-actions a:hover {text-decoration: underline;}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none; }
.comments .comments-content .comment-thread ol li {
border-bottom: 0px dashed rgb(196, 196, 196);
margin-bottom:25px }
.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; }
.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:0px;
padding-bottom:0; }
.comments .comments-content .comment-body {position:relative; }
.comments .comments-content .user {
font-weight: 700;
font-size: 14px;
font-family: 'Open Sans Condensed', sans-serif;
color: #333!important; }
.comments .comments-content .icon.blog-author{
position: absolute;
top: 52px;
right: -36px;
margin: 5px 0px 0px 0px !important;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFDBXcACyGvdinz_6GnrPAeH26caQOq9sOSsDgXYcmD5POy_eO6E-kjSnk5LgDNO18jypVAt_onEkr_nMGJfe-UcDRJsIMrpK1gr-2irkzqZuBMEgcRRVP87HqRCJTNVUCjtB1OiObxYx/s320/aDMIN.png") no-repeat scroll 0% 0% transparent;
width: 90px !important;
height: 90px !important; }
.comments .comments-content .datetime, .comments .comments-content .datetime a {
margin:0px;
display: block;
line-height: 30px!important;
font: italic 11px georgia;
width:180px; }
.comments .comments-content .datetime a {
text-decoration:none;}
.comments .comments-content .comment-header { margin:0 0 15px 10px; }
.comments .comments-content .comment-content { margin: 0 0 10px -50px; }
.comment-header a { color:#333; }
.comment-header a:hover {color:#666; }
.comments .comments-content .comment-content {
text-align:justify;
text-align: justify;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 13px;
border: 1px solid #ddd;
padding: 20px; }
.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 .comment-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: none;
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,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: left;
width: 36px;
max-height: 36px;
margin-top: 15px;
overflow: hidden; }
.comments .avatar-image-container img {
width: 36px;
box-shadow: 2px 2px 0px rgba(0,0,0,0.13) }
.comments .comment-block {
margin-left: 48px;
position: relative; }
.comments .comments-content .comment-replies {
margin-top: 3em;
margin-left: 40px;
font-size: 12px; }
.comments .comments-content .comment-replies a { color: #333;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
Make these Customizations:
Sejujurnya Anda akan perlu mengeditnya lagi dan saya sarankan menggunakan inspect element pada browser untuk mengisi semua celah yang hilang dengan keselarasan dan stylish yang bagus. Karena setiap template dikodekan berbeda sehingga akan ada sedikit perbedaan dalam desain yang muncul di blog Anda. Jadi gunakan Chrome atau browser lainnya yang bisa memeriksa elemen-elemen halaman.
- Kode warna yellow adalah kode Heksadesimal untuk dua panah yang mengelilingi Nomor (count). Anda dapat mengubah ini dengan simbol lainnya yang menurut anda lebih bagus.
- Kode warna brown merupakan ikon reply dan delete link. Anda bisa menggantinya dengan link gambar kustom Anda sendiri jika Anda inginkan.
- Kode berwarna green adalah kode Pita Admin. Anda dapat mengubahnya juga jika Anda menginginkannya.
- Jangan rubah semua gaya lainnya, nanti desainnya akan rusak. Anda hanya diperbolehkan merubah warna-warnanya saja.
4. Save your template and you are done!
Optimalisasi:
Karena kode CSS threaded comment terlalu panjang dan akan memakan memori (menambah ukuran template). Otomatis menambah berat loading blog. Baca Percepat Loading blog dengan cara compress template.
- Merubah tampilan Komentar standar menjadi Lebih Keren
- Mengganti tulisan Poskan Komentar Dengan Gambar
- Cara Optimalkan Komentar Blogger untuk SEO
- Cara membuat comment policy with dropdown effect
Last word
Bagaimana? cukup mudahkan cara-cara diatas? Saya telah mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Membuat komentar standar menjadi fantastis disertai counter. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan. Oh iya jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI dan jika mau copas, cantumin dong Url postingan ini ya !
Sekian post tentang Membuat komentar standar menjadi fantastis disertai counter. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!
Credits: Mohammad Mustafa Ahmedzai
Credits: Mohammad Mustafa Ahmedzai
AD-BLOCKER DETECTED!
