Cara Menambahkan Icon di Menu Navigasi Blog

Kita tahu icon biasanya berbentuk kecil, biasanya untuk melambangkan suatu judul. Icon di sebuah blog biasanya digunakan untuk menambah kesan menarik pada tampilan blog. Untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara menambah icon di menu navigasi blog.

Kalian semua pasti tidak sabar mengetahui cara menambahkan icon di menu navigasi blog dari saya. Tetapi kita harus mengenali dulu script untuk memanggil icon di blog, disini kita menggunakan Font Awesome.

Font Awesome ini biasanya dipakai oleh para pembuat template untuk menambahkan icon yang menarik pada template mereka tentunya.

Langsung saja untuk cara menambahkan icon di menu navigasi blog, silahkan ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome)

Cara Menambahkan Icon di Menu Navigasi Blog

Cara Memasukan Icon di Script Menu Navigasi

Langkah pertama, buka akun Blogger kalian. Masuk ke menu Tema, kemudian pilih Edit HTML. Kemudian masukan code dibawah ini, dan letakan sebelum kode </head>.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

Setelah meletakan kode pemanggil ke Font Awesome. Kemudian cari menu yang ingin di tambahkan icon. Setelah kalian dapatkan menu yang akan di tambahkan icon, silahkan pilih icon yang akan kalian tambahkan di Font Awesome Icons.
Untuk memanggil icon yang kalian pilih, silahkan ketikan kode berikut.

<i class='fa fa-nama icon yang kalian pilih'/>

Letakan script di atas sebelum nama menu navigasinya. Lakukan seperti contoh di bawah ini.

<li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li>
<li><a href='#'><i class='fa fa-file'/> Modul</a></li>
<li><a href='#'><i class='fa fa-code'/> PHP dan Mysql</a></li>
<li><a href='#'><i class='fa fa-file-powerpoint-o'/> PowerPoint</a></li>
<li><a href='#'><i class='fa fa-file-text'/> Makalah</a></li>

Berikut adalah contoh menu navigasi saya. Selanjutnya silahkan masukan icon sesuka hati kalian.

Cara Mengatur Ukuran Icon

Untuk mengatur ukuran Icon kita bisa menambahkan code seperti ini.

<li><a class='active' href='/'><i class='fa fa-home fa-lg'/> Home</a></li>

Berikut adalah urutan ukuran Font Awesome.

Icon	Code
	`fa-lg`
	`fa-2x`
	`fa-3x`
	`fa-4x`
	`fa-5x`

(Baca juga : Cara Membuat Button Dengan Animasi Bounce Effect)

Demikian tutorial singkat dari saya, lebih dan kurang saya mohon maaf. Untuk tutorial blog lainnya selalu kunjungi tutorialumum.com.

Terimakasih sudah berkunjung di blog saya, jika ada pertanyaan, kritik, atau saran silahkan berkomentar di kolom komentar. Karena kritik dan saran dari kalian sangat membantu saya dalam membangun sebuah blog.

Postingan populer dari blog ini

Cara Membuat Tombol Share di Tengah Gambar Blog dengan Sumo

Setelah sebelumnya saya membagikan cara membuat share button melayang dengan Sumo me , kali ini saya akan membagikan artikel tentang cara membuat tombol share ditengah gambar blog . Apa bisa menampilkan tombol share di gambar blog ? B isa, tetapi tombol share ini di gunakan untuk membagikan gambar yang di tampilkan. Untuk tampilan tombol sharenya bisa di lihat di blog Tutorial Umum . (Baca juga : Cara Membuat Share Button Melayang Dengan Sumo Me ) Walaupun tombol share ini akan muncul saat gambar di sentuh kursor, tetapi tombol share di tengah gambar ini tidak mengurangi kecepatan blog, jadi anda tidak perlu khawatir. Sebelum memasang tombol share ini, sebaiknya daftar dulu akun Sumo. Untuk cara daftar Sumo dan cara membuat tombol share melayang , silahkan baca di sini . Bagi anda yang sudah mendaftar akun Sumo, silahkan ikuti langkah-langkah berikut ini untuk menampilkan tombol share di tengah gambar blog . Cara Memasang Tombol Share di Tengah Gambar Blog dengan Sumo Cara Memasang Tom...

Baca Lebih Lanjut »

Cara Membuat Widget Komentator Terbaik di Blogger

