Cara Membuat Tombol Button Link Pada Postingan

Blog
kucingganteng.com/2019/08/cara-membuat-tombol-button-link-pada-postingan-blog.html

August 7, 2019

Cara Membuat Tombol / Button Link Pada Postingan Blog - Dalam sebuah
postingan / artikel yang kita tulis lalu publish di blog, terkadang kita mengambil referensi
dari blog atau situs lain, misalnya saja dari Wikipedia, ini bertujuan untuk memperkuat
argumen atau memperjelas maksud dan tujuan dari artikel yang kita tulis.

Link tersebut biasanya ditautkan kedalam sebuah gambar ataupun kalimat / kata
tertentu, ketika diklik oleh pengunjung maka pengunjung akan dialihkan ke alamat URL
tersebut. Nah agar pengunjung tidak bingung ketika akan mengklik tautan yang
seharusnya diklik, kita bisa memanfaatkan button (tombol) yang ditautkan dengan
alamat URL yang dimaksud (link).

Button link ini bisa juga digunakan sebagai tombol download pada blog apabila kamu
memiliki blog dengan niche atau tema download film, download mp3, download template
dan lain-lain.

Tutorial cara membuat button link pada blog

Button link yang akan saya share ini cukup sederhana karena kamu hanya perlu
mengetikkan kode HTML dan sedikit CSS ketika menulis artikel di blogspot, jadi kode
HTML dan CSS ini tidak perlu dimasukkan kedalam template.

1/3
Untuk membuat button link caranya kamu harus login ke dasbor Blogger ~> lalu klik
menu Postingan ~> kemudian klik Entri Baru untuk membuat postingan baru, untuk
membuat button link pada postingan blog, kamu harus beralih dari mode Compose ke
mode HTML.

1. Button tanpa link

Untuk membuat tombol (button) tanpa link caranya sangat simple, berikut kode HTML
yang digunakan.

<button>Button Tanpa Link</button>

Advertisement

Hasilnya akan terlihat seperti ini.

2. Button dengan link

Kode HTML yang digunakan untuk membuat button dengan link.

<a href="https://www.kucingganteng.com"><button>Button Dengan Link</button></a>

Berikut hasilnya, silahkan klik untuk demo.

3. Button dengan link dan new tab

Maksudnya adalah ketika pengunjung mengklik tombol ini, maka secara otomatis link
yang dituju akan terbuka di tab baru.

Kode HTML yang digunakan.

<a href="https://www.kucingganteng.com" target="_blank"><button>Button Dengan Link

& New Tab</button></a>

Hasilnya masih sama seperti pada nomor 2, namun bedanya tautan / link yang dituju
akan otomatis terbuka di tab baru.

4. Button link dengan background berwarna

Untuk membuat button link dengan background yang berwarna, berikut kode HTML
yang digunakan.

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

Berikut hasilnya.

Mudah bukan? Begitulah langkah-langkah cara membuat button / tombol pada postingan
blogspot, menurut saya penggunaan button link ini sangat penting sekali agar artikel yang
kita tulis lebih user friendly.

Selamat mencoba dan semoga bermanfaat.

Sumber referensi :
https://bloging-gampang.blogspot.co.id/2015/10/membuat-tombol-button-link-
pada.html

3/3