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
Unknown

Cara Membuat Tombol DEMO dan DOWNLOAD di Blog

Eky Januarta

wah cucok tombolnya gan :) izin pake yo :D

Unknown

Oke sob.
Semoga bermanfaat.

AndroPC Center

ohh gitu gan caranya, thanks buat caranya

Unknown

rensponsive gk tombol nya :v

Unknown

Oke sob, sama-sama.
Semoga bermanfaat ya.

Unknown

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

cum2him

wah keren ini dia kebetualan ane posting template
thannks gan

Hafiz

Wehehe mantap nih tutornya ^-^

Unknown

Wah Terimakasih yah sob.
Semoga Bermanfaat.

Unknown

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

Unknown

Silahkan sob.
Jangan lupa di coba ya sob.

Unknown

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