Icon menu di blog merupakan pemanis untuk blog itu sendiri, menu yang memiliki icon dan warna yang menarik tentunya akan lebih disukai oleh pengunjung. Ingat kesan pertama itu penting !. Pengunjung blog yang baru pertama kali mendarat di blog anda dan sudah merasa nyaman dengan tampilannya yang sederhana namun menarik, menu navigasinya bagus dan mudah dipahami serta terakhir adalah konten yang sangat bermanfaat. Komponen-komponen tersebut sebaiknya anda pertimbangkan sekali dalam membangun blog anda. Ketika blog anda berhasil memberi kesan pertama yang baik bagi pengunjung, tentunya kemungkinan besar pengunjung akan kembali ke blog anda lagi.
Kali ini kopppet.com akan memberikan sedikit tips untuk teman-teman semua tentang cara mempercantik tampilan menu blog anda. Anda bisa sedikit memberikan sentuhan manis di menu anda dengan mengganti icon menu ataupun warna blog anda.
Gambar di atas adalah header dari template Zikazev Blue. Di sebelah kanan header terdapat icon social media path, twitter, facebook, dsb. Icon social tersebut tampak kurang menarik, anda dapat mengganti icon menu tersebut dengan bantuan library font awesome.
Font Awesome adalah library icon. Anda dapat mengganti icon-icon menu di blog anda dengan cepat tanpa harus membuatnya terlebih dahulu. Cukup memasang skrip icon menu yang anda inginkan di blog anda. Mudah bukan ?
Lantas bagaimana caranya ?
1. Masuk ke halaman edit html.
2. Anda harus memasang skrip link library font awesome terlebih dahulu.
Caranya copy skrip berikut ini :
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
Font Awesome adalah library icon. Anda dapat mengganti icon-icon menu di blog anda dengan cepat tanpa harus membuatnya terlebih dahulu. Cukup memasang skrip icon menu yang anda inginkan di blog anda. Mudah bukan ?
Lantas bagaimana caranya ?
1. Masuk ke halaman edit html.
2. Anda harus memasang skrip link library font awesome terlebih dahulu.
Caranya copy skrip berikut ini :
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
Pastekan skrip di atas di bawah tag <head>
Jika template anda sudah terdapat skrip tersebut lewati langkah kedua.
3. Kunjungi halaman web font awesome untuk melihat koleksi icon dari library font awesome. Font Awesome.
4. Ada banyak sekali koleksi icon.
4. Ada banyak sekali koleksi icon.
4. Pilih icon yang anda suka.
Di atas adalah icon camera retro yang saya pilih. Di bawah gambar icon camera retro terdapat kode fa-camera-retro. Kode tersebut adalah kode yang harus anda masukkan di blog anda untuk mengganti icon menu lama anda.
5. Ini adalah skrip icon menu pada template zikazev blue.
<li class='pinterest'><a href='/'><i class='icon-pinterest'/></a></li>
<li><a class='twitter' href='/'><i class='icon-twitter'/></a></li>
<li><a class='linkedin' href='/'><i class='icon-linkedin'/></a></li>
<li><a class='facebook' href='/'><i class='icon-facebook'/></a></li>
<li><a class='gplus' href='/'><i class='icon-google-plus'/></a></li>
6. Ganti kode yang tercetak tebal di atas dengan kode baru dari icon yang anda pilih tadi.
Hasil kode setelah diedit :
<li class='pinterest'><a href='/'><i class='fa-camera-retro'/></a></li>
<li><a class='twitter' href='/'><i class='fa-android'/></a></li>
<li><a class='linkedin' href='/'><i class='fa-linkedin'/></a></li>
<li><a class='facebook' href='/'><i class='fa-html5'/></a></li>
<li><a class='gplus' href='/'><i class='fa-facebook'/></a></li>
7. Untuk mengganti warna icon menu silahkan cari kode css icon menu. Ganti dengan warna yang anda suka.
8. Welldone.
Di atas adalah icon camera retro yang saya pilih. Di bawah gambar icon camera retro terdapat kode fa-camera-retro. Kode tersebut adalah kode yang harus anda masukkan di blog anda untuk mengganti icon menu lama anda.
5. Ini adalah skrip icon menu pada template zikazev blue.
<li class='pinterest'><a href='/'><i class='icon-pinterest'/></a></li>
<li><a class='twitter' href='/'><i class='icon-twitter'/></a></li>
<li><a class='linkedin' href='/'><i class='icon-linkedin'/></a></li>
<li><a class='facebook' href='/'><i class='icon-facebook'/></a></li>
<li><a class='gplus' href='/'><i class='icon-google-plus'/></a></li>
6. Ganti kode yang tercetak tebal di atas dengan kode baru dari icon yang anda pilih tadi.
Hasil kode setelah diedit :
<li class='pinterest'><a href='/'><i class='fa-camera-retro'/></a></li>
<li><a class='twitter' href='/'><i class='fa-android'/></a></li>
<li><a class='linkedin' href='/'><i class='fa-linkedin'/></a></li>
<li><a class='facebook' href='/'><i class='fa-html5'/></a></li>
<li><a class='gplus' href='/'><i class='fa-facebook'/></a></li>
7. Untuk mengganti warna icon menu silahkan cari kode css icon menu. Ganti dengan warna yang anda suka.
8. Welldone.
0 komentar