13 Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Treaded Comment Nersi 1 & 2Tutorial kali ini sebagaimana janji saya pada postingan Mengaktifkan Threaded Comments Pada Custom Templates Blogger, bahwa saya juga akan mengetengahkan cara memodifikasi tampilan threaded comments blogger baik modifikasi atau custumize threaded comments yang ada menggunakan penambahan atau edit CSS atau dengan penambahan script.

Mengapa kita perlu memodifikasi tampilan threaded comment yang ada karena tampilan defaulth threaded comments blogger sangat simple seperti image berikut:

Tampilan Treaded Comment Blogger 

Maka kali ini dengan sedikit penambahan CSS kita akan merubah tampilan diatas. Ikutilah langkah-langkah berikut:

Modifikasi Threaded Comment Blogger Versi Pertama

  • Setelah login ke akun anda, pada sdasbor klik menu template >> edit HTML
  • Sekarang cari kode ]]></b:skin> (Gunakan control F untuk memudahkan pencarian)
  • Tambahkan semua kode kode CSS berikut diatas kode ]]></b:skin>

Untuk menambahkan border pada kolom komentar tambahkan CSS berikut:

.comment-block {border:1px solid #666;border-radius:8px;padding: 3px;}

Modifikasi reply comments tambahkan CSS berikut:

.comment-actions {

margin-right: -2px;

margin-top: -15px;

font-size: 10px;

text-transform: uppercase;

float: right;

border: 1px #DDD solid;

padding: 3px;

line-height: 1em;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

color: #999;

}

.comment-actions:hover {

background: black;

color: white;

}

Sekarang modifikasi image avatar komentator tambahkan CSS berikut:

.avatar-image-container img{border-radius:20px;background: url("http://cdn1.iconfinder.com/data/icons/crystalproject/32x32/apps/personal.png") no-repeat scroll center center;

}

Sekarang reply button dibawah post komentar tambahkan CSS berikut:

.continue{

width: 45px;

font-size: 10px;

text-transform: uppercase;

border: 1px #DDD solid;

padding: 3px;

line-height: 1em;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

color: #999;

}

.continue:hover {

background: black;

color: white;

}

Terakhir modifikasi dropdown reply comments tambahkan CSS berikut:

.thread-count{

font-size: 10px;

text-transform: uppercase;

border: 1px #DDD solid;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

color: #999;

}

.thread-count:hover {

background: black;

color: white;

}

Sekarang setelah mengikuti semua langkah-langkah diatas, tampilan threaded comments anda akan seperti image berikut:

Modifikasi Treaded Comment Versi 2

Modifikasi Threaded Comments Blogger Versi kedua

  • Tambahkan kode CSS berikut diatas kode ]]></b:skin>

/*=== 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:

  • Selanjutnya untuk membuat tampilan avatarnya menarik, tambahkan CSS berikut di bawah CSS tadi :

/*=== 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(https://lh5.googleusercontent.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;
}

  • Simpan pekerjaan anda. Maka hasilnya tampilan threaded comments blogger versi kedua ini seperti image berikut;

Modifikasi Treaded Comment Versi 2

Demikian tutorial memodifikasi threaded comments blogger versi 1 dan 2. InsyaAllah pada kesempatan lain akan saya posting cara memodifikasi threaded comments blogger dengan penambahan script. Semoga bermanfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

13 komentar :

  1. Keren threaded comments-nya..berarti yang ada di blog saya masih versi 1 kali, sis?
    Thans sebelumnya wat sharing bagusnya :)

    BalasHapus
    Balasan
    1. Versi 1 seperti di blog ini atau masih pakai threaded comments default blogger mksdx? Thanks apresiasinya!

      Hapus
  2. manis ya tampilan threaded comment-nya.. :)
    salam kenal..

    BalasHapus
  3. salam kenal..kok gak berfungsi ya di blogku..
    alh-jr.blogspot.com

    BalasHapus
    Balasan
    1. Tutorial diatas hanya untuk modifikasi tampilan default threaded comments blogger, untuk mengaktifkannya diblog lihat tutorial sebelumnya dgn judul Mengaktifkan Threaded Comments Pada Custom Templates Blogger. Semoga membantu.

      Terimakasih kunjungan dan apresiasinya!

      Hapus
  4. Assalamu'alaikum mbak...n salam kenal
    Threaded Comments sudah saya aktifkan seperti yang mbak tutorialkan di mengaktifkan Threaded Comments tapi kok ndak jalan ya mbak ...??? kesalahannya dimana ya saya sampai mumet hehehehehe..

    BalasHapus
  5. eee iya saya lupa saya bagaimana cara menambahkan tombol hapus di Threaded Comments blog saya ya mbak...
    terima kasih sebelumnya

    BalasHapus
  6. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  7. di blog aku belum bisa thread comments :(

    BalasHapus
  8. .: ga' fungsi di blog saya, kenapa ya?

    BalasHapus
  9. terimakasih gan,, infonya mantap
    kunjung balik ya http://dpc-faster.blogspot.com

    BalasHapus
  10. untuk yang versi kedua, aku coba ganti icon adminnya kok gak muncul gambarnya ya?

    background-image: url(http://siteexpansion.com/img/smilies/21.gif);/*icon untuk admin*/

    mohon bantuannya

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!