Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
Komentar

Membuat Tombol pada Pesan Formulir Komentar

Cara menambahkan tombol pada pesan formulir komentar blogger.
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.
#Komentar

98 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. bookmark dulu kang,,,besok di praktekin,,hahahay
    1. silahkan sob... selamat beristirahat :)
  2. Makin menarik ini Kang untuk blog,seep Kang.I like it :)
    1. oke sob.. silahkan dicicipi :)
  3. kebetulan saya blom pny yg ginian, soalnya baru aja ganti template.., entar saya coba Pak.., makasih... :)
    1. silahkan dicoba.. tapi jangan keseringan ganti template... juga
  4. Makasih berbagi tipsnya Kang Ismet
    1. sama2 sob.. semoga bermanfaat
  5. Blog ini makin keren aja :D sampai membuat diriku terkagum-kagum :)
    1. makasih sob.. semoga sanjungannya jadi motovasi
    2. Amiin
  6. bisa gk kalo warna backgroundnya di ganti ?
    1. bisa.. ganti aja yang kode background:......
  7. makasih gan udah di share
  8. keren kang tipsnya
  9. Makin cihuy euy blog kang Ismet.
    Tips2nya pun makin greget. Sukses ya, kang :)
    1. hehehe... makasih sob...
  10. error gan di blog aku http://nandarious.blogspot.com/
    1. dicoba lagi sob...
    2. iya kang saya juga eror kang

      http://masjawika.blogspot.com/

    3. coba pelan2 ulangi lagi
  11. wah ini lanjutan yang kemarin ya kang, tak bungkus dulu kang, nanti di coba...
    1. iya, untuk tombolnya kang Mur..
  12. Boleh juga, jadi tambah manis tampilannya ditambah tombol !
    Bookmark dulu agrh... :-D
    1. Silahkan sob....
  13. Kang ada referensi untuk membuat konversi kode kayak punya akang? Saya mau bikin tombol ini tapi bingung untuk buat toolnya... :D
    1. 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.....
    2. heheheh..eta pan atos dibodaskeun sareng di beureumkeun.. janten weh beureum bodaskode na :)
    3. Heheheh...punten nya kang... hatur nuhun pisan...
    4. hehhee dihapunten pisan..
  14. trima kasih banyak informasinya om...
    http://informasibloger.blogspot.com
    1. sama2 sob... blognya keren
    2. trima kasih mas itu smua karena mas yang ngjarin trik2nya...

      salam hangat blogger sumbawa..
  15. makasih infonya sob :D
  16. eror kang gimana tuh kang
    http://masjawika.blogspot.com/

  17. Kang,cara buat konversi kode gimana?
    1. liat saja source punya saya... trus save as HTML, upload ke google code
  18. Ini gimana Kang cara memindahkan kebawahnya? :(
    [img]http://4.bp.blogspot.com/-d4ENvpbJdYE/UbbFmA9ECWI/AAAAAAAAAYE/93xrPsZm8vk/s1600/123.jpg[/img]
    1. pas nulis pesan komentar, seudah no. 4 enter aja 2x sob :)
  19. Kang, kok punya saya malah dibawah.? [img]http://prntscr.com/1dpeig[/img]
    1. penempatan kode HTMLnya salah kali, harus di dalam tag 'p'
  20. kode:

    pdata:blogCommentMessage

    kok ndak ada ya?
    1. coba di cari lagi.... 'p'nya dipisah
  21. 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
  22. mau tanya kang,kalo di postingan yang blm ada komentarnya kok tombolnya ngga muncul ya?
  23. Berhasil kang,nuhun nya??
  24. wow keren :),sudah saya pasang di blogku.Bang klo buat tooltip pada posting blog seperti di laman depan gimana ya??
    1. masuk ke sini sob http://blog.kangismet.net/2013/07/simple-tooltip-dengan-jquery.html
  25. kang, maaf nih OOT, gimana cara buat klik ganda langsung keseleksi semua di kode quote ? mohon bantuannya kang :D
    1. 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>
  26. biar bisa bukak di jendela baru gimana kang ? :)
    1. 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>
  27. Yandi Mulyadi
    Komentar ini telah dihapus oleh pengarang.
  28. Di punya ku Tombol itu gak muncul http://nonoote.blogspot.com/2013/08/simple-nyoba.html
  29. kalau buat Konversi kode disini dan top komnetator gimana kang ?
    dan kode ... <p><data:blogCommentMessage/></p> ... di blog saya lebih dari satu.
    solusinya gimana ?
    1. kan udah dijelasin di atas sob :)
  30. infosa sagat bermanfaat kang :D

    Terimakasih!
  31. Wihh kang manteb (y) :D

    www.kevin-432.blogspot.com
  32. Gak work tuh gan.
  33. udah ngikutin sesuai tutorial..tp ko ga muncul ya kang..
    1. masa sob... coba ulangi lagi
  34. 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
    1. Coba aja ke3-3 nya
  35. mas, jika hanya ingin membuat tombolnya saja tanpa membuat kotak form nya, itu langkah nya bagaimana ?
    1. yang di atas itu caranya
  36. gak bisa om,,padahal udah ane coba berkali-kali secara teliti..
  37. mantap kang.....Bookmark dulu :)
  38. Kok ane selalu gagal terus ya kang, pada ane udh ngikutin tutor nya .
    mohon pencerahannya yah kang :-D
    emilseo.blogspot.com
  39. buat bikin konversi kode pop up kek gitu gimana yah kang ?
    1. iya kang saya juga mau nih ^_^
      - salam damai -
  40. mantab kang!
    keren salam damai aja!
    Rio Us"
  41. Mantap kang trik nya..
    salam blogger
  42. waduh url nya salah nih, kok membuat judul pada pesan formulir komentar, bukannya tombol ?
    1. iya waktu itu salah bikin link.. mau dibenerin tanggung :)
  43. Wahh...
    kaya'nya udah update lagi nih konversi kodenya, bagi dong tipsnya...

    Aku coba-coba tombol buttonnya ga ngefek...
    1. tombol buttonnya ga ngefek gimana maksudnya?
  44. semakin banyak saya baca tutorial kang ismet semakin saya ingin terapkan semuanya dan semakin saya pusing @@,
  45. Kang kok gak muncul ya tombolnya?
  46. berhasil kang, cuman kok gak kayak pop up gitu ya :o
  47. 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?
    1. sama penyakitnya kayak punya ku :(
  48. mas di saya kog g bisa css nya y mas??
    mhon bantuannnya...
    http://project-saya.blogspot.com/
  49. Kalau bikin tombol emoticon gimana, Kang?
  50. ijin modif dikit kang :-bd
  51. saya sudah berhasil membuat tomblnya, tapi saat di klik tidak berfungsi ada yg tau solusinya
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.