Cara Memasukan Button Bootstrap Kedalam Artikel Blogspot

Pernahkah melihat tombol yang disertai dengan icon dan dengan latar belakang warna yang menawan? Apakah bisa diterapkan ke dalam artikel atau postingan di Blogger? Jikalau bisa dilakukan, pertanyaan selanjutnya adalah sesulit apakah membuat tombol semacam itu?

Oke, untuk menjawab serentetan pertanyaan di atas lebih baik lakukan eksperimen hari ini. Karena dengan melakukannya sendiri kita bisa menilai dengan kesimpulan yang tepat. Setidaknya tentu tepat dari sudut pandang sendiri sesuai background pengalamannya masing-masing.

Oleh karena itu, mari kita simak bahan untuk eksperimen hari ini. Yakni tentang cara memasukan button atau tombol dengan menggunakan library Bootstrap. Namun penempatannya bukan melalui "Edit HTML" di dalam theme blogger secara langsung. Melainkan "tampilan HTML" ketika menulis artikel.

Berikut ini contoh hasilnya yang diterapkan pada salah satu blog dummy saya.

Cara Memasukan Button Bootstrap Kedalam Artikel Blogspot

Selain mempercantik konten yang terlihat pada sebuah postingan di Blogger. Button merupakan salah satu elemen yang memiliki fungsi untuk menerima input dari pengguna. Setelah pengguna mengklik button tersebut kemudian bersinergi dengan kode JavaScript agar blog menampilkan hasilnya.

Dan hari ini kita akan mencoba tahapan awalnya sebelum masuk terlalu jauh. Ya, tutorial kali ini akan mengajak teman-teman untuk mempelajari cara membuat button atau tombol. Tentunya dengan memanfaatkan library Bootstrap yang sudah mendukung fungsionalitas theme blogger kita.

Selengkapnya, silahkan simak langkah-langkah memasukan button dari library Bootstrap ke dalam postingan berikut ini.

1. Login ke dashboard Blogger.

2. Pilih salah satu blog jika memiliki banyak blog dalam satu akun.

3. Klik "Tema" atau "Theme".

4. Klik icon "▼" di sebelah tulisan SESUAIKAN.

5. Klik "Edit HTML".

6. Masukan link CDN yang mengarah ke CSS Bootstrap versi terbaru, misalnya kode di bawah ini yang diletakan setelah tag <head> dan sebelum tag penutup </head> dan <b:skin><![CDATA[.

7. Letakan link berikut yang mengarah ke JavaScript bawaan Bootstrap server CDN; jsdelivr atau penyedia CDN Bootstrap lainnya. Kode di bawah ini diletakan sebelum tag penutup </body>.

8. Simpan template.

9. Buat sebuah postingan dan beri judulnya.

10. Ketik artikelnya.

11. Klik icon pena kemudian pilih mode "Tampilan HTML".

12. Sisipkan button atau tombol menggunakan library Bootstrap, misalnya baris kode berikut:

<button class="btn btn-primary btn-lg" type="button"><svg height="1em" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"></path></svg> Live Preview</button> <button class="btn btn-danger btn-lg" type="button"><svg height="1em" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg> Buy</button> <button class="btn btn-success btn-lg" type="button"><svg height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"></path></svg> Download</button>

13. Klik "Publikasikan".

14. Hasilnya akan terlihat seperti pada tangkapan layar paling atas.

Kesimpulan

Eksperimen hari ini kita telah berhasil membuat tombol atau button pada sebuah postingan artikel. Dan tombol atau button ini merupakan pemanfaatan library Bootstrap pada mesin Blogger. Jika ingin mengedit nama buttonnya tinggal edit saja kata "Live Preview", "Buy" dan "Download".

Sedangkan untuk icon gambar di atas bisa kita ubah dengan kode SVG lain dari Fontawesome, Bootstrap Icon atau penyedia layanan icon lainnya. Lalu bagaimana cara memasangnya? Tinggal ganti saja kode di atas yang di awali dengan tag <svg> dan di akhiri dengan tag penutup </svg>.

Tenang, bagi teman-teman yang merasa bingung tidak usah khawatir karena pembahasan kemarin kita sudah tunjukan cara pasang icon SVGnya. Akhir kata, semoga artikel ini bisa menambah pengetahuan tentang pemanfaatan library Bootstrap pada mesin Blogger.

Selamat mencoba.

Cara Memasukan Button Bootstrap Kedalam Artikel Blogspot

Cara Memasukan Button Bootstrap Kedalam Artikel Blogspot

Kesimpulan

Tidak ada komentar:

Posting Komentar

Memuat...

Yusuf