Home » Trik dan Tips Blogging » Cara Membuat Tombol di Blog Blogspot - Cara Mudah Buat Button

Cara Membuat Tombol di Blog Blogspot - Cara Mudah Buat Button

Thanks telah berkunjung...

Cara membuat tombol untuk blog blogger sangatlah gampang, karena kita hanya membutuhkan beberapa kode HTML yang amat singkat. Beberapa tujuan pembuatan tombol atau button ini hanya agar tampilan tulisan maupun link yang kita sediakan terlihat lebih menarik. Selain itu dengan tampilan tombol akan terlihat lebih unik daripada hanya sekedar tulisan saja.

Sebagai contoh, berikut adalah tulisan yang dibentuk dengan gaya tombol/button namun tidak mengandung link



Untuk membuat tombol di atas, anda hanya membutuhkan kode berikut

<button>Belajar Membuat Blog di Blogger</button>



Lalu, jika anda ingin membuat tombol yang terdapat teks dan link di dalamnya seperti berikut (diklik ya, biar tahu bedanya => santai, Link akan mengarah ke postingan ini)



Maka kode yang anda perlukan untuk membuat tampilan tombol dengan teks plus link yaitu sebagai berikut

<a href="http://t4belajarblogger.blogspot.com/2010/05/cara-membuat-tombol-di-blog-blogspot.html"><button>Belajar Membuat Blog di Blogger</button></a>



Jika anda ingin membuat agar linknya terbuka di tab baru, maka anda harus menggunakan kode berikut

<a href="http://t4belajarblogger.blogspot.com/2010/05/cara-membuat-tombol-di-blog-blogspot.html" target="blank"><button>Belajar Membuat Blog di Blogger</button></a>



Dan berikutlah hasilnya (klik yaaa...):



Oh ya, teman-teman bisa menggunakan tombol ini di dalam postingan maupun di halaman depan blog (sidebar, header, footer, dll). Bagi teman-teman yang belum tahu tentang cara penggunaannya untuk halaman depan, silahkan diperaktekkan melalui langkah-langkah berikut:

1. Login dulu ke Blogger
2. Klik menu Tata Letak
3. Klik Tambah Gadget
4. Isikan kolom kosong dengan kode tombol/buttton pilihan anda
5. Klik simpan, dan selesai...silahkan lihat hasilnya di blog anda

Semoga bermanfaat_

BAGI TEMAN-TEMAN YANG INGIN BELAJAR MEMBUAT ANEKA TOMBOL:

1. Cara membuat tombol Spoiler - Tombol Hide-show Buka-Tutup
2. Cara Membuat Tombol Pop-up Window
3. Cara Membuat Tombol Auto Install Code - Tombol Pasang Widget Cepat



Tags: cara membuat tombol, cara membuat button, kode HTML membuat button, script untuk membuat tombol






Bagikan informasi ini ke teman-teman sobat

Postingan menarik lainnya...



Labels:

74 comments:

