Menu bar sebuah blog atau sering juga disebut dengan navigasi blog ini biasanya terletak dibawah maupun diatas header dari sebuah blog. Mungkin Anda pernah berkunjung dan melihat template blog yang menggunakan icon/gambar kecil disamping menu bar maupun menu navigasi blog. Seperti contoh, menu home diganti menjadi icon rumah, menu contact disertai icon telepon dan masih banyak yang lainnya. Pernah melihat template blog yang dilengkapi icon pada menu bar ataupun menu navigasi blog seperti itu ?
Ya. Terkesan lebih menarik dan juga lebih profesional desain blog tersebut yang sudah memasang icon di halaman statis (Static page) seperti about, contact, disclaimer, privacy policy, sitemap maupun di menu navigasi (Menu bar) blog. Anda bisa melihat contohnya pada gambar diatas, jika kurang jelas, bisa langsung menuju link ini (http://bit.ly/2jhzPZ7). Ok, jika Anda tertarik untuk memasang icon font awesome di halaman statis (Static page) atau menu bar (Navigasi) blog dengan mudah, silahkan ikuti tutorial berikut.
Memasang Kode CSS Font Awesome Di Blog
- Masuk ke Dashboard Blog.
- Klik Tema.
- Pilih Edit HTML.
- Cari kode </head> (Tekan CTRL+F untuk memudahkan pencarian).
- Copy kode CSS Font Awesome berikut ini.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
- Dan paste diatas kode </head> tadi.
- Klik Simpan tema.
- Selesai.
Menambah Icon Font Awesome Di Menu Bar (Navigasi) Blog
- Pilih terlebih dahulu kumpulan icon dari font awesome (http://fontawesome.io/icons/) untuk dipasang pada menu bar blog Anda.
- Kembali ke Edit HTML blog.
- Cari kode judul menu bar yang akan Anda tambahkan icon. Sebagai contoh, saya akan menambah icon font awesome di judul menu Daftar Isi Tabulasi.
Sesuaikan dengan judul menu bar blog Anda - Jika sudah ketemu, copy kode html font awesome icon yang sudah Anda pilih tadi kemudian paste tepat sebelum judul Daftar Isi Tabulasi (Sesuaikan dengan judul menu bar blog Anda).Keterangan :
- Kode berwarna merah adalah judul menu bar.
- Kode berwarna biru adalah kode html icon font awesome.
- Kode berwarna kuning adalah alamat menu bar.
- Kesimpulannya, untuk menambahkan icon dari font awesome pada menu bar blog yang lainnya, Anda letakkan kode icon font awesome (Merah) sebelum judul menu bar blog (Biru) yang Anda inginkan.
- Klik Simpan tema.
- Selesai dan lihat hasilnya.
No comments :