Membuat Tombol & Modif didalam pesan komentar dan di Blog

" Membuat Tombol & Modif didalam pesan komentar dan di Blog contoh : Tombol Konversi , OOT , Top Komentator , Cara berkomentar . "

Selamat Sore teman2 semua .. kali ini saya akan share Cara Membuat Tombol & Modif didalam pesan komentar dan di Blog . Apa itu Tombol didalam pesan komentar di Blog ?
demo tombol + modifikasi ada di blog saya ini :D atau lihat saja gambar diatas :)

Langkah 1 ~
Dalam langkah pertama ini , sobat harus membuat pesan diatas Form Komentar Blogger .
dengan cara Setelan -> Pos dan Komentar -> Pesan Formulir Komentar

Langkah ke 2 ~
Copy CSS dibawah ini dan masukkan tepat di atas ]]></b:skin>

#dtkmodif-comment{
position: relative; 
background:#BFE3FE;
width:100%;
padding:10px; 
font:normal 12px trebuchet ms; 
text-align:justify; 
border:3px solid #00477D;
margin:0 10px 10px 0; 
margin-top: 10px; 
line-height: 1.3em; 
} 
#dtkmodif-comment::after, #dtkmodif-comment::before { 
top: 100%; 
border: solid transparent; 
content: " ";
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none 
} 
#dtkmodif-comment::before { 
border-top-color: #00477D; 
border-width: 15px; 
left: 10%; 
margin-left: -36px 
}
#dtkmodif-comment::after { 
border-top-color: #BFE3FE; /* Samakan dengan warna background */
border-width: 9px; 
left: 10%; 
margin-left: -30px
}

.tombol-konversi {
border: 1px solid #555;
color: #111;
cursor: pointer;
font-size: 13px;
font-weight: normal;
margin-top: 15px;
margin-bottom: 10px;
margin-right:5px;
padding:4px 10px;
text-decoration: none;
text-shadow: 1px 1px 0 #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 0 #ffffff;
box-shadow: inset 0 1px 0 0 #ffffff;
background: -webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );
background: -moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #ededed' ,endColorstr=' #dfdfdf' );
background-color: #ededed;
}
.tombol-konversi:hover {
text-shadow: 1px 1px 0 #f0f7ff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 0 #ffffff;
box-shadow: inset 0 1px 0 0 #ffffff;
background-color:#FF0000;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#cde1fc', endColorstr='#90c3eb');
background-image:-webkit-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:-moz-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:-ms-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:-o-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
} 

Langkah ke 3 ~
Cari kode <data:blogCommentMessage/> kemudian ganti dengan kode dibawah ini

 <div id='dtkmodif-comment'><span><data:blogCommentMessage/></span><a class='tombol-konversi' href='https://dtk-site.googlecode.com/svn/trunk/Konversi%20Kode%20HTML.html' onclick='window.open(this.href, &quot;popupwindow&quot;, &quot;status=0, height=420, width=400, resizable=0, top=50, left=100&quot;);return false;' target='_blank'>Konversi Kode di Sini !</a></div>

kode tersebut di bungkus dengan tag span kemudian link kode konversinya di letakkan setelahnya .

biasanya ada 4 buah kode ini <data:blogCommentMessage/> . Lebih baiknya diganti semua saja .

sekian artikel dari saya .. semoga bermanfaat .
Jika terjadi kesalahan diharap ikut berpartisisapi pada komentar dibawah ini :D