Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome - Hallo temen-temen Youtuber!!! Tutorial Adsense Youtube, Kali ini saya akan menulis tutorial Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome, Semoga dapat memberikan manfaat bagi youtuber semua. Baca postingan Artikel Blog, sampai selesai agar tidak ada langkah yang terlewat, jangan malas membaca dan selamat menikmati.

Judul : Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome
link : Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome

Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome

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

Cara mengganti domain blogspot dot com menjadi dot com

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>  

Cara Membuat Live Support Online 24 Jam Gratis Untuk Blog Anda

6.  Bagaimana cara mendapat kode icon yang dimerah kan itu ?

Cara nya silahkan anda kunjungi http://fontawesome.io/icons/ 

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.

Jadi sepertiitulah kira-kira tutorial Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome

saya rasa cukup tutorial Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome kali ini, semoga dapat membuat youtuber indonesia semakin maju dan jangan lupa baca tutorial youtube lainnya.

Anda sekarang membaca artikel Mempercantik Tampilan Blog Anda Menggunakan Icon dari Font Awesome dengan alamat link https://2007ahmad.blogspot.com/2016/10/mempercantik-tampilan-blog-anda.html