Saturday, 24 August 2013

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/

Seorang pelajar yang ingin berkreatifitas di dunia blogging dan yang selalu ingin membuat kreatifitas yang lebih baru.

16 komentar

Terlalu susah gan, ane blogger mobile.

Kujungan balik ke rismawangpr.blogspot.com

oh, usahakan main di komputer/laptop ^^

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

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

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

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

dih, memutar balikkan fakta :p

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

blockquotenya nday, mungkin resolusi kompi die kecil :v

sudah sudah jangan bertengkar,, saling bunuh aja lah |o| wkwkwkwkwk

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

hey hey manusia aku tidak bertengkar @@.

yoo wes lah -_- ,, tadinya gwe mau taruhan ^_^

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.
EmoticonEmoticon