Home » » Modifikasi Tampilan Pesan Komentar Blog

Modifikasi Tampilan Pesan Komentar Blog

Written By AiRa LoKa on Selasa, 07 Mei 2013 | 17:13

Modifikasi Tampilan Pesan Komentar Blog

     Tampilan default pesan komentar blogger sangat sederhana tanpa sedikitpun kreasi, bagi anda yang ingin memiliki pesan komentar yang berbeda anda bisa mencoba menambahkan  CSS untuk merubah background pesan komentar anda, juga jenis dan ukuran font dan lain lain. Nah, bagi yang mau modifikasi, Langsung saja..
Check It Out......

1.  Masuk ke BLogger > Dashboard Blogger > Template > Edit HTML. Cari script
<data:blogCommentMessage/>
lalu ganti dengan script
<div id='pra-comment'><data:blogCommentMessage/></div>
2.  Cari kode ]]></b:skin>, lalu pastekan script dibawah ini diatas kode ]]></b:skin>
/* Comment Modification --------------------------------------- */
#pra-comment{
position: relative;
background:#0099ff;
padding:10px;
font:normal 12px trebuchet ms;
color:#ffffff;
text-shadow: 0 0 0 0 rgba(0,0,0,0);
text-align:justify;
border:3px solid #0088FF;
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: #0088FF;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #0099ff; /* Samakan dengan warna background */
border-width: 9px;
left: 10%;
margin-left: -30px
}
3.  Simpan

Selamat mencoba!

7 komentar:

  1. langsuk praktek...nice inponya masbrooo

    BalasHapus
  2. Keren gan..
    Follow back blog saya ya sob...

    Atas nama : Ariel Nicho

    BalasHapus
  3. artikelnya mantap gan
    ku tunggu kunjungannya kmbali di http://terupdatedanterbaru.blogspot.com/

    BalasHapus
  4. sip tampilannya jadi makin bagus thanks gan :D

    BalasHapus
  5. MANTAP! Minta komennya di blog ane gan http://bit.ly/12aa777 thanks

    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>

Setelah membaca artikel ini, silahkan tinggalkan komentar. Bagi yang mau meninggalkan url blognya, silahkan saja. Asalkan anda tidak memberikan komentar dengan kata-kata yang tidak sopan. Terima kasih telah mengunjungi blog ini.

AiRa LoKa - Blog of tutorials

Konversi Kode di Sini!

 
Support : Blogger | Google | KlikSaya
Copyright © 2013. AiRa LoKa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger