Terbaru: Optimasi URL Blog | 10 Tips Mempercepat Blog Load | 30 Strategi SEO | 15 Rahasia Menulis Konten

Ad 468 X 60

Wednesday, February 19, 2014

Cara Memasang Font Ikon yang Menakjubkan di Template Blogger Anda

menggunakan-font-awesome-di-blogger
Apakah Anda ingin bermain-main dengan template Blogger Anda dan menyesuaikan desain? Atau apakah Anda merancang template yang profesional untuk meraup penghasilan? Bagaimana Anda berurusan dengan ikon template, seperti tombol, kontrol form, sinyal navigasi, dll? Kebanyakan orang menggunakan gambar untuk untuk ikon tersebut yang cenderung memburuk bila ukurannya diperbesar. Beberapa pengembangan akan menurunkan kualitas gambar untuk menghindari masalah ini, tapi tanpa disadari telah diperkenalkan yang baru dan ini dapat mempercepat waktu buka halaman karena ukuran filenya meningkat. Solusinya terletak pada font berbasis ikon seperti Font Awesome yang dapat membantu desainer mengoptimalkan ikon pada situs Anda.

Apa itu Font Awesome?
Font Awesome adalah font ikon yang awalnya dirancang untuk Bootstrap. Ini adalah kumpulan dari beberapa SVG (Scalable Vector Graphic) ikon yang dapat disesuaikan dan digunakan pada halaman Web manapun. Ini adalah ikon dengan compact-size yang ukurannya tidak berat yang berarti mereka mempertahankan integritas ketika ukurannya diperbesar.

Sebagai seorang desainer, ini adalah kit yang berguna untuk dimiliki kerena akan membiarkan Anda membuat desain profesional dan dioptimalkan untuk halaman web Anda.

Font Awesome menawarkan beberapa fitur yang sangat luar biasa yang membuatnya sempurna, yuk kita simak!
  • Font Awesome berisi keloksi 369 ikon SVG dari beragam kategori termasuk kontrol navigasi, ikon mata uang, aplikasi web, ikon merek, dan sebagainya.
  • Font Awesome sangat ringan dan membuat loading blog terasa cepat dibandingkan dengan gambar CSS. Mereka juga terukur dan dapat diubah menjadi berbagai ukuran tanpa mempengaruhi kualitas.
  • Bagian terbaik adalah font ini mudah disesuaikan! Anda dapat menerapkan gaya CSS untuk memodifikasinya sesuai kebutuhan Anda. Anda dapat mengubah ukuran, warna, bayangan, dan segala sesuatu yang biasanya dapat dilakukan dengan CSS.
  • Yang terakhir adalah ikon font ini GRATISSS..!!!

Menambahkan ikon Font Awesome di Blogger
Ikuti langkah-langkah berikut ini untuk menambahkan ikon Font Awesome di mana saja di blogger Anda (atau halaman web HTML).

Hubungi External Stylesheet
Buka kode sumber halaman web Anda dan cari bagian <head>. Jika Anda ingin menambahkan ikon ini ke dalam template Anda maka perlu membuka Dashboard Blogger Anda kemudian masuk ke Edit HTML. Setelah Anda menemukan bagian header, copy paste baris berikut ini di bawah kode <head>.

link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Pastikan Anda menyalin link itu (termasuk bagian http://). Di sinilah file Font Awesome CSS disimpan. Anda dapat mendownload ke server Anda sendiri jika Anda memiliki kecepatan yang besar.

Menambahkan Ikon
Anda dapat melihat daftar ikon yang tersedia di situs Font Awesome ini. Pilih ikon Anda sukai dan catat nama CSS Class-nya (misal: fa-home atau fa-arrow-down). Sekarang untuk menggunakan ikon ini, gunakanlah tag <i> seperti ditunjukkan di bawah ini.

<i class="fa fa-home"></i>

Anda dapat mengganti teks yang disorot dengan nama kelas dari setiap ikon yang Anda suka. Misalnya, <i class="fa fa-arrow-down"></ i>. Karena ini adalah tag inline, Anda dapat menggunakannya di dalam tag paragraf, daftar tag, bahkan anchor (<a>) tag, dan sebagainya.

Mengedit Ikon
Anda dapat menerapkan beberapa CSS style untuk sebuah ikon. Hanya mengambil kelasnya dan menulis CSS style yang baru seperti yang ditunjukkan di bawah ini.

.fa-home {
 font-size: 32px;
 color: #033;
 padding: 8px;
 border: 1px solid #000;
 float:left;
}

Sangat sederhana kan?? :)

Nah, sekarang Anda dapat menciptakan template Anda sendiri dengan ikon-ikon yang menakjupkan. Bahkan Anda akan mendecak kagum dengan karya Anda sendiri. Silahkan Anda praktikkan di depan Dashboard Blogger Anda masing-masing. Pada postingan selanjutnya kami akan membahas cara melakukan kostumisasi pada Font Awesome ini.

Author: Balaputra
Balaputra adalah seorang mahasiswa yang melakukan aktivitas blogging hanya untuk menghabiskan waktu luang.

11 comments:

  1. keren nih gan..layak di coba

    ReplyDelete
  2. Hanya Share Artikel di FB, tiap ada yang Klik dibayar Rp250 (Bonus Daftar Rp. 1500)
    Daftar Di http://goo.gl/r3Y65b
    Bukti Pembayaran/WD/PO Dari Member/Anggota
    http://i.imgur.com/G2FHF69.jpg
    Untuk Panduan Daftar Dan Penggunaan
    http://goo.gl/14h9QB
    Bukti WD/Pembayaran PTC Probux Bulan Maret 2014
    http://prntscr.com/34hml3
    Yang Berminat Bisa Daftar Dan Join Di
    http://goo.gl/I1i0RI
    Bukti WD/Pembayaran PTC Wad Ojooo
    http://i.imgur.com/joiV3hs.png
    Yang Berminat Bisa Daftar Dan Join Di
    http://goo.gl/9wufTl
    Bukti Pembayaran Fusebux
    http://oi57.tinypic.com/2uyoe3c.jpg
    Yang Berminat Bisa Daftar Dan Join Di
    http://goo.gl/0ZTawY
    Program Affiliasi Membayar Paling Tinggi Di Indonesia (Rp. 10.000/referal)
    Ini Bukti Komisi Pembayaran Untuk Member
    http://i.imgur.com/yx49XJx.jpg
    Buruan Daftar Di http://goo.gl/wqwVSj
    Linkbucks (Penyingkat URL)
    Daftar Di http://goo.gl/s0cUgG
    id.ipanelonline (Survey Online)
    Daftar Di http://goo.gl/boUiaf
    id.viewfruit (Survey Online)
    Daftar Di http://goo.gl/K44GIa
    Bukti WD/Pembayaran/Payout
    http://i.imgur.com/t14wjrD.jpg

    ReplyDelete
  3. thanks gan untuk tutorialnya
    izin copas gan. Mantap

    ReplyDelete
  4. hasil font nya kayak apa ya ?! saya jadi penasaran

    ReplyDelete
  5. coba saya praktek dulu di blog obat penumbuh rambut botak saya gan, makasih infonya

    ReplyDelete
  6. Terima kasih infonya sangat bermanfaat, akan saya coba langsung di blog saya perawatan wajah

    ReplyDelete
  7. artikel nya sangat lengkap dan jelas. mampir juga diblog saya gan. www.x-shops69.com

    ReplyDelete
  8. ini dia yang saya cari, nanti saya coba

    ReplyDelete

Terimakasih telah berkenan mengunjungi dan meninggalkan komentar di blog ini. Tanggapan Anda selalu kami hargai.