Membuat Tombol pada Pesan Formulir Komentar - Pada artikel sebelumnya (baca: Membuat Pesan di atas Form Komentar Blogger) saya sudah menjelaskan cara membuat atau memodifikasi pesan formulir komentar blogger.
menambah tombol pesan komentar
Selanjutnya, pada tutorial kali ini saya akan menjelaskan bagaimana cara menambahkan tombol /button pada pesan tersebut.

tombol pesan blogger

Saat ini, saya anggap sobat telah melakukan langkah-langkah dalam membuat pesan di atas form komentar. Selanjutnya sobat tinggal menambahkan kode CSS dan HTML untuk tombol.

Langkah 1 : Simpan CSS dibawah ini di atas ]]></b:skin>
.small-button {
border: 2px solid #555;
color: #111;
cursor: pointer;
font-size: 11px;
font-weight: normal;
margin-top: 15px;
margin-bottom: 10px;
margin-right:5px;
padding:2px 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=&#39; #ededed&#39; ,endColorstr=&#39; #dfdfdf&#39; );
background-color: #ededed;
}
.small-button: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:#90c3eb;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#cde1fc', endColorstr='#90c3eb');
background-image:-webkit-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-moz-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-ms-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-o-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
}

Langkah 2 : Cari <p><data:blogCommentMessage/></p> yang telah ditambakan kode . Kode di simpan sebelum penutup tag </p>. Kurang lebih seperti ini :
<p><data:blogCommentMessage/>
...kode HTML di sini.... untuk penulisan gunakan class='small-button'
</p>

tombol pesan blogger

Sama seperti tutorial sebelumnya, lakukan pada kode ke 2 dan ke 4.

Semoga bermanfaat.

99 komentar

bookmark dulu kang,,,besok di praktekin,,hahahay

Balas

silahkan sob... selamat beristirahat :)

Balas

Makin menarik ini Kang untuk blog,seep Kang.I like it :)

Balas

oke sob.. silahkan dicicipi :)

Balas

kebetulan saya blom pny yg ginian, soalnya baru aja ganti template.., entar saya coba Pak.., makasih... :)

Balas

Makasih berbagi tipsnya Kang Ismet

Balas

Blog ini makin keren aja :D sampai membuat diriku terkagum-kagum :)

Balas

silahkan dicoba.. tapi jangan keseringan ganti template... juga

Balas

sama2 sob.. semoga bermanfaat

Balas

makasih sob.. semoga sanjungannya jadi motovasi

Balas

bisa gk kalo warna backgroundnya di ganti ?

Balas

bisa.. ganti aja yang kode background:......

Balas

makasih gan udah di share

Balas

Makin cihuy euy blog kang Ismet.
Tips2nya pun makin greget. Sukses ya, kang :)

Balas

error gan di blog aku http://nandarious.blogspot.com/

Balas

wah ini lanjutan yang kemarin ya kang, tak bungkus dulu kang, nanti di coba...

Balas

Boleh juga, jadi tambah manis tampilannya ditambah tombol !
Bookmark dulu agrh... :-D

Balas

hehehe... makasih sob...

Balas

iya, untuk tombolnya kang Mur..

Balas

Kang ada referensi untuk membuat konversi kode kayak punya akang? Saya mau bikin tombol ini tapi bingung untuk buat toolnya... :D

Balas

Kang punten nembe tos ngintip script tool konversi kode-na, soalna milarian tutorialna sesah pisan, tapi tampilanna tos dimodif ku abi janten teu sami sareng nu akang hehehe... punten we hoyong diwidian da tool-na tos dianggo ku abdi hehehe.... Bade dibeureum bade dibodas teu langkung akang.....

Balas

heheheh..eta pan atos dibodaskeun sareng di beureumkeun.. janten weh beureum bodaskode na :)

Balas

Heheheh...punten nya kang... hatur nuhun pisan...

Balas

trima kasih banyak informasinya om...
http://informasibloger.blogspot.com

Balas

sama2 sob... blognya keren

Balas

hehhee dihapunten pisan..

Balas

trima kasih mas itu smua karena mas yang ngjarin trik2nya...

salam hangat blogger sumbawa..

Balas

eror kang gimana tuh kang
http://masjawika.blogspot.com/

