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

Membuat Tombol Demo dan Download ala Kang Ismet

Cara membuat tombol demo dan download ala Kang Ismet, dengan effect transition.
Membuat Tombol Demo dan Download ala Kang Ismet - Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini.
membuat tombol download dan demo
Biasanya tombol ini digunakan untuk berbagi template, atau link download saja.

Untuk demonya, nantinya seperti ini :


Cara membuatnya :

Tambahkan kode di bawah ini sebelum ]]></b:skin>
/* -- Kang Ismet Button --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode HTML)
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blog.kangismet.net" target="_blank">Demo</a></li>
<li><a class="download" href="http://blog.kangismet.net" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
#Template Hack

95 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. Kayaknya kren tuh tombol, ijin menggunakan scriptnya kang, semoga bisa saya praktekkan.
    salam blogger
    1. silahkan sob.. dengan senang hati :)
  2. Mantap kang :) Tapi saya masih terbiasa dengan cara manual sih :D
    1. silahkan sob.. man suka :)
  3. ada efek animasinya bikin greget..

    *langsung masuk ke lab praktikum
    1. jangan lupa pake masker dan sarung tangan, biar safety :)
  4. Pinjem scriptnya kang ... buat koleksi dlu ... sapa tau nanti butuh ^_^
    1. silahkan sob.. dengan senang hati
  5. Saya seneng dengan tombol yang pure CSS, jadinya ga ngebebanin blog....
    Scriptnya saya amankan ya kang... Hatur Nuhun...
    1. betul sob, tanpa embel2 image
  6. ijin nyimpan scriptnya kang,saya akan simpan buat nanti kalau saya membutuhkannya.
    1. sok atuh sakuan :)
  7. Saya menggunakan template buatan Kang Ismet di blog http://rotyyu.blogspot.com tapi kenapa belakangan ini thumbnail di halaman depan ga muncul ya? Padahal di artikel-artikel lama muncul
    1. nanti saya coba liat sob...
  8. @kang Ismet, please sir i need your help i downloaded one of your templates(Kangiz Magz) and upload it on my blog but it is not displaying well. Here is my blog link www.justgoals.blogspot.com
  9. ada warna yang lain gk kang ?
    1. tinggal ganti warna backgroundnya pada CSS sob
  10. Kebetulan saya jarang demo kang hihi..
    Tapi ini pasti nanti berguna buat saya kang, simpen dulu scriptnya...

    Happy blogging kang..
    1. lho.. itu yang kemaren dateng ke rumah saya siapa? yang demo masak wkwkwk..
  11. Kalu cuma mau pasang tombol download doangan kumaha caranya, kang?
    1. hilangkan saja salah satu kode di atas <li>..isi kode..</li>
  12. kang sekarang kayanya blogger udah ganti ya tampilan edit htmlnya?
    1. iya sob.. baru lagi
  13. Untuk yang blog dengan memiliki banyak template hasil karya sendiri seperti punya Kang Ismet ini pasti dibutuhkan...
    Makasih atas berbagi ilmunya ini Kang
    1. makasih sob...
  14. Dapat ilmu dan pengetahuan baru lagi disini
  15. gak sia2 gw subscribe ini blog , ternyata postingan2 nya bermanfaat .. cakepp !!
    1. thanks sob..
  16. kalau model box gimana mas ?? :D
    1. model box kaya gimana ya? ada contohnya ga?
  17. Thanks 4 ur sharing
  18. klo buat table di postingan gmna kang ?
    1. panjang kodenya, banyak ko yang udah share
  19. Waaah boleh juga nih , apalagi buat blog yang buat download :D mkasih mas
  20. Ijin catet ya pak...mungkin suatu saat saya membutuhkan ini.
    mksh tutorialnya
  21. Sangat bermanfaat sekali.
  22. Informasi yang sangat sayang kalau sampai dilewatkan. Terimakasih sudah share.
    1. sama2.. semoga bermanfaat
  23. maaf kang,,pertanyaan saya sedikit melenceng dengan judul artikelnya, yg mau saya tanyakan bagaimana cara membuat menu diatas header itu, ketika halaman di scroll kebawah menunya tidak hilang. terima kasih.
    1. nanti saya share sob.. di tunggu aja
  24. Nah ini dia,yang saya cari cari.
    Design tombol seperti ini saya sangat suka :)
    1. terimakasih kalau postingan saya bermanfaat :)
  25. bang...
    bisa minta nomer Hp-nya gak..
    penting banget.
    1. ada apa ya.. ke 085723023322 aja
  26. Keren banget tombolnya kang, ber-animasi gitu! Cucok nih buat blog-blog yang berisi tutorial. :D
    1. makasih sob.. buat yang bagi2 software, mp3 juga bisa kok, pakenya tombol download aja satu :)
  27. keren gan tombolnya,,
    apakah tidak memberatkan blog?
    1. Setiap penambahan kode pasti ada pengaruhnya sedikit. Cuman tombol ini pure CSS3 sob, pastinya ringan.
  28. ini salah satu hasil praktek saya kang
    http://jangandownload.blogspot.com/2013/04/download-film-one-piece-movie-z-2012.html

    bagus juga, soalnya blog saya bertemakan tentang download.
    pas banget
  29. kang saya bloger baru nih saya mau tanya kalau script buat spoiler tapi tampilannya seperti tombol diatas gimana ya? karna kebanyakan tombol spoiler gitu gitu aja hehe.. sekalian mau nanya gimana cara membuat slider seperti tampilan di template yang punya mas http://www.gallerybloggertemplates.com/2012/10/kangis-magz.html kebetulan saya pake template yg sama. ditunggu balasannya ya mas. trims banyak
    1. Untuk spoiler nanti saya buat tutorialnya sob, Untuk Kanismagz tutorialnya ada di sini :
      http://blog.kangismet.net/2012/10/kangis-magz-blogger-template.html
  30. makasih kang ismet. ditunggu ya untuk tutorial spoiler nya hehehe.. kalau ndak merepotkan bisa di emailkan ke [email protected] kang. matur nuwon
  31. keren kang , tombolny keren, izin sedot ya gan ...
    ini blog sya , http://masjawika.blogspot.com/ salam kenal
    nama saya jawikas

  32. Makasih kang , infonya sangaaaat bermanfaat. pas lagi perlu nih. sekali lagi makasih ya |o|
  33. kang cara nambahin emoticon komentar kayak di blog ini gimana caranya?
    kok lain dari yang lain, biasanya khan kudu pake space dulu, tapi ini kok nggak, ajarin aku donk...


    he..he..he..he..
  34. sip gan ..
  35. kang kalo mau ngubah ukuran tombolnya gimana yah?
    terima kasih sebelumnya :)
  36. dibungkus,kang...hatur nuhun...tampilan web-nya keren eung...
    1. mangga kang... ah sa keren2na hehehe nuhun ah
  37. gagal kang uy. nh nya??
  38. PERTAMAX
    kunjungi juga : http://kazoku48.blogspot.com/
  39. om koq punya saya ga rapih, malah jadi Demo di Atas Download dibawah, jadi bertumpuk gtu..!!

    cara agar jadi satu baris gmana yah ??
    1. ada contoh? biar saya liat dulu sourcenya
  40. sebelumnya terimakasih telah menanggapi Pertanyaan saya, ini adalah Contoh nya, telah saya SS[img]http://prntscr.com/1jk9yz[/img]
  41. http://prntscr.com/1jk9yz
    1. maksudnya bukan screenshootnya... contoh tombol pada postingannya..
  42. Ijin gunain scriptnya di blog ini http://garuda4rt.blogspot.com
  43. mantab www.donesiarony.blogspot.com
  44. saya coba terapkan kang.
  45. Sedikit masukan kode -webkit- mending di hapus aja ya mas? biar CSS valid :)
    kunjungi blog saya : http://game-begog.blogspot.com
  46. Nah artikel ini yang dulu pernah saya cari namun belum ketemu di mbah google
    Kebetulan di blog Kang ismet sudah di realisasikan, ijin pakai scriptnya
    Kang Ismet, terima kasih atas artikel nya Kang ?
  47. Keren kang , izin pake :D
  48. Makasih Kang Ismet,, Ane mau coba dulu
  49. Anonim
    Komentar ini telah dihapus oleh pengarang.
  50. Izin Copas Koang
  51. Sorry maksudnya Akang....
  52. mantap kang , keren nih tombolnya ... Blogwalking visit blog ane ya hihihi www.tunizzz.com
  53. blognya sangat rapi dan bagus bang.. :-bd
    tulisannya juga sangat menginsprasi saya yg baru belajar blog.

    kunjung balik & tinggalkan jejak ya bang. www.okebayu.com
  54. kalau membuat tombol download pake elusive icon gimana mas
  55. cara pembuatan kayak gini mas tolong http://2.bp.blogspot.com/-te8pqbfMfwc/Us-oGbuYJ8I/AAAAAAAAAWM/n6GzUpwuibU/s1600/Untitled.png
  56. izin pake ya om, oh ya makasih banyak ya, saya dapet banyak pengetahuan tentang bloging disini, maksih ya om
  57. thank untuk tutorialnya, semoga bermanfaat
    http://goo.gl/j0sf8h
  58. Saya Make Nie Script Demo Dan Download Ya min.biar tambah bagus :)

    http://gameunyil.blogspot.com
  59. kang waktu saya taroh di atas ]]></b:skin> gabisa di atas </style> juga gabisa :( gimana kang
  60. Kalo sama bikin tulisan tulisan di postingan nya gimana kang ... template saya gallery ko jadi gak sesuai malah gak pas.
  61. Wa makasih bro atas pemberian tutorial ini manfaat sekali
  62. +KangIsmet
    kalo dikasih font awesome gimana yah.?
    tapi disimpannya di CSS
  63. Unknown
    Komentar ini telah dihapus oleh pengarang.
  64. kren kang
  65. Makasih Banget kang ismet langsung di praktekan kok :D
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.