Dalam sebuah blog pasti ada yang namanya pengunjung , jika pengunjung tersebut sudah menyukai blog yang kita miliki, maka bukan tidak mungkin pengunjung blog tersebut sudah menjadi pengunjung tetap dari blog yang kita miliki. Pada tutorial kali ini saya akan membagikan cara membuay widget komentator terbaik di blogger . (Baca juga : Cara Membuat Widget Recent Comments Ringan di Blog ) Dan pengunjung tersebut pasti sering meninggalkan beberapa komentar untuk blog kita, disini saya akan memberikan cara membuat widget komentator terbaik di blog. Widget komentator terbaik ini gunanya agar pengunjung yang sering memberikan komentar, bisa terlihat di widget blog kita tentunya. Untuk cara membuat widget komentator terbaik ini, ikuti langkah-langkah dari saya. (Baca juga : Cara Membuat Widget Breaking News 2 Style di Blogger ) Cara Memasang Widget Komentator Terbaik di Blogger Masuk ke akun Blogger kalian Pilih menu Tata Letak , pilih Tambahkan Gadget di lokasi yang di inginkan, ke...

Baca Lebih Lanjut »

Cara Membuat Widget Recent Post Multi Color Keren di Blogger

Recent posts adalah widget untuk menampilkan artikel-artikel terbaru, widget ini adalah solusi terbaik agar pemirsa blog kita dapat melihat postingan terakhir yang kita buat. Pada tutorial kali ini saya akan memberikan cara membuat widget recent post multi color keren di blogger . Di artikel kali ini saya akan membuat recent post yang dapat membuat tampilan blog kalian lebih menarik serta mempermudah bagi viewer blog kalian membaca artikel-artikel terbaru dari blog kalian. (Baca juga : Cara Membuat Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar ) Recent post ini adalah widget yang paling sering dipakai oleh para blogger, karena widget ini dapat meningkatkan view pada suatu blog. Yang membuat recent post ini berbeda dari recent post yang lain adalah gambar thumbnail yang bulat serta setingan yang mudah. Kenapa dikatakan mudah, karena kalian hanya cukup mengaturnya tanpa menambahkan link blog kalian. Jadi widget recent post ini bisa di gunakan secara otomatis. Ti...

Baca Lebih Lanjut »

Inovasi Teknologi dan Seni Menuju Riau Berbudaya

Inovasi Teknologi dan Seni Menuju Riau Berbudaya - Riau adalah salah satu provinsi yang sedang giat dalam pembangunan jangka menengah, diantara salah satu misinya adalah meningkatkan pelayanan pendidikan. Peningkatan pelayanan pendidikan dilakukan karena peran para generasi muda dalam meningkatkan pembangunan sangatlah di butuhkan baik dari segi Inovasi Teknologi ataupun Seni, agar masyarakat Riau menjadi masyarakat yang berbudaya. Dimanakah peran generasi muda Riau dalam inovasi di bidang teknologi informasi? Peran Generasi Muda Riau Dalam Inovasi di Bidang Teknologi Informasi Program Riau Go.IT , adalah salah satu inovasi terbaru pemerintah dalam bidang teknologi informasi, sehingga memudahkan Pemerintah Provinsi Riau dalam meningkatkan pelayanan masyarakat, dan juga penyebarluasan informasi yang ada di Provinsi Riau. Sumber : http://humas.riau.go.id Program Riau Go.IT , adalah program Pemerintah Provinsi Riau pada saat ini, sehingga kemungkinan besar jika program ini sudah ter...

Baca Lebih Lanjut »

Cara Menambah dan Menghapus Admin atau Pengurus di Facebook Fanpage

Pada tutorial kali ini saya akan memberikan cara menambah dan menghapus admin atau pengurus di facebook fanpage . Seperti kita ketahui facebook fanpage di gunakan sebagai tempat berkumpulnya sebuah kelompok yang menyukai suatu hobi ataupun tokoh masyarakat. (Baca juga : Cara Mudah Menambahkan Simple Fanpage Facebook di Widget Blogger ) Didalam dunia blog, kita sering menggunakan fanpage facebook agar kita lebih dekat dengan pengunjung blog, dan juga agar lebih mudah mendapatkan visitor dari fanpage yang kita miliki. Facebook fanpage biasanya di urus oleh beberapa admin jika fanpage tersebut berasal dari sebuah perusahaan atau kelompok tertentu. Untuk cara menambah dan menghapus admin ataupun pengurus di facebook fanpage , ikuti langkah-langkah dari saya berikut ini. (Baca juga : Cara Membuat Tombol Share Bergaya Flat di Blogger ) Cara Menambah dan Menghapus Admin atau Pengurus di Facebook Fanpage Cara Menambah Admin atau Pengurus di Facebook Fanpage Langkah pertama login ter...

Baca Lebih Lanjut »

Cara Memasang Komentar Disqus di Blogger dengan Mudah