Balas

iya kang saya juga eror kang

http://masjawika.blogspot.com/

Balas

coba pelan2 ulangi lagi

Balas

Kang,cara buat konversi kode gimana?

Balas

liat saja source punya saya... trus save as HTML, upload ke google code

Balas

cara ngesave sourcenya gimana ,gan? Trus upload ke googlecode caranya gimana?

Maaf gan,ane baru pemula

Balas

Ini gimana Kang cara memindahkan kebawahnya? :(
[img]http://4.bp.blogspot.com/-d4ENvpbJdYE/UbbFmA9ECWI/AAAAAAAAAYE/93xrPsZm8vk/s1600/123.jpg[/img]

Balas

pas nulis pesan komentar, seudah no. 4 enter aja 2x sob :)

Balas

Kang, kok punya saya malah dibawah.? [img]http://prntscr.com/1dpeig[/img]

Balas

kode:

pdata:blogCommentMessage

kok ndak ada ya?

Balas

penempatan kode HTMLnya salah kali, harus di dalam tag 'p'

Balas

coba di cari lagi.... 'p'nya dipisah

Balas

Saya coba ngikutin tips dari mdf kang,
http://mdf-blog.blogspot.com/2012/12/modifikasi-tampilan-pesan-komentar.html

Balas

kang mohon bantuannya, gmn cara membuat ukuran pesan di atas komentar tuh sama seperti form komentar
Ini blog saya :
http://blogsitaufik.blogspot.com/2013/07/cara-upgrade-ke-windows-81.html

terimakasih

Balas

mau tanya kang,kalo di postingan yang blm ada komentarnya kok tombolnya ngga muncul ya?

Balas

Berhasil kang,nuhun nya??

Balas

wow keren :),sudah saya pasang di blogku.Bang klo buat tooltip pada posting blog seperti di laman depan gimana ya??

Balas

kang, maaf nih OOT, gimana cara buat klik ganda langsung keseleksi semua di kode quote ? mohon bantuannya kang :D

Balas

simpan kode ini di atas </body>
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;blockquote&quot;);
for (var i = 0; i &lt; pres.length; i++) {
pres[i].addEventListener(&quot;dblclick&quot;, function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>

Balas

masuk ke sini sob http://blog.kangismet.net/2013/07/simple-tooltip-dengan-jquery.html

Balas

biar bisa bukak di jendela baru gimana kang ? :)

Balas

contoh HTMLnya : (silahkan di edit)
<a class="small-button" href="http://cdn.kangismet.net/tool/html-escaper.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>

Balas
Komentar ini telah dihapus oleh pengarang.

Di punya ku Tombol itu gak muncul http://nonoote.blogspot.com/2013/08/simple-nyoba.html

Balas

kalau buat Konversi kode disini dan top komnetator gimana kang ?
dan kode ... <p><data:blogCommentMessage/></p> ... di blog saya lebih dari satu.
solusinya gimana ?

Balas

infosa sagat bermanfaat kang :D

Terimakasih!

Balas

Wihh kang manteb (y) :D

www.kevin-432.blogspot.com

Balas

terima kasih bang,

# kalau saya mau pakek tombol formulir komentarnya, tapi yang di bawah pesan komentar itu masih ada.
cara ngilanginnya bagaimana ?

Balas

yang mananya ya? ga ngerti

Balas

Maaf sebelumnya, screenshot nya tidak ada bang.
misal nya begini bang, saya itu kan mau bikin tombol (konversi Kode di sini) dalam prakteknya saya bikin tombol (emoticon). Tombolnya muncul dan dapat di buka di jendela baru.

Permasalahannya sekarang, emoticonnya tadi muncul di dua tempat. yang pertama di bagian tombol dan yang kedua di bagian bawah formulir.

Pertannyaan saya, bagaimana cara menghilangkan emoticon yang berada di bawah formulir tersebut bang ?

Balas

udah ngikutin sesuai tutorial..tp ko ga muncul ya kang..

Balas

Kang kok gak muncul ya, udah di coba berkali kali punya saya yang kode yang CommentMessage nya cuma ada 3.Sedangkan dalam artikel diatas di kode ke 2 dan ke 4.Apakah saya hanya menyisipkan di kode yang ke 2 dan ke 3 saja?. Mohon penjelasanya ya Kang

Balas

masa sob... coba ulangi lagi

Balas

kan udah dijelasin di atas sob :)

