48 Modifikasi Tampilan Pesan Komentar Blogger

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

Modifikasi Pesan Komentar Blogger Alhamdulillah bisa menyapa anda lagi dengan tutorial baru. Setelah beberapa hari kesempatan on line hanya sempat dan asyik utak-atik template, update sampai terlupakan, apalagi yang namanya blogwalking. Maka kali ini insyaAllah saya ingin mengetengahkan tutorial sederhana saja, seperti judul diatas, cara modifikasi tampilan pesan komentar blogger.

Tampilan default pesan komentar blogger sangat sederhana tanpa sedikitpun polesan dari aspek desain, nah bagi anda yang ingin memiliki pesan komentar yang berbeda anda bisa mencoba menembahkan beberapa property CSS untuk merubah background pesan komentar anda, juga jenis dan ukuran font dll. Sebagai contoh yang bisa anda kembangkan lagi seperti berikut:

Cara Modifikasi Tampilan Komentar Blogger

  • Setelah login ke akun anda
  • Pada dasbor  Klik Edit HTML ---> Proceed ---> Expand Widget Templates
  • Klikk Ctrl+F dan cari kode berikut: <p><data:blogCommentMessage/></p>
  • Lalu ganti dengan kode berikut: <div id='pra-comment'><data:blogCommentMessage/></div>
Biasanya kode <p><data:blogCommentMessage/></p> jumlahnya lebih dari 2, ganti semua kode tersebut.
  • Klikk Ctrl+F dan cari kode ]]></b:skin>
  • Tambahkan kode CSS berikut diatas kode ]]></b:skin>
#pra-comment{
position: relative;
background:#F3C5C5;
width:100%;
padding:10px;
font:normal 12px trebuchet ms;
text-align:justify;
border:3px solid #AD3000;
margin:0 10px 10px 0;
margin-top: 10px;
line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#pra-comment::before {
border-top-color: #AD3000;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #F3C5C5; /* Samakan dengan warna background */
border-width: 9px;
left: 10%;
margin-left: -30px
}

Anda masih dapat mengedit CSS diatas. Misalnya mengganti warna background, jenis dan ukuran font dll. Untuk mendapatkan kode warna anda bisa lihat disini

  • Simpan template dan lihat hasilnya diblog anda

Demikian tutorial cara modifikasi tampilan pesan komentar blogger. Semoga bermanfaat. Good luck.

Mungkin anda juga bisa melihat tutorial cara modifikasi form komentar blogger dengan penggunaan CSS anda bisa menambahkan padanya background warna ataupun gambar. Cek out disini


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

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

