Cara Membuat Tombol Demo dan Download Pada Postingan Blog

Tutorial.web.id – Cara Mudah Membuat Serta Memasang Tombol Demo dan Download Pada Postingan Blog. Cara membuat dan memasang 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 yang 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 ]]></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 tersebut ?

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

Contoh hasil akhir akan seperti ini:
DEMO | DOWNLOAD

1. Buatlah sebuah link seperti biasanya pada artikel blog Anda
2. Jika Anda berada di bagian Compose silahkan klik ke bagian HTML
3. Carilah link yang sudah Anda buat, misalnya seperti ini

<a href="https://www.sebarkan.xyz" title="Sebarkan Berita">Sebarkan Berita</a>

4. Tambahkan kode class='demo' atau class='download' sehingga menjadi seperti ini

<a class='demo' href=" https://www.sebarkan.xyz" title="Sebarkan Berita"> Sebarkan Berita</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.

Berlangganan update artikel terbaru via email:

Share this post