Home / Blogging

Cara Membuat Tombol Demo dan Download di Blog

Oleh Arif Rudiantoro 6 comments

Cara Membuat Tombol Demo dan Download

ARDINTORO |dot| COM - Tombol "Demo" maupun "Download" sangat di perlukan, bila akan membuat konten download maupun tutorial, agar tampilan postingan lebih menarik. Di bebrapa artikel saya terdahulu sudah saya terapkan tombol demo maupun donload dan hasilnya luar biasa, postingan terlihat semakin cantik, contohnya DISINI.

Pada kesempatan kali ini saya akan berbagi cara membuat tombol demo maupun download yang nggak melibatkan edit HTML, artinya dalam memasang tombol ini Sobat nggak perlu repot-repot mengeditnya melalui HTML  tetapi cukup lewat edit di postingan dengan metode tampilan HTML. Kelebihan tombol ini adalah saat Sobat ganti template tombol tetap aman dan nggak hilang kerena pengeditannya melalui postingan.

Nggak perlu panjang lebar silahkan di simak. Sengaja postingan ini saya buat singkat agar cepet nulisnya dan to the point 😅. Untuk menerapkan cara ini silahkan Sobat masuk ke akun blogger masing-masing, setelah itu klik postingan dan postingan baru. Ingat saat memasukkan kode ini ubah metode menulis menjadi "Tampilan HTML". Kodenya ada di bawah ini.

<style>
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}
.buttonx:hover{background-color:#f78d1d!important;background:0}
.buttonx:active{position:relative;top:1px}
</style>
<div style="margin: 10px 0px; text-align: center;">
<a class="buttonx" href="Link Tujuan" target="_blank">Demo</a>
<a class="buttonx" href="Lnk Tujuan" target="_blank">Download</a>
</div>
 
Keterangan: Bila Sobat hanya membuat tombol "Demo" saja silahkan hapus kode "<a class="buttonx" href="Lnk Sobat" target="_blank">Download</a>" sebaliknya bila Sobat membuat tombol "Download" silahkan hapus kode "<a class="buttonx" href="Link Sobat" target="_blank">Demo</a>". Jangan lupa sebelum menerapkan kode, silahkan ganti "Link Tujuan" dengan link Sobat masing-masing. Berikut ini tampilannya bila di terapkan di postingan blog.
Mudah to cara membuat tombol download maupun demo. Silahkan Sobat praktekkan dengan teliti agar nggak terjadi error saat di pasang. Bila Sobat masih bingung cara pasang silahkan bertanya di kolom komentar atau melalui email di kontak yang tersedia, terimakasih.

6 comments for "Cara Membuat Tombol Demo dan Download di Blog"

Jika ada yang Ingin Anda Tanyakan Terkait Artikel di atas Silahkan Bertanya Melalui Kolom Komentar Berikut ini, dengan Ketentuan :

1. Berkomentarlah dengan Sopan (No Spam, Sara dan Rasis).
2. Komentar di Moderasi. Bila berkomentar nggak sesuai dengan kebijakan Blogger maka nggak di terbitkan!
3. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
4. Happy Blogging 🙂.