Cara Modifikasi Tampilan Pesan di Atas Kotak Komentar Blog

Santos el Salam

4 Agustus 2020

Pada artikel sebelumnya, kita telah belajar bersama tentang bagaimana cara mengatur dan menambahkan pesan peringatan di atas kolom komentar Blog (blogspot). Baca selengkapnya: Cara Membuat Pesan Peringatan di Atas Komentar Blog

Sebagai langkah antisipasi, pesan ini cukup penting keberadaannya agar setiap pengunjung mau mematuhi cara berkomentar yang baik dan benar sesuai aturan, sehingga kolom komentar blog anda bisa lebih aman dari munculnya komentar spam atau komentar-komentar negatif lainnya. 

Secara default, tampilan pesan peringatan ini terlihat cukup standar yakni hanya berupa tulisan yang dipasang di atas kolom komentar. Agar kelihatan lebih menarik, kita bisa tambahkan desain background atau bingkai berwarna agar pesan tersebut semakin terlihat menonjol sehingga lebih jelas terbaca oleh pengunjung yang hendak berkomentar. 

Sebagai ilustrasi, anda bisa lihat screenshot tampilan pesan peringatan berikut ini:

Bagaimana cara mendesainnya agar menjadi demikian?, silahkan anda ikuti langkah-langkah berikut ini. 

Cara Mendesain Tampilan Pesan di Atas Kolom Komentar Blog

Untuk menambahkan desain tersebut, anda hanya perlu sedikit mengedit kode html template blog anda sembari menambahkan beberapa kode CSS untuk mengatur tampilannya. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Selanjutnya cari kode berikut ini:

 <p><data:blogCommentMessage/></p>

Untuk memudahkan anda, kode tersebut biasanya terletak di bawah deretan kode setelah <data:post.body/> atau kode html untuk tombol share yang berada di bawah postingan. 

Jika sudah ketemu, mungkin ada dua kode sama seperti di atas. Hapus saja kedua kode tersebut dan ganti dengan kode di bawah ini:

<div id='pesan-komentar'><data:blogCommentMessage/></div>  

4. Langkah berikutnya cari kode ]]></b:skin> atau </style> dan letakkan kode CSS berikut ini di atasnya:

#pesan-komentar{

        position: relative;
        background:#666;
        width:100%;
        padding:10px;
        font:normal 12px trebuchet ms; color:#FFF;
        text-align:justify;
        border:3px solid #000;
        margin:0 10px 10px 0;
        margin-top: 10px;
        line-height: 1.3em;
    }
    #pesan-komentar::after, #pesan-komentar::before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none
   }
    #pesan-komentar::before {
        border-top-color: #000;
        border-width: 15px;
        left: 10%;
        margin-left: -36px
    }

    #pesan-komentar::after {
        border-top-color: #666;
        border-width: 9px;
        left: 10%;
        margin-left: -30px
    }

Keterangan:

• #666 (abu-abu gelap) adalah kode untuk warna background, #000 (hitam) untuk warna border, dan #FFF (putih) untuk warna font. 
• Jika ingin mengubah warnanya, silahkan ganti ketiga kode tersebut dengan kode warna sesuai selera anda. 

5. Silahkan simpan kembali template anda. 

Jika langkah di atas sudah dilakukan dengan benar, maka anda bisa langsung lihat hasilnya pada tampilan pesan di atas kolom komentar blog anda. Demikianlah tutorial tentang Cara Modifikasi Tampilan Pesan di Atas Kotak Komentar Blog. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Modifikasi Tampilan Pesan di Atas Kotak Komentar Blog. Please share...!

Facebook

Twitter