Cara Membuat Tombol Demo dan Download ala Kang Ismet

Cara Membuat Tombol Demo dan Download ala Kang Ismet
Cara Membuat Tombol Demo dan Download ala Kang Ismet - Ya, Malam ini saya akan berbagi Cara Membuat Tombol Demo dan Download ala Kang Ismet. Sekarang sudah banyak macam-macam Tombol untuk Demo ataupun Download dimana-mana, dan sekarang saya akan berbagi Tombol Demo dan Download ala Kang Ismet dengan warna dan efek Hover yang halus, dan lumayan bagus untuk dipandang.
Untuk Demo bisa lihat dibawah ini.


Untuk cara penerapannya sangat mudah, berikut ini cara untuk menerapkannya.
Masuk ke www.blogger.com
Buka Template dan Klik Edit HTML
Letakan kode dibawah ini diatas kode ]]></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}

Kemudian Simpan Template / Save Template. Selesai.
Untuk menggunakan di postingan blog anda, silahkan copy code ini di 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>

Keterangan :

Kode yang bercetak Tebal, Miring, dan Berwarna Merah adalah URL Tujuan untuk Demo.
Kode yang bercetak Tebal, Miring, dan Berwarna Biru adalah URL Tujuan untuk Download.

Sekian dari saya, semoga artikel ini bermanfaat untuk anda.
Terimakasih.
Source Code by : http://blog.kangismet.net/

Postingan terkait:

16 Tanggapan untuk "Cara Membuat Tombol Demo dan Download ala Kang Ismet"

  1. Terlalu susah gan, ane blogger mobile.

    Kujungan balik ke rismawangpr.blogspot.com

    ReplyDelete
  2. L :v L, sama postinganya sama blog ane :v, ketauan ga ada ide posting :v
    #nothingtodohere

    ReplyDelete
    Replies
    1. ah kampred, lu juga gitu...
      malah banyak lu daripada gw, gw palingan baru ini :v
      ngoahahahah

      Delete
    2. L :v L kampred, gw baru 1 :v, yg CSS Komentar G+ :v
      lo udh banyak :v

      Delete
    3. dih, memutar balikkan fakta :p

      Delete
    4. sudah sudah jangan bertengkar,, saling bunuh aja lah |o| wkwkwkwkwk

      Delete
    5. hey, aku tidak bertengkar @@,

      Delete
    6. hey hey manusia aku tidak bertengkar @@.

      Delete
    7. yoo wes lah -_- ,, tadinya gwe mau taruhan ^_^

      Delete
  3. Bagus gan :)
    comment back ya Rafinblog.blogspot.com

    ReplyDelete
  4. bagus tipsnya, tapi garisnya kok lewat gitu sih .-. nanti saya coba tipsnya, smoga berhasil :)

    ReplyDelete
    Replies
    1. blockquotenya nday, mungkin resolusi kompi die kecil :v

      Delete
    2. oh iya, blockquote belom gw benerin, itu gara" pseudo element terus width nya pake persentasi -_-
      tar gw benerin :v

      Delete

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.