earth

Guestbook

/* Iklan google ads */
Tahu kan Threaded Comments? Itu lho, rangkaian komentar yang bisa dibalas. Nah, mengenai "makhluk" ini entah bermula dari siapa, soalnya begitu banyak blogger yang sudah memuat tulisan ini dengan cara copy paste tanpa menyebutkan sumbernya (hehehe...). Akibatnya, kesalahan penyebutan banyaknya kode yang harus diganti pun sama (padahal cuma satu, hehehe...).

Sebenarnya jika sobat rajin gonta-ganti template, banyak template sekarang yang sudah menambahkan kode HTML untuk Threaded Comments, seperti template WP Zine. Kalau Threaded Comments-nya tidak berfungsi, hal itu dikarenakan setelan komentarnya tidak disetel ke bentuk tersemat, karena Threaded Comments ini hanya bisa berfungsi apabila setelan komentar dibuat tersemat di bawah entry.

Jadi jika mau menambahkan Threaded Comments ini, terlebih dahulu harus mengubah setelan komentar menjadi tersemat. Selanjutnya, seperti biasa:
  • Dari halaman Dasbor, pilih Template - Edit HTML (untuk amannya, lakukan duplikasi template terlebih dahulu).
  • Beri tanda centrang pada Expand Template Widget.
  • Kemuadian cari kode :
    <b:include data='post' name='comments'/>
    
    yang terletak antara kode-kode berikut:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:include data='post' name='comments'/>
    </b:if>
    
  • Selanjutnya ganti kode yang berwarna merah dengan kode ini:
    <!--Threaded Komentar-->
    <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
    <b:else/>
    <b:include data='post' name='comments'/>
    </b:if>
    <!--/Threaded Komentar-->
    
  • Setelah itu save, jika hanya ingin membuat Threaded Comments saja.
  • Namun akan tanpak kurang menarik, kira-kira hasilnya akan seperti ini (tergantung template yang digunakan):
Jika ingin tampilan Threaded Comments ini lebih keren, seperti pada blog Anasta Love ini, lakukan hal berikut:
  • Ubah CSS #comments h4 dengan ini (tidak penting):
    #comments h4 {
    background: url(http://3.bp.blogspot.com/-By_ngnREm4I/UEMT8CsE_SI/AAAAAAAAIAo/RGNV0JAEfro/s1600/commentposts.png) no-repeat;
    padding-left:37px; margin:0; 
    font-size:14px; font-weight:bold; 
    line-height:32px; text-align:justify; 
    }
    
  • Setelah itu tambahkan CSS berikut (penting!):
    /*=== Threaded Comments ===*/
    .comments .comments-content .icon.blog-author {
    background-image: url(http://siteexpansion.com/img/smilies/21.gif);/*icon untuk admin*/
    background-repeat: no-repeat;
    width:38px; 
    height:20px;
    }
    .comments .comments-content .loadmore a {
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    }
    .comments .comment .comment-actions a {
    padding-right: 5px;
    padding-top: 2px;
    }
    .comments .continue {
    margin-top:2px;
    border-top: 2px solid silver;
    }
    .comments .comments-content .datetime a{
    float: right;
    font-size:10px;
    }
    #comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
    background:#FAFAFA url(url comment) top repeat-x;
    margin:5px auto 0;
    padding:5px 5px;
    border:1px solid silver;
    }
    .comment-actions a { 
    padding:2px 5px;
    margin-right:10px;
    border: 1px solid #C4C4C4;
    border-top-color: #E4E4E4;
    border-left-color: #E4E4E4;
    color: #424242 !important;
    text-align: center;
    text-shadow: 0 -1px 0 white;
    text-decoration: none;
    font: 11px sans-serif;
    border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px;
    background: #EDEDED;
    background: linear-gradient( center top, white 20%, #E5E5E5 100% );
    background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
    background: -webkit-linear-gradient( center top, white 20%, #E5E5E5 100% );
    background: -o-linear-gradient( center top, white 20%, #E5E5E5 100% );
    background: -ms-linear-gradient( center top, white 20%, #E5E5E5 100% );
    }
    .comment-actions a:hover {
    text-decoration: none !important;
    background: #CCC;
    background: linear-gradient(center top,#EEE 20%,#CCC 100%);
    background: -moz-linear-gradient(center top,#EEE 20%,#CCC 100%);
    background: -webkit-linear-gradient(center top,#EEE 20%,#CCC 100%);
    background: -o-linear-gradient(center top,#EEE 20%,#CCC 100%);
    background: -ms-linear-gradient(center top,#EEE 20%,#CCC 100%);
    }
    .comments .avatar-image-container {
    margin-left:0px;
    }
    
    Catatan:
  • Boleh ditempatkan dimana saja asal di atas kode ]]<>/b:skin>.
  • Untuk mudahnya, tambahkan saja setelah atribut CSS untuk #comments h4 tadi atau di bawah CSS untuk komentar.
  • Selanjutnya jika ingin tampilan avatar container-nya menarik, tambahkan CSS berikut di bawah CSS tadi (lumayan penting):
    /*=== BOX Avatar dan Blank Avatar ===*/
    .avatar-image-container {
    box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
    -webkit-box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
    }
    .avatar-image-container img {
    background:url(http://3.bp.blogspot.com/-roM2Sm4S9xk/UEtqddiMo4I/AAAAAAAAIQ8/oSOxOIGl5og/s1600/blog-anonim.png);
    width:35px; height:35px; border:none;
    }
    .avatar-image-container img:hover {
    transform:scale(1.2) rotate(360deg); -ms-transform:scale(1.2) rotate(360deg); -o-transform:scale(1.2) rotate(360deg); -moz-transform:scale(1.2) rotate(360deg); -webkit-transform:scale(1.2) rotate(360deg);
    transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; -webkit-transition:0.5s;
    }
    
  • Save hasilnya lalu ucapkan Alhamdulillah...

Silahkan test sendiri Threaded Comments-nya. Menarik kan?

Ok, segitu aja sob. Semoga bermanfaat .....
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    12 komentar

    Kang masih ingat waktu membantu saya memperbaiki template 3 tahun yang lalu he he saya masih seperti yang dulu tetap tidak tahu mengoprek template jadi begitu deh make template bawaan blogger saja xi xi

    13 September 2012 02.40  

    Apa kabar Om, semoga selalu sehat ya. Selamat beraktifitas aja, moga hari ini berjalan dengan lancar.

    13 September 2012 09.24  

    alhamdulillah
    baru sampai Threaded Comments aja eunk
    makasih sobat

    14 September 2012 11.24  

    Baus sekali tutorialnya kang.
    ngomong2 cara menyembunyikan form comment seperti gimana ya?,
    jika g keberatan tlg kirim link atau kode-nya ke email saya ya : admin(at)rumahexcel(dot)com

    21 Oktober 2012 21.05  

    Salam jumpa lagi kang lama gak ngeblog nih.
    dulu blog saya http://mptrhreelyrics.blogspot.com dan link blog saya juga masih ada di blognya kang enes, skr saya fokus di http://bl1t4r.blogspot.com

    Salam Blogger Blitar

    28 November 2012 15.49  

    mw tanya bro enes, kenapa ya.
    pas saya ikutin tutor diatas, kok tampilan post nya sama sekali gak berubah?.

    mohon pencerahannya..

    thanks before.

    2 Januari 2013 21.48  

    Siiip... akhirnya sukses juga pake threaded comment. Nuhun ah lur...

    16 Februari 2013 19.55  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler