Bagaimana Nak Cantikkan Ruang Komen Blog?

Ramai yang berminat untuk mendapatkan ruang komen yang cantik dan menarik. Tapi, tak ramai yang tahu cara untuk melakukannya. Sebenarnya, sudah ramai blogger yang kongsi cara-cara untuk cantikkan ruang komen blog. Saya sendiri pernah kongsikan beberapa tutorial mengenai kotak komen. Tapi, saya tak ceritakan bagaimana ia dilakukan secara am.

Kali ini, dalam entri yang mungkin akan buat anda pening-pening lalat ini, saya akan kongsikan tentang bagaimana anda boleh cantikkan ruang komen blog anda ikut citarasa anda sendiri. Ikut citarasa anda, dan bukan ikut citarasa penulis tutorial untuk cantikkan blog.

Bagaimana Nak Cantikkan Ruang Komen Blog?

Pertama sekali, anda perlu faham bahawa untuk mencantikkan ruang komen blog anda, anda perlu akses ke bahagian HTML blogspot anda. Jadi, ia memerlukan anda untuk berhati-hati melakukannya. Seperti syor ramai blogger yang handal dalam bab ini, sila buat backup template HTML blogspot anda.

Bahagian yang saya maksudkan ialah CSS blogspot anda. Akses ke CSS adalah dengan klik bahagian b:skin seperti gambaran di bawah ini. Ruang atau kod berkaitan CSS selalunya akan berwarna biru. Untuk ubah atau tukar penampilan kotak komen, cuba cari kod yang ada tulis #comments. Untuk elak keliru, padamkan kod lama anda tersebut, atau anda boleh je copy paste di tempat lain sebagai backup kedua.

Cara Menjadikan Avatar Komen Berbentuk Bulat dan Bukan Petak

Bagi memperlihatkan sedikit kelainan pada ikon pemberi komen, anda boleh ubah atau tambah struktur CSS bagi komentor blog anda. Kod dibawah ini akan menjadikan avatar si pengomen jadi bulat .... dan bukan petak seperti kebiasaan.

 
  .comments .avatar-image-container, .comments .avatar-image-container img {
    width: 48px;
    max-width: 40px;
    height: 40px;
    max-height: 48px;
    background: #FFF;
    float: left;
    border-radius: 50%;
    -moz-border-radius: 50%;
    margin: 0 10px 0 0;
    }

    #comments .avatar-image-container img {
    border: 1px solid #ddd;
    }

    .comments .comment-thread.inline-thread .avatar-image-container, .comments .comment-thread.inline-thread .avatar-image-container img {
    width: 36px;
    max-width: 36px;
    height: 36px;
    max-height: 36px;
    margin-left: 5px;
    }

Anda boleh bermain-main dengan kelebaran dengan tukar-tukarkan nilai width di atas. Untuk menambahkan sedikit warna, anda boleh ubah mana-mana kod HTML yang ada # di atas, contohnya warna putih ialah #fff dan ada banyak variasi warna putih boleh anda gunakan. Boleh rujuk mengenai warna-warna selamat untuk blog yang pernah saya kongsikan dahulu.

Cara 'Hias' Ruang Kotak Komen

Sekarang, perkara yang utama iaitu cara nak 'hias' kotak atau ruang komen utama blog anda. Seperti yang anda nampak macam blog ini, ia adalah disebabkan saya ubah penampilan ruang kotak komen dengan warna-warna tertentu selain adjust kelebaran.

Jika berminat nak kotak komen lebih kurang macam blog ini, boleh baca entri ini - Nak Kotak Komen Hijau?

Mudah dan memang sempoi, agak-agak nak warna lain, hanya tukarkan kod warna yang ada. Anda boleh copy-paste kod CSS dibawah ini dengan gantikan yang lama.

#comments {
background-color: #fff;
padding-top: 20px;
border-top: 1px solid #ddd;
}

.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
margin-left:60px;
width:490px;
}

.comments .comment-block,.comments .comment-thread.inline-thread .comment {
border:1px solid #ddd;
background:#fff;
background-color:#fff;
padding:10px;
padding-right:0px;
padding-left: 0px;
}

.comment-header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

.thread-chrome.thread-expanded .comment-header {
width: 412px;
margin-left: 15px;
}
.comments .comments-content .comment {
width:100%;
line-height:1em;
font-size:13px;
margin:15px 0 0;
padding:0;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 22px;
overflow: hidden;
}
.thread-chrome.thread-expanded .comment-content {
width: 380px;
line-height: 22px;
overflow:hidden
}
.comments .comment-thread.inline-thread .comment-actions {
display: none;
}

.item-control.blog-admin {
display: none;
}
.comments .comments-content .comment-replies {
margin-top:0;
}

.comments .comment-content {
line-height: 1.4em;
padding: 15px;
}

.comments .comment-thread.inline-thread {
padding-left: 0px;
}

.comments .comment-thread.inline-thread .comment {
width:auto;
}

.comments .comment-thread.inline-thread .comment:after {
content:"";
position:absolute;
top:10px;
left:-20px;
border-top:1px solid #d2d2d2;
width:10px;
height:0;
}

