Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Membuat Tombol Demo Dengan Efek Slide Pada Postingan Blogger. Tombol Demo merupakan suatu tombol yang beriksikan Link yang berfungsi menjadi perantara antara situs website/blog anda dengan situs website/blog yang berisikan media penyimpanan untuk nampilkan hasil dari tampilan demo tersebut.
Fungsi dari pemasangan Tombol Demo pada situs website/blog ini sebenarnya mempunyai peran yang sangat penting yaitu mempermudah pengunjung untuk mengetahui Tombol Link yang berisikan Demo tersebut tujuannya agar pengunjung situs blog mengetahui tampilan dari hasil demo tersebut.
Karna fungsi dari Tombol Demo pada situs website/blog memiliki peran yang peting maka pemilik situs website/blog memberikan efek khusus atau warna pada Tombol Demo ini tujuannya untuk mempercantik blog dan mempermudah pengunjung situs website/blog anda dalam membedakan Tombol Link yang tersedia.
Di postingan sebelumnya saya pernah memberikan tutorial serupa, namun kali ini saya membuat tombol demo dengan efek slide. Jadi bagi yang tertarik untuk memasang Tombol Demo dan Download pada situs blog kalian, ikuti tutorial di bawah ini.
Cara Mudah Membuat Tombol Demo Dengan Efek Slide Pada Postingan Blogger
1. Buka Blog > Pilih Menu Tema > kemudian pilih Edit HTML
2. Tambahkan kode ini tempat berada di atas kode ]]></b:skin> atau </style>
/* Tombol DEMO */
#buttondemo {margin:15px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#f24a4a;letter-spacing:.5px;padding:10px 50px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #202d3a;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#f24a4a;color:#fff;box-shadow:inset 0px -50px 0px #202d3a;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}3. Jika sudah selanjutnya pilih Simpan Tema
4. Untuk menerapkan tombol demo pada blog, selanjutnya Buat Postingan baru > pilih menu HTML (bukan
<div id="buttondemo"><a class="btn" href="#">DEMO</a></div>Keterangan:
| Nama | Keterangan |
|---|---|
| # | Ubah dengan alamat url yang anda tujuan anda |
| DEMO | Ubah dengan kata-kata sesuai yang anda inginkan |
Cukup mudah bukan Cara Mudah Membuat Tombol Demo Dengan Efek Slide Pada Postingan Blogger. Bila kamu mengalami kesulitan dalam menerapkannya pada blog kalian silahkan tinggalkan pesan di kolom komentar. Semoga informasinya bermanfaat dan sampai jumpa.