Cara Membuat Button (Tombol) Link di html pada Postingan Blog

Table of Contents

Cara membuat tombol link di html pada postingan blog. Seorang blogger biasanya ingin membuat inovasi dan tampilan agar postingannya terlihat menarik. Salah satunya adalah dengan membuat tombol button link di html pada postingan blog. Biasanya sih postingan yang ada button atau tombol seperti itu digunakan untuk memperlihatkan sekaligus memperjelas tombol download. Namun tak hanya itu, tombol atau button juga bisa memberikan tampilan yang menarik. 

Nah oleh sebab itu, pada tulisan kali ini saya akan memberikan tutorial sederhana tentang cara membuat button (tombol) link di html pada postingan blog. Simak, ya.

Selain itu barangkali anda membutuhkan tutorial lainnya yakni tentang postingan gambar grid di blogspot silakan baca tutorial cara membuat gambar sejajar di Blogspot melalui kode html.

Ada beberapa macam button pada postingan blog, seperti tombol tanpa link, tombol disertai link dan tombol disertai link dengan membuka tab baru di browser. 

Jika anda ingin berinovasi juga bisa dengan cara mengganti background button yang ingin dikustomisasi. 

Button tanpa Link/tautan

Untuk membuat button tanpa link sangat mudah, berikut adalah kode yang bisa anda tulis di potingan

<button>Button Tanpa Link</button>

Hasil dari kode html di atas adalah sebagai berikut

Button disertai Link

Selain tanpa link, button juga bisa diisi dengan tautan yang anda inginkan. Misalnya ingin membuat button dengan tujuan tautan merujuk pada alamat website tertentu. Anda cukup menggunakan kode html di bawah ini 

<a href="https://www.catatan.qowim.net"><button>Button Dengan Link</button></a>

Keterangan: ganti url yang kalian inginkan dan jika ingin mengganti tulisan Button dengan link silakan diganti saja. 

Hasilnya akan seperti ini

Button Tombol Disertai Link dan Membuka Tab Baru Browser

Jika anda menginginkan button yang berisi link dan membuka otomatis tab baru, maka kode htmlnya adalah sebagai berikut 

<a href="https://www.catatan.qowim.net" target="_blank"><button>Button Dengan Link & New Tab</button></a>

Keterangan: Ganti url warna orange di atas dengan url yang anda inginkan. Ganti tulisan berwana hijau dengan tulisan yang anda inginkan untuk ditampilan. Hasil dari kode html di atas adalah sebagai berikut

Mudah, bukan? Nah sekarang coba kita kustomisasi tombol-tombol tersebut dengan kode html yang sederhana saja. 

Button Berwana

Selain gaya-gaya standar di atas, anda juga bisa memodifikasi button dengan warna-warna yang anda inginkan. Salin-tempel saja kode di bawah ini

<button onclick="window.location=
'https://www.catatan.qowim.net' "style="background-color: #7ae6c9; color: white; height: 35px; width: 150px;">
<b>
Button Link Berwarna</b>
</button>

Keterangan pada tulisan berwarna orange silakan ganti kode-kode tersebut sesuai dengan keinginan anda. Hasilnya akan seperti di bawah ini

Mudah sekali, bukan?

Penutup

Demikianlah tutorial sederhana tentang cara membuat button atau tombol link di html pada postingan blog dan pastikan juga postingan anda di Blog sudah SEO friendly. Semoga ini bermanfaat.