earth

Guestbook

/* Iklan google ads */
Pada kebanyakan template, tampilan comment-body untuk komentator dan author (pemilik/admin) tidak dibedakan sehingga warna huruf, background, maupun bingkai (border) kelihatan seragam. Akibatnya, agak sulit untuk membedakan mana komentar/jawaban admin dan mana yang bukan jika tidak diberi tanda @ pada saat admin me-replay komentar kita.

Untuk mengatasi hal tersebut kamu bisa membuat tampilan berbeda pada comment-body. Dengan membuat tampilan yang berbeda ini, selain untuk memudahkan "pembedaan" tadi, juga agar tampilan blok komentar menjadi lebih menarik.

Langkah-langkah yang harus kamu lakukan dalam membuatnya adalah sebagai berikut:
Langkah Pertama
  • Dari halaman dasbor, klik Tata Letak - Edit HTML.
  • Lakukan duplikasi template untuk jaga-jaga bila terjadi masalah.
  • Beri tanda centrang pada Expand Template Widget.
  • Kemudian cari kode berikut (gunakan Control F atau F3):
    <dd class='comment-body'>
    
  • Jika sudah ketemu, tambahkan script ini di atasnya:
    <b:if cond='data:comment.author == data:post.author'>
    <dd class='comment-body-author'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>
    
  • Setelah itu cari kode penutup dd seperti ini (perhatikan warna biru):
    <p><data:comment.body/></p>
    </b:if>
    </dd>
    
  • Jika sudah ketemu, tambahkan penutup b:if ini di bawahnya:
    </b:if>
    
Langkah Kedua
  • Carilah kode CSS untuk comment-body, lalu kopi CSS tersebut (berikut atributnya) dan paste di bawahnya.
  • Setelah di-paste, ubahlah kalimat comment-body menjadi comment-body-author dan tambahkan perintah untuk warna huruf (color) dan latar (background). Misalnya seperti ini:
    .comment-body {
    atribut perintah pada comment-body
    }
    .comment-body-author {
    atribut yang sama dengan atribut pada comment-body
    color:#333333; /* warna huruf */
    background:#F6F6F6; /* warna latar */
    }
    
  • Aturlah warna huruf dan warna latar sesuai keinginanmu.
  • Jika tidak ada, buatlah kode CSS untuk comment-body-author yang diletakkan di atas ]]></b:skin> (sebaiknya ditempatkan pada deretan CSS untuk Comments), seperti ini:
    .comment-body-author {
    margin:0px;
    padding:5px;
    color:#333333; /* warna huruf */
    background:#F6F6F6; /* warna latar */
    border: 1px solid #CCC; /* warna bingkai */
    border-radius:7px;
    -moz-border-radius:7px; 
    -webkit-border-radius:7px; 
    }
    
    Pada kode CSS di atas menggunakan peritah border radius. Kamu bisa menghapusnya jika mau.
  • Aturlah ukuran margin, padding, warna huruf, warna latar, dan warna bingkai sesuai keinginanmu.
  • Selanjutnya, cari kode CSS untuk comment-body p, lalu ubah menjadi comment-body p, comment-body-author p (dengan tidak mengubah atribut perintah yang ada), seperti ini:
    .comment-body p, comment-body-author p {
    atribut perintah pada comment-body p
    }
    
  • Jika tidak ada, buatlah kode CSS berikut di bawah CSS untuk comment-body-author, seperti ini:
    .comment-body-author p {
    margin:0px;
    padding:10px;
    }
    
  • Aturlah ukuran margin dan padding sesuai keinginanmu.
  • Simpan hasil editing ini dan ucapkan Alhamdulillah.....