Komentar Disqus adalah sistem komentar paling di gemari oleh para blogger, karena banyak memiliki fitur-fitur yang lebih baik daripada sistem komentar yang lainnya. Karena komentar disqus mudah di gunakan, apalagi sistem komentar disqus yang mobile friendly , yaitu fitur yang bisa di gunakan di berbagai device . Untuk itu pada tutorial kali ini, saya akan memberikan cara memasang komentar Disqus di blogger dengan mudah. Akan tetapi agan tidak perlu takut kalau komentar yang berada di blogger akan hilang apabila agan memasang komentar disqus ini, karena fitur dari sistem komentar disqus yang dapat mengimport komentar yang sudah ada di blog agan. Untuk cara memasang komentar disqus di blogger dengan mudah , ikuti langkah-langkah dari saya berikut ini. Cara Memasang Komentar Disqus di Blogger Langkah pertama masuk ke dalam akun Blogger agan Kemudian masuk ke halaman Disqus , langsung pilih GET STARTED Silahkan masukan Nama , Email , dan Password yang agan inginkan di form tersebut Selanj...

Baca Lebih Lanjut »

Cara Membuat Widget Popular Post Berdasarkan Label di Blogger

Sebelumnya saya telah membagikan artikel tentang cara membuat widget popular post dengan rating bintang , pada tutorial kali ini saya akan memberikan cara tentang membuat popular post juga, tetapi yang berbeda adalah widget popular post ini di sortir berdasarkan label atau biasa kita sebut sebagai kategori dari artikel. Jadi yang kita lihat adalah label yang sama dalam 1 widget. (Baca juga : Cara Membuat Widget Popular Post Dengan Rating Bintang ) Lebih jelasnya widget popular post ini akan menampilkan artikel terpopuler dari label yang di pilih. Tidak hanya itu di bawah widget popular post per label ini juga di tambahkan link agar pengunjung bisa melihat semua artikel yang ada di label atau kategori tersebut. Langsung saja untuk cara memasang widget popular post berdasarkan label di blogger , silahkan ikuti langkah-langkah dari saya berikut ini. (Baca juga : Cara Membuat Widget Recent Post Multi Color Keren di Blogger ) Cara Memasang Widget Popular Post Berdasarkan Label di...

Baca Lebih Lanjut »

Cara Membuat Share Button Melayang Dengan Sumo Me

Share button atau tombol share sangatlah penting dalam sebuah blog, tombol share ini berfungsi untuk membagikan artikel kita di sebuah situs jejaring sosial . Biasanya setelah setelah mengklik tombol share, maka tampilan situs jejaring sosial tersebut langsung akan muncul. Tombol share ini juga berguna untuk meningkatkan view, karena blog kita sudah ada di situs jejaring sosial yang kita miliki. Tombol share ada banyak jenisnya, dari yang bawaan template yang kita pakai, ataupun yang bisa kita pasang secara manual. (Baca juga : Cara Membuat Tombol Share Bergaya Flat di Blogger ) Tetapi kali ini saya tidak akan menjelaskan tentang tombol share bawaan template, tetapi tentang tombol share yang bisa di pasang secara manual. Disini saya akan memakai tombol share dari Sumo Me. Sumo Me adalah tombol share yang sangat populer, karena banyak blog-blog yang sudah terkenal memakai tombol share ini. Untuk contoh tampilannya, kalian bisa lihat di samping kiri pada blog Tutorial Umum. Terlihat ...

Baca Lebih Lanjut »

Cara Mudah Install XAMPP 1.7.3 di Komputer

Setelah sebelumnya ane memberikan tutorial tentang cara mudah uninstall XAMPP di komputer , kali ini ane akan memberikan tutorial tentang cara mudah install XAMPP 1.7.3 di komputer . (Baca juga : Cara Mudah Uninstall XAMPP di Komputer ) Pengertian XAMPP XAMPP merupakan beberapa penggabungan beberapa program, yang berfungsi sebagai web server yang bisa berdiri sendiri. XAMPP terdiri atas beberapa program yaitu, Apache HTTP Server , MySQL database, dan bahasa pemrograman PHP dan Perl . XAMPP sebenarnya adalah singkatan dari beberapa kata yaitu. X = Maksud dari huruf X adalah software ini dapat di jalankan di berbagai sistem operasi. A = Apache, apache adalah web server yang di gunakan untuk menjalankan sebuah halaman dengan kode PHP. M = MySql, MySql adalah database server yang di gunakan untuk menyimpan data-data yang di buat dengan bahasa Sql. P = PHP adalah bahasa pemrograman untuk menampilkan halaman web, dan membuat halaman web. P = Perl adalah bahasa pemograman yang ...

Baca Lebih Lanjut »