Iklan bawah header

Cara Membuat Tampilan Pesan Komentar Blogger Menjadi Lebih Keren

Tampilan Pesan Komentar Blog Keren

Pesan komentar bertujuan untuk memberi himbauan atau peraturan agar pengunjung blog bisa berkomentar dengan sopan, sesuai dengan topik, tidak boleh spam dan lainnya sehingga dapat tercipta komentar yang baik dan membangun untuk kemajuan blog tersebut. Pesan komentar ini biasanya terletak di bagian atas ataupun di bagian bawah kolom komentar blog.

Seperti yang kita tahu bahwa masih banyak orang yang berkomentar seenaknya saja seperti melakukan spam, menaruh link aktif, berkomentar tidak sesuai dengan topiknya, promosi dan lain sebagainya. Jika hal tersebut dibiarkan saja, maka akan membuat kualitas blog kita menjadi turun karena banyaknya link aktif yang bertebaran tadi.

Untuk membuat pesan komentar pada blogger sebenarnya itu sangat mudah tapi tampilan yang diberikan biasanya tidak terlalu bagus ataupun keren. Namun kita bisa menggunakan cara untuk mendesainnya sebagus mungkin dengan sedikit sentuhan kode css dan html.

Lalu, bagaimana caranya?

Berikut inilah cara membuat tampilan pesan komentar blogger menjadi lebih keren.

1. Masuk ke Blogger > Tema > Edit HTML

2. Tekan CTRL+F dan setelah itu cari kode seperti dibawah ini


<b:includable id='comment-form' var='post'>...</b:includable>

3. Letakkan kode berikut ini tepat diatasnya


<b:includable id='pesan-jejak'>
<div class='pesan-jejak'>
<h5>Catatan</h5>
<ul>
<li>Mohon Tinggalkan komentar sesuai dengan judul artikel.</li>
<li>Tidak diperbolehkan untuk mempromosikan barang atau berjualan.</li>
<li>Dilarang mencantumkan link aktif di komentar.</li>
<li>Komentar dengan link aktif akan otomatis dihapus</li>
<li><i>*Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.</i></li>
</ul>
</div>
</b:includable>

4. Selanjutnya carilah semua kode berikut ini


<data:blogCommentMessage/>

5. Ganti semua kode diatas dengan kode dibawah ini


<b:include name='pesan-jejak'/>

6. Setelah itu cari kode ]]</b:skin> dan letakkan kode berikut ini tepat diatasnya


[class~=pesan-jejak],[class~=pesan-jejak] h5{font-size:10.5pt;}
[class~=pesan-jejak] h5:before{color:#393939;}
[class~=pesan-jejak] h5{margin-left:0;}
[class~=pesan-jejak] h5,[class~=pesan-jejak]{position:relative;}
[class~=pesan-jejak] h5:before{display:inline-block;}
[class~=pesan-jejak] h5{margin-bottom:0;}
[class~=pesan-jejak]{background:#fff;}
[class~=pesan-jejak] h5:before{content:"";}
[class~=pesan-jejak]{margin-bottom:22.5pt;}
[class~=pesan-jejak] h5:before{font-family:fontAwesome;}
[class~=pesan-jejak]{color:#444;}
[class~=pesan-jejak]{line-height:1.5em;}
[class~=pesan-jejak] h5:before{font-style:normal;}
[class~=pesan-jejak]{padding-left:11.25pt;}
[class~=pesan-jejak],[class~=pesan-jejak] h5{padding-bottom:11.25pt;}
[class~=pesan-jejak] h5:before{font-weight:normal;}
[class~=pesan-jejak]{padding-right:11.25pt;}
[class~=pesan-jejak] h5{margin-right:0;}
[class~=pesan-jejak] h5:before{font-size:18px;}
[class~=pesan-jejak] h5{margin-top:0;}
[class~=pesan-jejak],[class~=pesan-jejak] h5{padding-top:7.25pt;}
[class~=pesan-jejak]{font-weight:500;}
[class~=pesan-jejak] h5{color:#000;}
[class~=pesan-jejak] h5{padding-left:.208333333in;}
[class~=pesan-jejak] h5{padding-right:.208333333in;}
[class~=pesan-jejak] h5:before{margin-right:12pt;}
[class~=pesan-jejak] h5{font-weight:700;}
[class~=pesan-jejak] h5{text-transform:uppercase;}
[class~=pesan-jejak] h5{overflow:hidden;}
[class~=pesan-jejak]{border-radius:7px;}
[class~=pesan-jejak] ul{margin:0 0 0 1.25em;}
.pesan-jejak h5:before{color: #000;display: inline-block;content: "\f164";font-family: fontAwesome;font-style: normal;font-weight: normal;font-size: 18px;margin-right: 16px;}

7. Setelah itu simpan

Demikianlah tutorial singkat tentang Cara Membuat Tampilan Pesan Komentar Blogger Menjadi Lebih Keren. Semoga Bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel