Cara Membuat "Icon Bar" dengan HTML, CSS dan Fontawesome

Membuat template blogspot bisa dilakukan dengan kode-kode HTML, CSS dan JavaScript. Bahasa script ini termasuk yang banyak diulas oleh website tutorial. Meskipun pada pembahasannya tidak menyebutkan secara detail untuk blogspot.

Dulu, saya termasuk melewatkan tutorial seperti itu walaupun diulas oleh situs besar yang menjadi rujukan banyak orang. Karena yang ada dalam benak saya saat itu hanya mencari tutorial khusus untuk blogger atau blogspot.

Padahal, apa yang diuraikan dalam tutorial tersebut bisa juga diterapkan pada blogspot. Contohnya apa yang dijelaskan w3schools.com ketika menerangkan icon bar. Untuk itu, pada kesempatan kali ini kita akan mencoba membuktikannya.

Apa itu Icon Bar?

Icon bar adalah istilah yang digunakan untuk menggambarkan panel yang berisi ikon-ikon kecil yang mewakili fungsi tertentu pada sebuah user interface website.

Icon bar ini bisa terletak di bagian atas, bawah, atau samping layar dan dapat berupa baris horizontal atau vertikal.

Sedangkan ikon-ikonnya merupakan representasi visual yang dapat dengan mudah dikenali oleh pengguna sebagai suatu tindakan atau perintah. Pengguna dapat mengklik atau mengetuk ikon-ikon tersebut untuk memicu fungsi-fungsi terkait.

Dengan adanya icon bar, pengguna dengan cepat bisa mengidentifikasi dan menggunakan fitur-fitur penting tanpa perlu mencari menu yang lebih dalam.

Icon bar juga membantu meminimalkan penjelasan dengan teks, karena ikon-ikonnya sudah memberikan petunjuk visual tentang fungsi-fungsinya.

Cara Membuat Icon Bar dengan HTML, CSS dan Fontawesome

Untuk membuat icon bar dengan HTML dan CSS Anda perlu menyiapkan struktur HTML dasar. Pada contoh yang digunakan oleh w3school yang akan dijelaskan nanti menggunakan elemen <div> sebagai wadah utama untuk icon bar dan menggunakan elemen `<a>` untuk setiap ikon.

Setelah menyiapkan struktur HTML, langkah selanjutnya adalah menerapkan gaya menggunakan CSS. Anda dapat menggunakan CSS untuk mengubah tata letak, ukuran, warna, dan efek lainnya pada ikon bar.

Dan agar kode terlihat lebih sederhana pada contoh menggunakan Fontawesome. Icon library ini menghadirkan tampilan yang berbeda. Dalam contoh yang akan dijelaskan kita menggunakan versi 6.4.0. Berbeda dengan tutorial asal yaitu Fontawesome 4.7.0.

Cara Membuat Icon Bar Vertikal dan Horizontal pada Tempate Blogspot

Pada kesempatan kali ini kita akan membuat icon bar dengan HTML dan CSS. Icon bar yang akan dibuat mempunyai dua bentuk, yaitu: vertikal dan horizontal. Dan penerapannya ini dengan menggunakan platform blogspot.

Padahal pada situs asalnya ini tidak dijelaskan secara khusus bahwa tutorial tersebut bisa berfungsi jika digunakan pada template blogspot. Untuk itu saya mencoba untuk mengadaptasikannya ke dalam platform Blogger.

Namun agar hasilnya tidak jauh berbeda dalam hal ini saya menggunakan template dasar yang dibuat sendiri dari nol. Dengan demikian Anda bisa belajar membaca kode serta efek apa yang akan terlihat pada tampilan user interface situs blogspot.

1. Membuat Template Dasar Blogspot Sendiri dari Nol

Untuk membuat template dasar blogspot sendiri dari nol sudah dijelaskan pada pertemuan sebelumnya. Di sana saya jelaskan tentang cara menghapus template bawaan dan memulainya dari nol.

Namun agar lebih singkat, pada kesempatan ini kita tunjukan hasil akhirnya saja. Adapun bagi Anda yang ingin mengetahui lebih detail bisa baca kembali cara membuat template dasar dari nol.

Dan berikut ini template blogspot paling dasar yang dibuat sendiri dari nol. Template blogspot ini akan menjadi percobaan tutorial tentang icon bar.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='utf-8'/> <meta content='width=device-width, initial-scale=1' name='viewport'/> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='main' showaddelement='yes'/> </body> </html>