Balas

mas, jika hanya ingin membuat tombolnya saja tanpa membuat kotak form nya, itu langkah nya bagaimana ?

Balas

gak bisa om,,padahal udah ane coba berkali-kali secara teliti..

Balas

mantap kang.....Bookmark dulu :)

Balas

Kok ane selalu gagal terus ya kang, pada ane udh ngikutin tutor nya .
mohon pencerahannya yah kang :-D
emilseo.blogspot.com

Balas

buat bikin konversi kode pop up kek gitu gimana yah kang ?

Balas

mantab kang!
keren salam damai aja!
Rio Us"

Balas

iya kang saya juga mau nih ^_^
- salam damai -

Balas

Mantap kang trik nya..
salam blogger

Balas

waduh url nya salah nih, kok membuat judul pada pesan formulir komentar, bukannya tombol ?

Balas

iya waktu itu salah bikin link.. mau dibenerin tanggung :)

Balas

Wahh...
kaya'nya udah update lagi nih konversi kodenya, bagi dong tipsnya...

Aku coba-coba tombol buttonnya ga ngefek...

Balas

tombol buttonnya ga ngefek gimana maksudnya?

Balas

cssnya,,, ga tau kenapa buttonnya ga muncul...

Balas

semakin banyak saya baca tutorial kang ismet semakin saya ingin terapkan semuanya dan semakin saya pusing @@,

Balas

Kang kok gak muncul ya tombolnya?

Balas

berhasil kang, cuman kok gak kayak pop up gitu ya :o

Balas

kang .. coba ceck di blog saya mosbsno.blogspot.com
di sana saya coba dengan

<a class='small-button' href='http://mosbsno.blogspot.com/2014/02/request-tutorial-setting-mouse-macro.html' target='_blank'>Request Tutorial</a>

Namun kode <a ... itu tidak berfungsi kang ,,,
kalau misal di tmbah kan <span di depan sih kode nya berhasil cuma Link ny gak aktif :(
itu gimana yah kang solusi nya?

Balas

sama penyakitnya kayak punya ku :(

Balas

kan senasib kita :(
kamu pakai template apa emanx ny ?

Balas

droidplus gan,

sini kalo mau cek ngudang.blogspot.com

Balas

itu yg kamu berhasil -_- ...

Balas

Kalau saya cba kode yg ini
<div style='margin-bottom: 5px;'>
<input onclick='if(this.parentNode.parentNode.getElementsByTagName(&quot;div&quot;)[1].getElementsByTagName(&quot;div&quot;)[0].style.display != &quot;&quot;){this.parentNode.parentNode.getElementsByTagName(&quot;div&quot;)[1].getElementsByTagName(&quot;div&quot;)[0].style.display=&quot;&quot;;this.innerText=&quot;&quot;;this.value=&quot;Hide Emoticon&quot;;}else{this.parentNode.parentNode.getElementsByTagName(&quot;div&quot;)[1].getElementsByTagName(&quot;div&quot;)[0].style.display=&quot;none&quot;;this.innerText=&quot;&quot;;this.value=&quot;Show Emoticon&quot;;}' style='background-color: #21afa4; border: none; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 2px #222; color: #fff; cursor: pointer; display: block; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 12px; padding: 3px 10px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); width: 100%;' type='button' value='Show Emoticon'/>
<div class='alt1'>
<div style='display: none;'>
<br/>
<div style='text-align: center;'>
<div class='comment_emo_list'/>
</div>
</div>
</div>
</div>


dia tidak berhasil dia tidak mau menyatu dengan yg di atas... itu gmn yah solusi ny :(

Balas

mas di saya kog g bisa css nya y mas??
mhon bantuannnya...
http://project-saya.blogspot.com/

Balas

Kalau bikin tombol emoticon gimana, Kang?

Balas

ijin modif dikit kang :-bd

Balas

saya sudah berhasil membuat tomblnya, tapi saat di klik tidak berfungsi ada yg tau solusinya

Balas

Poskan Komentar


×
Chat