Home , , → Cara Membuat Tombol Demo dan Download Sederhana

Diposkan oleh On January 18, 2017 with 10 comments

Cara Membuat Tombol Demo dan Download Sederhana - Membuat tombol demo dan download di blog sangatlah mudah dan sederhana sama saja dengan membuat link atau url biasa. Tetapi link tersebut kita ubah menjadi tombol yang lebih menarik dengan memberikan kotak dan warna akan memberikan kesan yang berbeda dibandingkan dengan link biasa.

Button demo dan download ini saya buat dengan sangat sederhana tanpa menggunakan font awesome, saya hanya menggunakan efek transisi sederhana namun tetap bagus jika Anda gunakan. Tombol ini saya buat sederhana juga untuk mempercepat loading blog Anda, karena jika menggunakan font awesome akan sedikit membutuhkan waktu untuk loading walaupun tombol demo dan download yang menggunakan font awesome jauh lebih keren dibandingkan dengan ini.

Blogger yang menggunakan button download dan demo ini biasanya untuk blog yang menyediakan template, ataupun blog download lainnya. Demo adalah preview atau contoh tampilan dari sebuah file yang akan kita download, sedangkan download adalah file yang akan kita unduh sesuai dengan preview yang sudah kita lihat.
Cara Membuat Tombol Demo dan Download Sederhana - Kreasikan

Demo Download

Nah, bagi Anda yang ingin memasang tombol demo dan download ini di blog Anda silahkan ikuti langkah-langkahnya dibawah ini.

1. Masuk ke Blogger.com
2. Lalu masuk ke bagian Template > Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Copy kode CSS dibawah ini
.demo{border:none;border-radius:2px;padding:5px 20px!important;background:#5959ff;color:#FFF!important;text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.3);transition:background-color 1s ease-out 0s;letter-spacing:1px}
.download{border:none;border-radius:2px;padding:5px 20px!important;background:#4cc3ff;color:#FFF!important;text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.3);transition:background-color 1s ease-out 0s;letter-spacing:1px}
.demo:hover{background:#000;text-shadow:0 0 1px #222}
.download:hover{background:#000;text-shadow:0 0 1px #222}
5. Paste diatas kode ]]></b:skin> atau </style>
6. Klik Simpan template

Bagaimana Cara Menggunakan Tombol Demo dan Download ?

Setelah memasang kode css pada template blog Anda, sekarang Anda tinggal mencoba untuk menggunakannya. Lalu bagaimana cara menggunakan tombol demo dan downloadnya ? Silahkan simak dibawah ini.

Tambahkan kode class='demo' untuk tombol Demo
Tambahkan kode class='download' untuk tombol Download

1. Buatlah sebuah link seperti biasanya pada artikel blog Anda
2. Jika Anda berada di bagian Compose silahkan klik di bagian HTML
3. Carilah link yang sudah Anda buat, misalnya seperti ini
<a href="http://www.kreasikan.com" title="Kreasikan">Kreasikan</a>
4. Tambahkan kode class='demo' atau class='download'
<a class='demo' href="http://www.kreasikan.com" title="Kreasikan">Kreasikan</a>
5. Silahkan publikasikan kembali artikel Anda

Jika Anda masih merasa kesulitan dengan tutorial diatas silahkan untuk memberikan komentar Anda, saya usahakan akan membantu Anda dalam memasang tombol demo dan download di blog Anda.

10 Komentar Untuk "Cara Membuat Tombol Demo dan Download Sederhana"

cocok buat artikel promosi template ini

iya kang, biasanya sih buat blog yang share template pakai button demo dan download

Numpang belajar di sini, sob...

Waah boleh neh caranya, coba ah

Ternyata seperti itu caranya, gampang sekali untuk dipraktekan tinggal menambahkan class demo.

iya mas, tinggal pasang kode css seperti diatas dan tambahkan class nya

Mas... ini kalau di pakai pada WordPress, kira-kira work gak ya?

bisa mas, tinggal simpen kode cssnya di style.css atau kalau cuman dipake buat postingan aja tinggal masukin kode css diatas dibagian text bukan visual dan tambahkan kode seperti ini :
<style type='text/css'>
Kode CSS
</style>

1. Jangan menaruh link aktif maupun non aktif
2. Jangan promosi dalam bentuk apapun
3. Jangan menggunakan kata-kata yang tidak pantas

Terimakasih atas komentar Anda di "Cara Membuat Tombol Demo dan Download Sederhana"