2. Menambahkan Fontawesome pada Template Blogspot

Setelah menyamakan persepsi penggunaan template blogspot. Langkah selanjutnya adalah memasang fontawesom pada template blogspot. Caranya yaitu dengan copy dan paste kode di bawah ini. Kemudian tempatkan diantara tag awal <head> dan tag akhir </head> pada template blogspot Anda.

<script crossorigin='anonymous' src='https://kit.fontawesome.com/ea1b4f5411.js'/>

3. Menambahkan Kode HTML Icon Bar

Langkah berikutnya yaitu menambahkan kode HTML icon bar pada template blogspot Anda. Kode di bawah ini tempatkan diantara tag awal <body> dan tag akhir </body>. Agar lebih terlihat rapi, kode ini sebaiknya tempatkan sebelum tag: <b:section class='main' id='main' showaddelement='yes'/>.

4. Menambahkan CSS untuk Icon Bar Vertical

Berikutnya adalah kode CSS yang akan mengubah style sesuai keinginan. Silahkan tempatkan kode di bawah ini di antara tag "<b:skin><![CDATA[" dan tag akhir "]]></b:skin>". Anda juga bisa bereksperimen lebih jauh dengan mengubah property sesuai yang diinginkan.

.icon-bar { width: 90px; /* Set a specific width */ background-color: #555; /* Dark-grey background */ } .icon-bar a { display: block; /* Make the links appear below each other instead of side-by-side */ text-align: center; /* Center-align text */ padding: 16px; /* Add some padding */ transition: all 0.3s ease; /* Add transition for hover effects */ color: white; /* White text color */ font-size: 36px; /* Increased font-size */ } .icon-bar a:hover { background-color: #000; /* Add a hover color */ } .active { background-color: #04AA6D; /* Add an active/current color */ }

Setelah itu klik "Simpan" agar terjadi perubahan pada template. Hasilnya nanti akan terlihat icon bar vertikal seperti yang terlihat pada tangkapan layar berikut:

5. Menambahkan CSS untuk Icon Bar Horizontal

Kode CSS kedua yaitu icon bar yang memanjang ke samping atau horizontal. Untuk menggunakannya silahkan paste kode ini untuk menggantikan kode CSS icon bar vertikal yang disebutkan pada nomor 4 di atas.

.icon-bar { width: 100%; /* Full-width */ background-color: #555; /* Dark-grey background */ overflow: auto; /* Overflow due to float */ } .icon-bar a { float: left; /* Float links side by side */ text-align: center; /* Center-align text */ width: 20%; /* Equal width (5 icons with 20% width each = 100%) */ padding: 12px 0; /* Some top and bottom padding */ transition: all 0.3s ease; /* Add transition for hover effects */ color: white; /* White text color */ font-size: 36px; /* Increased font size */ } .icon-bar a:hover { background-color: #000; /* Add a hover color */ } .active { background-color: #04AA6D; /* Add an active/current color */ }

Setelah klik "Simpan", halaman situs blogspot Anda akan terlihat seperti berikut:

Penutup

Dalam artikel ini kita telah membahas cara membuat "Icon Bar" dengan menggunakan HTML, CSS, dan Font Awesome sebagaimana telah dijelaskan di atas. Dengan mengikuti tutorial ini Anda dapat dengan mudah membuat sebuah icon bar yang bisa disesuaikan sesuai kebutuhan halaman web Anda.

Dimana kode HTML di atas mengatur struktur dasar dengan elemen `<div>` dan `<a>`, sementara CSS memungkinkan Anda mengubah tampilan dan tata letak dengan properti yang dibutuhkan.

Sementara dengan penggunaan Font Awesome, Anda memiliki akses ke berbagai macam ikon lainnya yang dapat memperkaya tampilan ikon bar Anda. Sehingga, Anda dapat menyesuaikan kode HTML dan CSS sesuai kebutuhan dan preferensi Anda sendiri.

Kesimpulannya, dengan kombinasi kode HTML, CSS, dan Font Awesome yang tepat, Anda dapat membuat sebuah icon bar yang elegan dan intuitif yang akan meningkatkan pengalaman pengguna pada situs web Anda meskipun gratisan.

Selamat mencoba.