Cara Mudah Memasangkan Icon Symbol Font Asewome Blog





Selamat malam,pada kesempatan kali ini akan membagikan tutorial singkat tentang, Bagaimana caranya menambahkan Icon symbol dari font asewome pada navigasi atau bagian footer paling bawah blog .Mungkin saja anda pernah mendengar dengan istilah awesome ? Yaitu istilah dalam penggunaan font yang mendukung icon kecil pada sebuah website blog.Jika anda penasaran ,inilah contoh icon dari font awesome.




-----
Pada kesempatan kali ini,saya akan membahas tutorial blogging yaitu

Cara memasangkan icon Pada menu  blog atau lebih sering di baca dengan:Cara memasang icon font awesmoe pada blog.
yang merupakan dari font awesome .baiklah inilah langkah-langkahnya:

  • -Langkah pertama yaitu silahkan kunjungi situs Icon awesomenya Font awesome https://fontawesome.com/v4.7.0/icons/
  • -Jika sudah,Copy paste kode HTML berikut dan pastekan tepat di bawah tag </head> dengan cara,silahkan buka Blogger,pilih theme dan edit template.Di tengah kode template tekan ctrl f,dan masukan tag </head > dan tekan enter.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
  • -Langkah selanjutnya adalah cara pemasangan kode html iconnya," Jika hendak menggunakan icon awesome,harus menggunakan Tag pertama ,atau bisa saja langsung copy paste kode html di bawah ini"
<i class='fa fa-nama icon yang kalian pilih'/>

Keterangan !
Copy kode di atas,ganti fa fa-nama dengan nama fa fa yang ada pada situs font awesome tersebut,
jika hendak memasang,lengkapi semuanya
  • -Contoh pemasangan nya seperti berikut ini pada bagian navigasi blog,

Contoh Kode navigasi blog sebelum di tambahkan kode icon.
<a href='#' title='About'>About</a>
<a href='#' title='Contact'>Contact</a>
<a href='#' title='Disclaimer'>Disclaimer</a>
<a href='#' title='Privacy Policy'>Privacy Policy</a>
<a href='#' title='Sitemap'>Sitemap</a>

Namun inilah hasil untuk yang sudah di tambahkan kode fa fa font awesome !
<a href='https://inajesense.blogspot.com/p/about.html' title='About'><i class='fa fa-address-card'/>About</a>
<a href='https://inajesense.blogspot.com/p/contact.html' title='Contact'><i class='fa fa-address-book'/>Contact</a>
<a href='https://inajesense.blogspot.com/p/disclaimer.html' title='Disclaimer'><i class='fa fa-bookmark'/>Disclaimer</a>
<a href='https://inajesense.blogspot.com/p/privacy-policy.html' title='Privacy Policy'><i class='fa fa-exclamation-triangle'/>Privacy Policy</a>
<a href='https://inajesense.blogspot.com/p/tocwidth99margin5px-autoborder1px-solid_5.html' title='Sitemap'><i class='fa fa-file-code-o'/>Sitemap</a>

Untuk di ketahui tulisan yang berwarna biru ,di ganti cuma pada fa fa nama iconnya saja setelah itu klik save ,bisa saja untuk bagian sitemap,navigasi blog dan yang lainnya.Deangan memasangkan icon pada setiap lampiran tajuk blog,Blog akan terlihat lebih tampil menarik dan bagus.Ini dikarenakan perpaduan antara icon yang unik dan lucu membuat blog tampil lebih berkelas.

Manfaat untuk memasang icon font awesome

pada blog memiliki sisi positif misalnya dapat merubah tampilan blog supaya terlihat lebih profesional ,dan juga tampil beda dari sekian banyaknya blog yang ada di internet.

Tampil beda dalam blog menurut saya perlu,Agar tidak terjadi suatu kesalah pahaman antara, blog anda dengan blog orang lain,Hal ini agar tidak dituduh meniru gaya blog orang lain.

Sisi buruknya memasang icon font awesome,

Ialah susahnya untuk melakukan pemasangan bagi para pemula blogger,contoh nya seperti saya,yang sempat kebingungan untuk melettakan Kode html nya yang tepat,apalagi di bagian edit Html dengan ribuan kode html

.Cara satunya-satunya hanya dengan menggunakan perintah find dengan cara menekan Ctrl f pada pc komputer anda,tepat di tengah halaman edit html,Kemudian mengetikan Tag yang akan di edit atau di tambahkan kode.
Bukan hanya itu,Mungkin juga bisa menyebabkan template loading nya lambat.
Kesimpulan:
Artikel ini saya tulis bukan mengarang,namun ada ilmu dasar yang saya dapatkan dan mencoba publikasikan lagi pada blog ini,jadi apabila disaat melakukan pemasangan seperti tutorial di atas terjadi suatu kesalahan,silahkan cek dengan teliti,dan coba kembali sampai anda benar melakukannya dengan baik.mungkin hanya inilah yang dapat saya tuliskan di artikel blog Bloginjase yang singkat ini.



Artikel Terkait

Postingan populer dari blog ini

Begini Cara Memasang iklan penelusuran bersponsor google adsense Di Blog

Membuat Related Post Grid Untuk Template AMP Blogger

Cara Mengatasi Gagal Install Driver VGA Pada windows 7 All version

Cara membuat Link Model no follow dan Do follow

Cara Membuat Akun Google Adsense Hosted Terbaru

Tutorial Full Flash Smartphone OPPO A37 ,Lupa Pola

Cara Menampilkan Traffic Data Koneksi Internet Pada Laptop

Kumpulan Kode Html Javascript Untuk Edit Tampilan Blog

Cara memasang artikel "Baca juga" ditengah postingan blog

Cara Mengatasi Tombol Edit Yang Hilang Pada Tata Letak Blog