Cara Membuat Tombol Demo dan Download Sederhana
Rabu, 18 Januari 2017
10 Komentar
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.
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
4. Copy kode CSS dibawah ini
6. Klik Simpan template
Tambahkan kode
Tambahkan kode
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
4. Tambahkan kode
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.
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.
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
5. Paste diatas kode.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}
]]></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 DemoTambahkan kode
class='download' untuk tombol Download1. 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.caramanual.com" title="Cara Manual">Cara Manual</a>4. Tambahkan kode
class='demo' atau class='download'<a class='demo' href="http://www.caramanual.com" title="Cara Manual">Cara Manual</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.
cocok buat artikel promosi template ini
BalasHapusiya kang, biasanya sih buat blog yang share template pakai button demo dan download
HapusNumpang belajar di sini, sob...
BalasHapushehe, silahkan sob
HapusWaah boleh neh caranya, coba ah
BalasHapussilahkan mba dicoba ya
HapusTernyata seperti itu caranya, gampang sekali untuk dipraktekan tinggal menambahkan class demo.
BalasHapusiya mas, tinggal pasang kode css seperti diatas dan tambahkan class nya
HapusMas... ini kalau di pakai pada WordPress, kira-kira work gak ya?
BalasHapusbisa 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 :
Hapus<style type='text/css'>
Kode CSS
</style>