Cara Membuat Pesan Komentar Keren Di Blog

Kali ini saya ingin share mengenai bagaimana cara membuat modifikasi pada kotak pesan komentar blog, dimana untuk contohnya bisa dilihat pada blog ini. Pemodifikasian kotak pesan komentar tersebut juga saya pelajari dari blog lain, namun saya lupa alamatnya..

Tutorial ini sendiri saya buat untuk mengakomodir permintaan sahabat yang bertanya mengenai kotak komentar saya ini, sehingga tidak ada salahnya saya pikir untuk membuat tutorialnya.

Ok, langsung aja sob :

1. Login ke blogger.

2. Pilih Template - Edit HTML.

3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :

#pra-comment{
position: relative; 
background:#FFFFFF;/* Warna background kotak */
width:100%;
padding:10px; 
font:normal 12px trebuchet ms; 
text-align:justify; 
border:3px solid #FE80DF;/* Warna border kotak */
   border-radius: 10px;
   box-shadow: 0 0 0 2px #000000, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
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: #FE80DF; 
border-width: 15px; 
left: 10%; 
margin-left: -36px 
}
#pra-comment::after { 
border-top-color: #FFFFFF; /* Samakan dengan warna background */
border-width: 9px; 
left: 10%; 
margin-left: -30px
}

4. Kemudian cari kode <p><data:blogCommentMessage/></p> dan ganti dengan kode berikut :

<div id='pra-comment'><data:blogCommentMessage/></div>

5. Simpan Template.
6. Selanjutnya, masuk ke Setelan - Pos dan Komentar.
7. Pada kolom pesan formulir komentar, masukkan tulisan atau kata-kata mutiara yang ingin ditampilkan.
8. Enjoy.

*Keterangan : Ganti kode berwarna MERAH dengan warna-warna yang disukai

<nav id="ow_navs">
<div class="container">
<div class="main-menu">
<ul class="menu" id="menu-main">
<li><a href="http://otowebsite.blogspot.com/">Home</a></li>
<li><a href="#">Mode</a>
<ul class="sub-menu">
<li><a href="#">Modeling</a></li>
<li><a href="#">Kebanyakan Model</a></li>
<li><a href="#">Model BonBin</a></li>
<li><a href="#">Nggak ada Model</a></li>
</ul>
</li>
<li><a href="#">Downloads</a> - See more at: http://www.otowebsite.blogspot.com/2013/05/membuat-navigation-menus-css3-bergaya.html#sthash.f6zwleUK.dpuf

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 09.38 and have 0 komentar

Tidak ada komentar:

Posting Komentar

sebelum berkomentar, baca dulu peraturan berkomentar di blog ini :

-Gunakan bahasa yang sopan
-No share spam, flood, junk, iklan, sara,
-Jangan OOT / Out of Topic
-Silahkan gunakan NameURL untuk mempermudah blogwalking
-Tidak menaruh live link, jika melarang akan saya hapus otomatis, *Terkecuali penting
-Semoga artikel di blog ini bermanfaat :)
Thanks for all your support bros
...........
...................__
............./´¯/'...'/´¯¯`·¸
........../'/.../..../......./¨¯\
........('(...´...´.... ¯~/'...')
.........\.................'...../
..........''...\.......... _.·´
............\..............(
BROFIST ...........

,Terimakasih..

Tutorial