48 komentar :

  1. Alhamdulillah....ada yang baru, cobe oprek2 ah

    BalasHapus
    Balasan
    1. heuheuheu...tak coba ndak bisa mbak, blog saya payah kan...??? .
      Klw bikin kolom kementar kyk blog ini susah ndak yah?

      Hapus
    2. Kenapa tidak bisa ya? Tidak susah kok ukhty, anaa sudah sharing tutorialnya dengan judul modifikasi tampilan threaded comments blogger v 1 dan v2 di blog ini, di search aja ya!

      Hapus
  2. Selalu ada yang baru dan berbeda disini. Disharing juga cara buat widget statistik seperti di blog mbak ini ya! Saya lihat itu juga baru. Terimakasih :))

    BalasHapus
    Balasan
    1. InsyaAllah sebentar saya buat postingan tutorial membuat statistik blogger seperti di blog ini. Terimakasih apresiasinya.

      Hapus
  3. keren mba tampilan pesan komentarnya :)
    dan terimakasih tutornya,menambah ilmu buat saya.

    cuma yg kadang bikin saya bingung,
    sebagian blogger menerapkan pesan komentar ataupun memasang aturan-aturan sebelum berkomentar pada blognya.dan yang anehnya....aturan tersebut justru tidak diamalkan si pembuat aturan saat berkomentar pada blog teman.
    contoh,dia memasang komentar pendek tidak dibenarkan...akan saya hapus.
    eh dia sendiri komentar diblog orang....nice post,dan sebagainya.
    kan lucu.....:D

    maaaf kok malah jadi curhat saya :)

    BalasHapus
    Balasan
    1. Iya anaa juga sering nemukan yang seperti itu, heran juga sih. Kesannya sekedar nitip link aja. Tapi sabar ajalah kalau blog kita dibuat gitu, khan mudah juga menghapus komentar yang tidak kita sukai. Happy blogging...

      Hapus
  4. Balasan
    1. Sama-sama. Terimakasih juga untuk kunjungan dan apresiasinya.

      Hapus
  5. dulu rasanya saiia sering ke sini nii.. lama gag berkunjung.. selalu ada yang baru :)
    makasii tipsnya nii :)

    Belajar Photoshop

    BalasHapus
    Balasan
    1. Mungkin, sekarang hanya custom domain. Terimakasih apresiasinya.

      Hapus
  6. demonya seperti tulisan Catatan di blog kamu ya ?

    BalasHapus
    Balasan
    1. Iya, serupa tapi tak sama persis. Dicoba aja biar tau seperti apa hasilnya!

      Hapus
  7. Ndak bosen2 sy klw berkunjung disini, jatuh cinta banget klw ada warna pink. heheheh =))

    BalasHapus
    Balasan
    1. Iya ukh, satu diantara warna fav anaa, tp umumnya anaa suka warna makanya pingin buat template colorful insyaAllah.

      Hapus
  8. biar tulisan letkan spasi sebelum blablabla.. itu hilang yg dihapus mana. ya.

    BalasHapus
  9. Mantab nih mbak :-)

    Langsung Ke TKP :D

    BalasHapus
  10. Keren modifikasi tampilan pesan komentar nya sob! THANKS :)

    BalasHapus
  11. kalau mau memasukkan catatan seperti punya mba gitu gimana ?? "maaf newby" :-d
    tampilan disini keren, nice blog,.. x-) x-)

    BalasHapus
  12. keren gan tutornya (h) , tapi mau tanya gimana cara masukin kode html didalam Pesan Formulir Komentar yang ada di Setelan › Pos dan komentar (dasbord) :-?

    BalasHapus
  13. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  14. Kunjungan balik ya disainprogramming.blogspot.com

    BalasHapus
  15. Kerenn Sudah terpasang di blog ane,terimakasih tutorialnya gan. .

    BalasHapus
  16. Terimakasih, Keren tutorialnya :D

    BalasHapus
  17. Tadinya sih mau komen, tapi gak jadi gara-gara blognya nofollow. hahahahaha

    BalasHapus
  18. kalau biar komennya kayak ini gimana ya mbak caranya?
    sampai ada label "authornya" gitu

    BalasHapus
  19. keren harus rajin ke sini nih biar keren blogku (h)
    silahkan mampir juga di http://ristiunyiel.blogspot.com/ (b)

    BalasHapus
  20. mantap..saya udah coba pasang
    makasih ya min

    BalasHapus
  21. makasih tutorialnya mas..
    saya udah pasang dan hasilnya ..kereen

    BalasHapus
  22. widihhh mantap bgt dachhh keren blog nya


    sukses ajh gan

    BalasHapus
  23. gan mengatur lebar dan ganti warna nya gimana??
    Sekalian cara nambah "Konversi Kode"

    BalasHapus
  24. makin tambah ilmu setelah masuk ke blog ini.......thank mas

    BalasHapus
  25. mbk,koq blog ana gk ada kode* yang di cari untuk psang tampilan komentar yg kyk gini...jadinya gk bisa* deh,gmanatuh?? :-?

    BalasHapus
  26. keren buangettt dej (f) (f) (f) (f) (f)

    BalasHapus
  27. [-( sayang banget nih blog jadi sasaran spammer mbak.... adminnya ngaso dimana ya?

    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!