"Terima kasih untuk tidak spam di sini"

  1. keren nih sob, langsung coba dah

    ReplyDelete

  2. kereeeeeeeeeeeeeeeeeeeeeeeennnnnnnnnnnnnnnn

    ReplyDelete

  3. makasih gan tutornya
    ijin follow ya,,,

    http://aby-umy.blogspot.com/
    kalau ada waktu mampir ya gan?? :)

    ReplyDelete

  7. hm..
    jd pengen nyoba..
    thanks for share kwan...

    ReplyDelete

  10. gan, numpang sedot ilmu ya....
    Blognya keren bgt n ilmunya sangat bermanfaat bgt. Thanks U Very much.
    :25:25:25

    ReplyDelete

  13. link back gan...banner ente dah ane tanem di blog ane....sukses slalu n salam blogger

    ReplyDelete

  14. gan tolong periksa banner ente...kaya na ga bisa ane tanem nih :39

    ReplyDelete

  15. TANKIW BANGET BOZS BERGUNA NIE BUAT AI,KIRIM Email dong Ke ai Email aspkomgrupkom@gmail.com.mantap

    ReplyDelete

  16. cory salah tulis aspgrupkom@gamil.com tanki berat berguna banget informasi nya moga lanjut

    ReplyDelete

  17. akhirnya ketemu juga....
    thanks kawan

    ReplyDelete

  18. saat ini dengan css3 kita bisa menambahkan bayangan dan gradien lho...
    silahkan dilihat disini

    ReplyDelete

  19. bro w sdah truh link blog anda di blog saya , tukar link ya ! http://imadeadyanta.blogspot.com

    ReplyDelete

  22. makasih inponya bro, langsung dicoba nih

    ReplyDelete

  26. Muhammad Iqbal Al Klateny matur tengkyu to tombolnya bang..
    blh visit di iqbalindocomputama.co.cc n mohon koreksinya bang..
    wasslm..

    ReplyDelete

  27. Kegagalan
    Kegagalan2 di masa lalu saya merupakan pelajaran yang sangat berharga yang akhirnya berbuah kesuksesan.
    Saya belajar banyak dari kegagalan saya, saya bisa menjadi ‘lebih pintar’ karena saya pernah gagal.
    Saya pernah gagal, tapi saya masih di sini…
    Saya tidak membiarkan kegagalan merampas impian saya untuk dapat bekerja dari rumah saja.

    hehe ssory gak nyambung neehh...

    ReplyDelete

  28. Gan, tuh link kan keliatan di firefox kalo diarahkan ke button-nya, gimana caranya biar linknya gak keliatan di pojok kiri bawah firefox/explorer. Jwb ya gan....

    ReplyDelete

  29. kalo kamu mau belajar banyak dari google adsense kamu bisa datang ke http://pay-pal-indonesia.blogspot.com/, hanya adsense yang menjanjikan, hati2 dengan bisnis yang menjanjikan di internet, jangan lupa datang ke http://pay-pal-indonesia.blogspot.com/

    ReplyDelete

  31. mksh infonya gan, menarik sekali blog anda ini, sukses selalu ya...mampir blog ana ya gan..http://elgharuty82.blogspot.com/

    ReplyDelete

  36. kalau cara memberi warna pada button gimana?

    ReplyDelete

  37. Cucok MASBROOO Infonya :)

    ” SUKSES SELALU UNTUK ANDA “

    ReplyDelete

  38. Mantap nih Artikel...
    Sangat Bermanfaat Sekali.
    Terima Kasih Banyak :12

    ReplyDelete

  39. WoW...
    Mantap Tutorialnya...
    Sangat Membantu Mas...
    Saya jadikan Menu di Blog Saya.

    ReplyDelete

  41. posting yang bermanfaat, saya follow ya gan, nanti follow balik blog saya ya, makasih

    ReplyDelete

  44. klo naruh horisontal gmn gan k smping dan sampingnya lg

    ReplyDelete

  45. mararantap mas tutorialnya,,say yang msh awam jg bs lncr praktek'nya..mksh. tpi ada yang msh blm mngrti mas .sy mau nnya klw laman sama menu horizontal yang mas bikin tutorialnya ada perbedaan gak? trus klw laman nya di sisipi link bs gk?trus gmn cara'nya?

    ReplyDelete

  46. Siiiplah...terimakasih,,postingannya,bermanfaat utk newbi seperti saya.... hehe ^_^

    ReplyDelete

  47. keren2... blognya bagus.... kunjungi balik ya.... http://pembuatandesign.blogspot.com

    ReplyDelete

  49. MANTAP GAN..LANGSUNG ANE COBA DI BLOG ANE HTTP://IYENKRASTA.BLOGSPOT.COM

    ReplyDelete

  50. wuih info ilmunya sangat luar biasa,terlebih bagi saya pemula bosssss... tq ya

    ReplyDelete

  52. kalau kode itukan pakai tanda "<" dan ini ">"
    tpi adakah kode untuk button yang emakai tanda "{" dan ini "}" mhon dshare ilmunya terima kasih ,,,
    www.adybakom.blogspot.com

    ReplyDelete

  53. Bagus sekali infonya, bro. Salam kenal, ya? Btw, mau tanya bagaimana cara bikin kotak tukar link kayak punya kamu di bawah tulisan "ingin ngelink", bro? Maklum baru belajar ngeblog, bro.

    ReplyDelete

  54. Gan...
    Kursornya kok bisa jadi warna orange ya?
    Gmna thu caranya?
    Mohon pencerahannya

    ReplyDelete

  55. keren gan tutoor nya.. smoga ilmu agan brtambah lg n bsa share lg yoo :)

    ReplyDelete

  56. gue kaga ngerti penjelasan loe gan bingung

    ReplyDelete

  57. @RAF_98Itu menggunakan mouse over sob. Silahkan menuju post berikut:
    http://t4belajarblogger.blogspot.com/2009/12/trik-menyembunyikan-link-yang-berada-di.html

    Semoga membantu :D

    ReplyDelete

  58. @choltomzKodenya tinggal diulang, dan letaknya berderet horizontal brooo...
    Thanks telah berkunjung

    ReplyDelete

  59. @ady davedevilItu juga code sob...tapi bukan code HTML

    ReplyDelete

  60. @Oke-ReloadSilahkan baca postingannya di URL berikut sob:
    http://t4belajarblogger.blogspot.com/2010/01/membuat-mini-banner-yang-cocok-untuk.html

    ReplyDelete

  61. @Cyber GameSilahkan baca di link berikut:
    http://t4belajarblogger.blogspot.com/2012/02/cara-mengganti-kursor-blogger.html

    Semoga membantu :D

    ReplyDelete

  62. @Muhammad RahmanYang bagian mana sob? InsyaAllah ane bantu sampai bisa...

    ReplyDelete

  63. Gan....
    Kalo tombol cuma itu aja pilihannya??
    Ga bisa dikasih warna atau diperbesar?

    Thx B4

    ReplyDelete

  64. @AnonimBisa sob, tapi nanti pake tehnik mouse-over.
    Akan dibahas kapan2 gan. Thanks telah berkunjung

    ReplyDelete

  65. makasih banyak ni gan, salam kenal

    kunjungi balik ya

    http://www.anantarian.co.cc
    http://anantashare.wordpress.com

    ReplyDelete

  66. perlu ane coba sekarang nih...semangat...
    terima kasih gan

    ReplyDelete

  67. wah berguna banget sob artikelnya

    kunjungan balik ya :)
    http://x-sonz.blogspot.com

    ReplyDelete

  68. wah ilmu baru lagi nih, bro misal kita ingin button yang bergambar dan keren gimana ya???

    ReplyDelete

  69. @Rizky HudaDi button biasa sebenarnya bisa kita tambah gambar, akan tetapi akan kelihatan menarik jika menggunakan CSS. IsyaAllah kapan-kapan bakal ane bahas sob. Thanks telah berkunjung :)

    ReplyDelete

  71. mantap bgt kang,, makasih yo

    ohh ia,, mampir juga ea.. http://fajar-pecktows.blogspot.com

    ReplyDelete

  73. kalo buat merubah tampilan warnanya gimana tuh gan

    ReplyDelete
    Replies

    1. Itu bisa menggunakan CSS, insyaAllah akan dibahas pada postingan mendatang. Thanks telah berkunjung

      Delete
Subscribe to: Post Comments (Atom)