Cara Membuat Tombol Demo dan Download Keren
Membuat tombol demo dan download keren 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 Tema > 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 tema.
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
4. Tambahkan kode class='demo' atau class='download'
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 Tema > 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 tema.
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://beritacps.blogspot.com" title="Berita News">Berita News</a>4. Tambahkan kode class='demo' atau class='download'
<a class='demo' href="http://beritacps.blogspot.com" title="Berita News">Berita News</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.