Cara Membuat Tombol Button Link Pada Postingan Blog

Sudah lama sekali saya tidak menulis artikel / tutorial yang membahas mengenai blogging, khususnya platform blogging yang cukup fenomenal yaitu Blogspot. Maklum saja, karena tema utama pembahasan di blog ini bukan kesitu.

Tema utama pembahasan di blog ini yaitu GNU/Linux dan Tutorial Networking khususnya mikrotik, namun sesekali saya akan membahas tutorial mengenai blogging, tujuannya adalah sebagai dokumentasi apa yang telah saya pelajari, agar nantinya ketika saya membutuhkannya tinggal mencarinya saja di blog saya ini.

Ini karena sampai saat ini saya masih setia dengan Blogspot sebagai platform yang saya gunakan untuk kegiatan blogging, selain untuk dokumentasi pribadi ya semoga saja bermanfaat juga untuk para blogger yang lain.

Yang akan saya bahas pada kesempatan kali ini yaitu bagaimana cara membuat tombol button link pada postingan blog yang kita publish.

Dalam sebuah postingan / artikel yang kita tulis lalu publish di blog, terkadang kita mengambil referensi dari blog / situs lain, misalnya saja 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.

Cara Membuat Tombol Button Link Pada Postingan Blog
Credit : www.smashingmagazine.com

Button link ini bisa juga digunakan sebagai tombol download pada blog apabila sobat memiliki blog dengan niche 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 sobat hanya perlu mengetikkan kode HTML dan CSS tertentu langsung ketika menulis artikel di blogspot, jadi kode HTML dan CSS ini tidak perlu dimasukkan kedalam template.

Untuk membuat button link caranya sobat login ke dasbor Blogger ~> lalu klik menu Postingan ~> kemudian klik Entri Baru untuk membuat postingan baru, untuk membuat button sobat 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>
Hasilnya akan terlihat seperti ini.


2. Button dengan link

Kode HTML yang digunakan untuk membuat button dengan link.
<a href="https://www.dodiventuraz.net"><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.dodiventuraz.net" 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.
<button onclick="window.location=
'https://www.dodiventuraz.net'" style="background-color: #444444; color: white; height: 35px; width: 150px;">
<b>
Button Link Warna</b>
</button>
Berikut hasilnya.




Mudah bukan ? silahkan mencoba dan semoga bermanfaat.


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


Subscribe to receive free email updates: