Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome

Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome
Propellerads

Sebuah rumah akan menarik perhatian orang lain apabila tampilannya modern minimalis. Begitu juga dengan blog, blog yang tampil dengan minimalis modern akan membuat para pembaca berkunjung kembali karena tampilannya yang bagus, unik, menarik dan lengkap. Membuat tampilan blog menarik teragantung kepada si admin blog, kemampuan coding dan kreatifitas modifikasinya bisa membuat tampilan blog yang menarik dan cantik.

Salah satu cara mempercantik tampilan blog adalah menambahkan icon icon yang relefan pada menu-menu.  Kalau memanfaatkan menu-menu bawaan template terkadang memang sudah ada icon nya, tapi tidak semua menu bawaan itu sesuai dengan blog kita, maka tidak menutup kemungkinan kita akan gonta ganti menu, maka juga ganti iconnya. Saya mencoba gonta ganti menu dan menambahkan icon pada blog Tutorial Salim (lihat paling atas, About, contact, Privacy, Disclaimer, Sitemap). 

Salah satu penyedia icon yang bisa digunakan secara persmua adalah Font Awesome. Font Awesome yang dibuat oleh Dave Gandy telah mengeluarkan versi terbaru yaitu 4.70 (2016).
Font Awesome

Font Awesome sudah tidak asing lagi bagi para website developer. (Web developer adalah seseorang yang menciptakan aplikasi berbasis web dengan menggunakan bahasa pemrograman). Bagi seorang blogger tentu Font Awesome ini juga menjadi bahan untuk modifikasi template blog mereka. Maka wajar saja seorang blogger mempercantik blognya.

Font Awesome kesempatan ini kusus membahas The Icons. Yang selanjutnya bagaimana cara memasang icon dari font awesome ini pada blog anda.
Sebelum membahas bagaimna cara memasang icon pada blog anda, icon dimaksud adalah icon pada menu-menu blog anda  yang dimabil dari Font Awesome anda harus memiliki pengetahuan dasar coding dengan bahasa HTML. 

Kita lanjut, saya anggap anda sudah memiliki ilmu dasar HTML. Untuk memulai pengeditan lakukan langkah berikut :

1. Login ke Blog anda

2. Menuju ke menu Template

3. Sentuh EDIT HTML

4. Silahkan cari code menu-menu pada bloga anda.
Kode menu pada blog tutorial salim sebelum ditambahkan icon 

<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
 <li><a href='https://tutorialsalim.blogspot.co.id/p/about.html' itemprop='url' title='About'> <span itemprop='name'>About</span></a></li>
<li><a href='https://tutorialsalim.blogspot.co.id/p/contact.html' itemprop='url' title='Contact'>  <span itemprop='name'>Contact</span></a></li>
    </ul>  
Pada contoh ini saya contohkan 2 saja, about dan contact

5. Silahkan selipkan kode icon pada scrip menu, sehingga melihat tampilan dibawah yang dimerahkan

<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
 <ul>
   <li><a href='https://tutorialsalim.blogspot.co.id/p/about.html' itemprop='url' title='About'><i class='fa fa-user'/> <span itemprop='name'>About</span></a></li>
   <li><a href='https://tutorialsalim.blogspot.co.id/p/contact.html' itemprop='url' title='Contact'><i class='fa fa-envelope'/> <span itemprop='name'>Contact</span></a></li>
   <li><a href='https://tutorialsalim.blogspot.co.id/p/privacy-policy.html' itemprop='url' title='Privacy'><i class='fa fa-info-circle'/> <span itemprop='name'>Privacy</span></a></li>
    <li><a href='https://tutorialsalim.blogspot.co.id/p/disclaimer.html' itemprop='url' title='Disclaimer'><i class='fa fa-info-circle'/> <span itemprop='name'>Disclaimer</span></a></li>
   <li><a href='https://tutorialsalim.blogspot.co.id/p/sitemap.html' itemprop='url' title='Sitemap'><i class='fa fa-bars'/> <span itemprop='name'>Sitemap</span></a></li>
    </ul> 
 
6.  Bagaimana cara mendapat kode icon yang dimerah kan itu ?
Cara nya silahkan anda kunjungi http://fontawesome.io/icons/ 

Icon
Kemudian silahkan pilih icon yang akan anda gunakan. 

Misalkan anda pilih download, maka anda klik icon download nanti anda kan dibawa pada laman baru. Dilaman baru itu anda akan dihadapkan dengan cripnya . untuk scrip download contohnya berikut : 

<i class="fa fa-cloud-download" aria-hidden="true"></i>

Selanjutnya crip itulah yang anda tambahkan pada scrip menu blog anda sehingga seperti pada langkah 5.

Demikianlah cara Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome, semoga menambah wawasan kita dan membuat blog yang menarik dengan tamhana icon pendukung pada menu blog anda.

Propellerads
Admin
Tutorial Salim adalah sebuah blog berkembang tentang tutorial, teknologi dan solusi yang dikelola oleh seorang abdul salim. Silahkan berikan komentar, kritik dan saran untuk kemajuan blog Tutorial Salim.

Sign out
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Tool Hide Parse Tool

How to get ID DISQUS - http://disq.us/p/[ID DISQUS]

strong em u strike
pre code pre code spoiler
embed

0 Comment

Add Comment

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih. Show Parse Tool Hide Parse Tool


Propellerads