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 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 Membuat Widget Komentar Postingan Terbanyak Responsive di Blogger

Kebanyakan blogger mengukur kesuksesan suatu artikel lewat komentar dari para pengunjungnya. Jika pengunjung menyukai artikel yang kita miliki, atau pengunjung ingin bertanya dan berinteraksi langsung dengan pemilik blog atau admin maka mereka akan menginputkan komentar mereka di kolom komentar. Untuk itu di artikel saya kali ini, saya akan memberikan cara membuat widget komentar postingan terbanyak yaitu sebuah widget untuk menampilkan beberapa artikel dengan komentar terbanyak. (Baca juga : Cara Membuat Widget Komentar Terbaru dengan Avatar ) Widget komentar terbanyak ini akan menampilkan beberapa angka komentar tertinggi di blog kalian, dengan model yang responsive. Sehingga akan membuat para pengunjung blog kita tidak bosan dengan tampilan blog kita. Berikut langkah-langkah cara membuat widget komentar postingan terbanyak responsive di blogger. (Baca juga : Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger ) Cara Membuat Widget Komentar Postingan T...

Baca Lebih Lanjut »

2 Cara Membuat Sticky Widget Sidebar dengan CSS dan jQuery

Sticky widget adalah widget yang bisa di bilang melayang atau mengambang apabila kita menscroll layar browser. Sticky widget ini biasanya menggunakan jQuery tetapi kali ini saya tidak hanya membuat tutorial cara membuat yang jQuerynya saja tetapi ada juga yang menggunakan CSS , untuk itulah saya akan memberikan 2 cara membuat sticky widget sidebar dengan CSS dan jQuery . Sticky widget ini awalnya hanya support untuk template responsive saja, namun seiring berkembangnya kemajuan blog, kini hadir template AMP yang di sebut-sebut memiliki kecepatan yang tinggi di versi mobile. Untuk itulah sangat di butuhkan sticky widget sidebar dengan CSS, karena template AMP ini sangat anti jika di tempelkan script jQuery. (Baca juga : Cara Membuat Widget Recent Post Muncul Saat di Scroll ) 2 Cara Memasang Sticky Widget Sidebar dengan CSS dan jQuery di Blog Untuk cara yang pertama kita akan memasang sticky widget sidebar dengan jQuery terlebih dahulu. Untuk itu ikuti langkah-langkah dari saya ...

Baca Lebih Lanjut »

Cara Membuat Slideshow di Blogger Keren

Slideshow biasanya di gunakan untuk menampilkan beberapa gambar dan keterangan sebuah informasi. Sebuah slideshow di blog biasanya akan menampilkan beberapa artikel dan gambar dari artikel tersebut. Pada tutorial kali ini, ane akan memberikan cara membuat slideshow di blogger dan pastinya keren . Baca juga : Cara Membuat Judul Blog dengan Gambar Teks Keren Untuk contoh tampilan slideshow nya seperti ini, tapi maaf kalau gambar gif kurang lancar. Slideshow ini bisa kita atur secara manual dan otomatis, jika agan ingin secara manual, agan harus memasukan beberapa link supaya postingan dan tampilan gambar bisa muncul secara maksimal. Namun jika agan ingin menampilkan slideshow ini secara otomatis agan hanya harus memasukan script code saja. Bagi yang ingin memasang slideshow ini secara manual, untuk cara pertamanya ane bakalan kasih yang cara manual dulu, kemudian baru cara otomatisnya. Untuk cara pasang slideshow keren di blogger ikuti langkah-langkah dari ane. Baca juga : C...

Baca Lebih Lanjut »

Cara Mudah Membuat Widget Artikel Pilihan Di Blog

Widget adalah suatu komponen yang penting dalam sebuah blog. Widget di blog ada berbagai macam jenisnya, dari mulai bawaan blog ataupun kita sendiri yang membuatnya. Pada kesempatan kali ini, saya akan memberikan cara mudah membuat widget artikel pilihan . Widget artikel pilihan ini di gunakan untuk menampilkan list atau menu postingan di widget secara acak. Widget artikel pilihan ini adalah widget yang di rekomendasikan, bagi anda yang ingin mendaftar menjadi pusblisher Google AdSense . (Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense ) Tampilan widget artikel pilihan ini cukup simple, yaitu hanya berupa teks saja. Bagi anda yang ingin menampilkan widget ini dengan tampilan gambar thumbnail silahkan gunakan widget ini . (Baca juga : Cara Membuat Widget Random Posts dengan Thumbnails di Blogger ) Jika anda penasaran bagaimana bentuk atau tampilan dari widget artikel pilihan ini, di bawah ini saya tampilkan bentuk tampilan dari widget artikel pilihan tersebut. Langsun...

Baca Lebih Lanjut »

4 Langkah Untuk Periklanan Gratis

Selalu ada beban keuangan yang signifikan terkait dengan mengiklankan produk, layanan, atau upaya seperti situs web. Omong-omong, saya selalu menjadi penggemar tren iklan gratis. Saya telah sukses dengan dua metode berbeda untuk memperoleh publisitas gratis yang ingin saya bagikan kepada Anda. Salah satu opsi adalah menempatkan iklan di situs web populer dan gratis. Saya telah menulis tentang beberapa situs teratas yang akan beriklan secara gratis. Mulailah dengan mengunjungi internetmarketinglearningcenter.com/classified-ads.html untuk menemukan platform periklanan gratis yang Anda inginkan. Cara kedua agar saya dapat memasang iklan tanpa mengeluarkan uang adalah dengan berinvestasi dalam Kursus Iklan Baris Gratis. Ini adalah kursus yang sangat singkat, dan saya harus membayar Clickbank $19,95 untuk mengakses alat promosi ini. Pergi ke tautan unduhan perangkat lunak gratis yang akan Anda gunakan untuk memposting dan memantau iklan Anda adalah sorotan dari Kursus Iklan Baris Gratis. Ku...

Baca Lebih Lanjut »

3 Tips Jitu Menentukan Template yang Cocok untuk Blog Kita

Kita tahu Template adalah hal yang sangat identik dengan blog, namun apabila template kita kurang menarik. Bisa jadi para pengunjung blog kita hanya melihat sekejap mata saja, atau hanya 1 halaman saja yang mereka lihat dikarenakan tampilan yang kurang menarik. Untuk itulah saya akan membahas tentang 3 tips jitu menentukan template yang cocok untuk blog kita . Memang sebetulnya tampilan bukanlah hal utama dalam sebuah blog, tetapi konten yang bermutu dan berbobotlah yang membuat blog kita memiliki banyak pengunjung. Namun apabila mereka hanya datang tak di undang dan pulang tak di antar seperti jelangkung, atau datang hanya membuka 1 halaman dan pergi tanpa meninggalkan komentar. Bagi kalian yang ingin mengetahu tips jitu menentukan template yang cocok untuk blog kita, baca terus artikel ini. (Baca juga : Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit ) Cara Menentukan Template yang Cocok untuk Blog Kita 1. Berdasarkan Topik atau niche blog Niche Umum B...

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 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 »