Cara Membuat Tombol DEMO dan DOWNLOAD di Blog


Mr.bkp404 - Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah blogger lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download. Biasanya membuat tombol download dan demo ini adalah ketika memposting artikel yang membutuhkan demo, misalnya ketika memposting mengenai template blog ataupun widget blog dan lain sebagainya.


Langsung saja ke TKP
Cara Membuat Tombol DEMO dan DOWNLOAD di Blog

Demo

Demo Download

Tutorial


Tambahkan kode di bawah ini sebelum kode ]]></b:skin>

/* TOMBOL DOWNLOAD DAN DEMO */
.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://av9dino.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://av9dino.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
14 komentar
Eross Arifuddin Fadly

Cara Membuat Tombol DEMO dan DOWNLOAD di Blog

Eky Januarta

wah cucok tombolnya gan :) izin pake yo :D

Andro PC Center

ohh gitu gan caranya, thanks buat caranya

Yoga Aprilliansyah

rensponsive gk tombol nya :v

Eross Arifuddin Fadly

Oke sob, sama-sama.
Semoga bermanfaat ya.

Eross Arifuddin Fadly

BTW Responsive sob, bukan rensponsive. haha.
100% Responsive kok sob.
Di coba yaa.

wanita penghibur

wah keren ini dia kebetualan ane posting template
thannks gan

Hafiz

Wehehe mantap nih tutornya ^-^

Eross Arifuddin Fadly

Wah Terimakasih yah sob.
Semoga Bermanfaat.

Fahmi Muhammad Nur Ibrahim

ane bookmark gan ya tar ane mau coba posting yang ada demo dan donlodnya :)

Galih Alan M

Nice info gan, ini yang sedang ane cari...
ijin terapin

Eross Arifuddin Fadly

Silahkan sob.
Jangan lupa di coba ya sob.

Eross Arifuddin Fadly

Oke sob, sama-sama.
Silahkan di coba ya sob.

Selamat Datang Di Mr.bkp404.
Terima kasih sudah berkunjung.
Sebelum Berkomentar Silahkan Baca Peraturan nya.

1. Dilarang Flood
2. Dilarang JUNK
3. Dilarang SPAM
4. Dilarang Live Link
5. Dilarang SARA
6. Dilarang Berkomentar Memakai Bahasa Kotor / Binatang
7. Dilarang Mencari Keributan Disini
8. Berkomentarlah Dengan Bahasa Yang Sopan

Note : Jika Melanggar Salah Satu Peraturan di Atas, Komentar Anda Akan Saya Hapus. Terima Kasih

Posting Lebih Baru Posting Lama