Sekarang, coba lihat kotak komentar blog kamu yang sudah terisi. Lihat perbedaan antara komentar kamu dan komentar orang lain, apakah ada perbedaan? Atau lihat contoh blok komentar pada blog Sastra Culun ini.

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

    Terimakasih sudah membaca artikel SC Community's Blog

    47 komentar

    Asslamu'alaikum.. boleh dicoba nich..sembari mau ngucapin salam kenal.. ajah..terimakasih tips dan triknya.. ^_^

    2 Mei 2010 pukul 21.49  

    nu abdi mah asana tos di bentenkeun kang, antara pemilik sareng pengunjung, nganggo background biru,nuhun infona.

    nuhun ah kang tos di longok.....
    nembe tiasa mosting deui, biasa kang konsentrasina rada pabaliut, paburencay sareng urusan nu lianna.....

    2 Mei 2010 pukul 22.52  

    dulu aku pernah coba yang begini kang tapui tempalte kumalah error nggak berani lagi deh dasar gaptek aku ini

    3 Mei 2010 pukul 08.26  

    aku ijin pakae recent comments ya kang

    3 Mei 2010 pukul 08.28  

    Info yang bermanfaat Kang...hatur nuhun pisan

    3 Mei 2010 pukul 19.10  

    Terima kasih Kang.., akan aku pelajari.. biar aku gak salah pasang hehehe.
    Kang eNeS kok gak pasang ? Soalnya aku pengen liat contohnya. ^_^

    3 Mei 2010 pukul 19.36  

    bener ru, contonya yang mana unk

    hehe...2012 Ke nu aye ge di rehab kalo sdh banyak yg komentar :DDD

    3 Mei 2010 pukul 21.03  

    salam sobat
    aaya akan coba buat ,
    agar tampilan komentar pemilik blog berbeda dengan komentar sahabat.
    trims ilmunya

    3 Mei 2010 pukul 21.46  

    kalau di blog ini bloleh deh aku coba kang

    4 Mei 2010 pukul 07.14  

    Mantaff gan, tipsnya yahuuud banget.
    Thanks for sharing yach

    4 Mei 2010 pukul 09.33  

    Selalu dapat info yang menarik,,upamii hadir didieu haur nuhun pisan

    4 Mei 2010 pukul 12.27  

    kayanya blog q juga dah gt, dah baaan dari templatenya

    4 Mei 2010 pukul 12.36  

    Hebat pisan kang bisa nulis sebanyak itu tutorial

    4 Mei 2010 pukul 18.58  

    Silaturahmi, tipsnya sudah saya coba, trims!

    4 Mei 2010 pukul 19.06  

    Banyak kuperoleh disini dan kupakai diblog saya, matur nuwun!

    4 Mei 2010 pukul 19.07  

    assalamu'alaikum ...
    lapor Kang, scroll blogroll sudah selesai, alhamdulillah. Yang ini bisa dicoba tapi nanti aja hehe ... nuhun Kang

    4 Mei 2010 pukul 20.12  

    Aku juga belum berani nyoba nih, takut aku salah masukin kodenya... apalagi ada warning : "atribut perintah yg ada jangan dirubah... "
    Soalnya kalau aku salah masukin kode, kalau rusak aku cuma bisa nangis... hehehe

    4 Mei 2010 pukul 20.45  

    Boleh ni untuk di coba. Trimakasih god blog and good post.
    www.chugygogog.blogspot.com

    4 Mei 2010 pukul 22.20  

    Tukeran link juga ni....link baner si bos dah di pasang silahkan di lihat di www.chugygogog.blogspot.com

    4 Mei 2010 pukul 22.37  

    waduh rada lieur ieu mah eunk
    kudu dibaca bulak balik terus
    nuhun infona sob
    salam

    7 Mei 2010 pukul 05.42  

    terima kasih infonya,
    jadi pembaca dapat membedakan antara komentarnya sendiri dan komentar pemilik blog :)

    8 Mei 2010 pukul 10.07  

    gk bisa kang, masih sama aja

    17 Mei 2010 pukul 10.06  

    Terimakasih atas infonya, semoga bermanfaat bagi saya dan blog saya.

    31 Mei 2010 pukul 19.37  

    Trimakasih infonyh,,, akn saya coba,,,

    30 Juni 2010 pukul 10.45  

    kang saya coba ikutin seperti yang kang enes tulis kok malah blog saya setiap yang ada komentar saya pasti ilang postingan nya kenapa tuh kang ada yang di mana nya nih sama settingan nya. . .
    saya udah coba apus semua yang tadi saya buat dari postingan kang enes eh malah sama aja.
    malahan kayak nya ada CSS dari blog aku yang kedelete gmn kang bantuin saya biar blog saya kembali seperti semua lagi. . .
    alamat blog nya nih kang http://www.aguscheats.co.cc

    4 Juli 2010 pukul 15.44  

    Tapi Kan Ada klo aku upload lagi itu gk mungkin.
    soal nya dah banyak bgt yang aku rubah dari template nya kang. . .
    o iya kang ada template yang bagus gk???
    biar saya bisa pasang di blog saya, soal nya saya pake template naruto vs sasuke doank kang. . .
    tolong bales di buku tamu saya ya kang nih alamat blog nya . (http://www.aguscheats.co.cc) nuhun kang.

    10 Juli 2010 pukul 04.53  

    o iya kang sekalian kirimin java scrip scrol label pada blogspot kang. .
    soal nya saya gk bisa . . .

    10 Juli 2010 pukul 05.04  

    Sorry.....kurang ngerti....

    21 Juli 2010 pukul 22.34  

    kok template ane kode ini(< dd class = ' comment-body ' >)ada 2 ya?? jadi bingung

    10 Agustus 2010 pukul 18.35  

    okeh...
    sudah dicoba dan berhasil, thx bgt ya.... :D

    19 Oktober 2010 pukul 14.26  

    Salam Kenal . .Kang

    31 Januari 2011 pukul 13.01  

    pengen tanya kang, kalau mau buat menu seperti punya akang yg tulisan menunya "tutorial" sewaktu mouse diarahkan ke menu tersebut ada keluar berbagai menu pilihan kang, bgmn cara buatnya.. ?

    12 Juli 2011 pukul 18.00  

    Menarik bnget mas, makasih ya...mas, mau nnya nee, gmana ya cara membuat menu scrool bnyak kyak di blog mas ini yang di : 10 & 10,tips blogging, HTML-COMMNANT, lain-lain.....
    mohon bntuan mas...

    24 September 2011 pukul 13.54  

    udah cobak ngikuti alurnya tapi gak ngefek alias gak berubah, tapi infonya bagus sob.
    buat nambah pengetahuan

    9 Juni 2012 pukul 12.41  

    mau coba tapi kayaknya ribet, hehehehe,...

    10 Maret 2013 pukul 09.37  

    Kang kalau cara membuat kotak komentar kaya yang di blog akang gimana, bisa kali di share.. :D

    19 April 2013 pukul 08.59  

    kang termakasih atas pencerahannya ....

    6 Maret 2014 pukul 23.51  

    Spesialis penyakit dalam, termasuk wasir atau wasir, pengobatan herbal
    obat wasir

    21 Desember 2014 pukul 09.57  

    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