.comments .comment-thread.inline-thread .comment .comment-block {
border:0;
background:transparent;
padding:0;
}

.comments .comment-thread.inline-thread .comment-block {
margin-left:48px;
}
.comments .continue {
border-top:0;
width:100%;
}

#comment-editor {
width:98%!important;
}

.comment-form {
width:100%;
max-width:100%;
}

Cara Tukar Penampilan Nama Tukang Komen dan Meta

Adakala kita mahu ruangan kotak komen diberikan satu keistimewaan dari yang lain. Dan kita mahu memperlihatkan siapa yang telah komen entri blog kita. Cara ini boleh anda lakukan dengan tukar penampilan nama tukang komen serta meta berkaitan dengannya.

   
#comments h4 {
    display:inline;
    line-height:40px;
    padding:10px;
    }

    .comments .continue a {
    background:#0d86cc;
    text-align:center;
    padding:10px 0;
    display:none;
    }

    #comments h4,.comments .continue a {
    line-height: 30px;
    margin: 0;
    padding: 20px 0 14px 10px;
    font-size: 18px!important;
    text-transform: uppercase;
    font-weight: 400!important;
    color: #444;
    }

    .comments .user a {
    color: #444!important;
    font-size: 18px;
    line-height: 25px;
    text-transform: capitalize;
    margin-top: 20px;
    font-weight: 600;
    padding-left: 15px;
    }

    .comments .comments-content .datetime {
    cursor: pointer;
    float: right;
    padding-top: 6px;
    padding-right: 20px;
    }

    .icon.user {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxzgQ9s6qPVwPAkO6RPhtJ3J9APMCISaoItNfpqiT048oQfwffSFsPOHPOl2YQ0vqn0FtOPD9AfQmJjVE6vDbITlNU5Az3IOWmewaY9Sa3JGgt_PwInMmkds2Y32-ofeoixFAQsepbrxbI/s1600/online.png) no-repeat;
    height: 12px;
    width: 16px;
    display: inline-block;
    margin: 0 0 -4px 6px;
    }

    .comments .comment-thread.inline-thread .user a {
    font-size:13px;
    margin: 0px;
    padding: 0px;
    }

Cara Tukar Reply Kotak Komen

Nampak reply komen tu macam tak berapa menarik je kan? Jadi nak tukar boleh gunakan kod CSS di bawah ini. Anda boleh ubah atau tukarkan perkataan reply itu dengan gambar kalau mahu, hanya tambahkan di bahagian background: #f2f2f2f2 url("URL gambar butang reply")

   
.comment-actions {
    background: #f2f2f2;
    padding: 8px;
    margin-left: 435px;
    border: 1px solid #ddd;
    float: right;
    margin-top: -30px;
    margin-right: 5px;
    }

    .comment-thread a {
    color: #777;
    }

    .comments .comment .comment-actions a:hover {
    text-decoration: underline;
    }

Ok dah kot. Apa yang saya beritahu kat atas tu merupakan antara asas paling mudah nak tukarkan penampilan ruang kotak komen anda, anda boleh ubah ikut kesesuaian dan kehendak anda dengan buat beberapa penambahan atau pembaikan kod CSS di atas.

Untuk lebih pemahaman, boleh rujuk entri asal di sini - How to Create Custom Style Comment in Blogspot

Selamat mencuba.

13 Comments

Komen adalah tanggungjawab anda. Tertakluk pada Akta 588 SKMM. Untuk pengiklanan, boleh email ke editor@hasrulhassan.com.

UnknownOctober 28, 2013 at 7:56 PM
tutorial yg berguna...tp skrg ni guna yg biasa je...ermm
UnknownOctober 28, 2013 at 8:52 PM
nak cuba main coding ni. thanks HH
maszie71@gmail.comOctober 28, 2013 at 10:03 PM
tutorial yg bagus...tp tak berani buat takut lain jadinya
Dayang DenoOctober 28, 2013 at 10:20 PM
This comment has been removed by the author.
tarmiziOctober 28, 2013 at 10:28 PM
Saya online pakai phone je. X nmpk pun..
Dayang DenoOctober 28, 2013 at 11:02 PM
alhamdulillah, deno buat dah jadi yang en. hasurlhassan kongsikan sebelum ini^^ baru nampak berseri blog sebab sebelum ni ruang komen ptuih je... hihi^^ thank you! ^_^
mahmud thalutOctober 28, 2013 at 11:50 PM
Assalam Tuan HH
Terima kasih sebab ajarkan
mselim3October 29, 2013 at 7:48 AM
Assalammmualaikum...bro HH,

mselim3 buat butang reply utk komen x berjaya lagi...hehehe
kuchalanaOctober 29, 2013 at 9:51 AM
bagus tutorial ni...
AnonymousOctober 29, 2013 at 8:28 PM
Bila-bila boleh cuba. Terima kasih atas perkongsian.
UnknownFebruary 23, 2015 at 2:27 PM
hmm,bagus tutorial ni..
Faculty of Nursing BUMay 19, 2015 at 6:21 AM
thanks
www.fnur.bu.edu.eg