" 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, "popupwindow", "status=0, height=420, width=400, resizable=0, top=50, left=100");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
inovatif blog nya gan... hehehe
BalasHapusthanks bang :)
Hapuswah tutorial yang bermanfaat sobat..
BalasHapusnice post ya..
Salam persahabatan :)
terimakasih mas .. salam persahabatan :d
Hapusbagus sekali tutornya mas, tankyu udah share
BalasHapusterima kasih bang (p)
Hapuswah demonya kaya di blog ini ya sob, keren tuh, saya juga rencana mau pasang sob, trims sharingnya
BalasHapuspasang saja mas :) lebih cantik dan menawan blognya :)
HapusCss dan sebangsannya saya ampun, dan maaf kalau komennya cuman segelintir doang karena saya ndak paham dan belum ada waktu untuk memahaminya , hehehehehhe
BalasHapusjangan menyerah mas [-( saja dulu juga tidak paham apaapa tentang css dll ..
Hapuskeren sih, tapi takut blog gw berat jak nih. pasang2 gini'an.
BalasHapusrencananya mw pasang di postingan aja.
kalo pasang di postingan gimana?
postingan saja ? iya itu kan dipasang di postingan saja :-?
Hapuskeren nih kolom momentarnya, ada bunga2nya. :>) beda dgn yg lainnya :d
BalasHapussama seperti blog mbak kan :D
HapusWah, keren nih blognya..
BalasHapushttp://firmanardyansyah.blogspot.com/
terima kasih (p)
Hapuskapan2 aq coba ya sob.., kebetulan aq blom pny ni.., makasih (h)
BalasHapusoke mas :)
HapusWah bagus juga.. jadi gak perlu repot cari converter
BalasHapusiya mas :-)
HapusLebih bagus lagi kalo kodenya ditaro di page halaman blog sob,, :)
BalasHapusiya sobb :-)
Hapuswaaawwww keren...pengen coba hehehe :)
BalasHapuscoba saja mas :)
Hapuskembaran template dengan mdf-blog ya mas ?? :)
BalasHapusiya nih mas :-)
Hapussip lah kalo ada waktu saya oprek2 template saya :)
BalasHapusoke :)
HapusTerima kasih banyak kang dhani, udah dipraktekan di blog saya. BTW nambah tombol OOT dan emoticon nya gimana caranya? Maklum kang dhani, saya masih belajar. Salam kenal..
BalasHapuslangkah seperti diatas cuman tambahkan kode <a class='button-oot' href='/p/oot.html' target='_blank'>OOT</a>
Hapussesudah .. ;return false;' target='_blank'>Konversi Kode di Sini !</a>
kemudian tambahkan cssnya ..
.button-oot {
text-decoration: none;
color: white;
cursor: pointer;
padding: 5px 8px;
background-color: #ddd;
background: -webkit-gradient(linear,left top,left bottom,from(#f7f7f7),to(#ddd));
background: -moz-linear-gradient(top,#f7f7f7,#ddd);
position: relative;
font-family: Arial,Sans-serif;
font-weight: bold;
font-size: 14px;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
transition: none;
bottom: 3px;
transition-duration: 1s;
margin: 0 3px 0 0;
}
Alhamdulilah udah dicoba berhasil mas, terima kasih atas tutorialnya. Cuma sementara ini belum saya terapkan diblog. Salam..
Hapuskeren nih...nanti kapan-kapan tak coba mas :)
BalasHapuskomennya 2x ah :D
Hapus[img]http://2.bp.blogspot.com/-5_dZapgn_lE/UbGKuMNNXnI/AAAAAAAABvg/6TtutrdBshQ/s1600/HardDisk1.jpg[/img]
BalasHapuspraktekin dulu ah... trims
BalasHapusthaks banget gan :)
BalasHapusthanks yah.. :)
BalasHapuskeren, gw coba dlu sob..
BalasHapusmantab gan:)
BalasHapus