INI GUNANYA FONT AWSOME BUAT MEMPERCANTIK DESAIN TEMPLATE

Motivasi 
Waktu pertama coba coba desain sendiri tema kamu pasti berfikir kok baik tampilan header, background dan warna gak asik banget, kurang cool misalnya kayak punya para master desainer yang lainnya. Namanya juga pemula dan sebagai kandidat desainer yang masih baru (ciee, gpp menggantungkan cita cita menjadi seorang desainer disamping cita cita menjadi seorang dokter , bukan?)  kamu gak boleh berkecil hati hanya karena desain yang kamu impikan tidak kesampaian dibuat oleh tanganmu sendiri. Alias tidak sesuai dengan harapanmu, kelak kalau kamu terus berjalan kearah sana tanpa lelah (siapa tahu kamu akan menjadi seorang dokter, seroang web desainer, dan seorang yang lain...) teruslah melangkah!
Tipsnya hanya:
  • Coba dan coba
  • Belajar dan belajar lagi
  • Konsisten dan percayalah bahwa kamu pasti akan bisa.
Mungkin yang penulis share sekarang hanyalah hal kecil, namun jangan salah sangat berdampak terhadap penampilan blog. Google sendiri dengan algoritma terbaru sangat perduli terhadap tampilan blog, terutama yang mobile friendly, cantik dan rapi.

Kayaknya penulis gak punya ide yang lain buat motivasi kamu. Pernah gak waktu masukan widget icon kok gak mau keluar? Pasti ada yang salah pada template...Ya pada template kamu tidak terdapat kode font yang bernama "font awsome" padahal icon font tersebut sangat penting bagi penampilan sebuah template blogger misalnya supaya terlihat cantik, fresh dan meyakinkan! Dan Algrotitma Google sendiri jelas menyukai penampilan blog yang rapi dan bagus. Oke, mari kita bahas yang namanya Icon awsome ini.

Font - Awsome
Bagi seorang desainer tentulah mudah membuat ikon atau logo mereka sendiri ya tinggal buat gambar saja lalu aplikasikan menjadi komponen web. Tapi bagi seorang programmer? Wah tidak sesederhana itu.

Namun untungnya telah tersedia framwork CSS yang bernama Font-Awsome yang memiliki ratusan icon yang bisa kamu manfaatkan untuk melengkapi tampilan desain kamu. Gunanya adalah, misalkan kamu ingin menambahkan widget menarik pada blog kamu kok ikon facebook, twitternya cuma tanda silang alias gak bisa tampil kayak punyanya para master itu sehingga tampilan blog tampak fresh dan premium padahal temanya dibuat atau di edit sendiri.

Bukan hanya widget soscia-media, bahkan kalau kamu mau membuat menu navigasi di header menggunakan font awsome menyediakan icon icon menarik dalam bentuk image font biasa hingga yang bergerak alias animated contohnya, kamu bisa menambahkan kode kode fa fa awsome seperti contoh dibawah:
 <i class="fa fa-thumbs-up fa-2x fa fa-bounce"></i> Kode ini menjadi Jempol
 <i class="fa fa-thumbs-o-down faa-vertical"> jempol ke bawah
 <i class="fa fa-hand-paper-o fa fa-shake"> 
 <i class='fa fa-cog fa-spin fa-2x fa-fw'/>
Karena terbatasan waktu disini kita tidak memformat halaman ini untuk font animasi, tetapi jika kamu ingin mengkopi beberapa format fa fa awsome silahkan mengunjungi LINK berikut ini

Namun agar ikon font awsome dapat bekerja pada blog terlebih dahulu kamu harus memasukan kode di bawah ini kedalam template:

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

kode tersebut adalah kode "pemanggil" font fa fa awsome yang biasa adelinasasa pakai.
Caranya masuk ke dasbor blogger, masuk ke tema dan pilih EDIT HTML:

lalu cari kode </head> letakan (atau pastekan) kode tersebut diatas kode </head> dan save template.

Font awsome adalah elemen desain
Jadi setelah kode: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> kamu letakan di atas kode </head> barulah blog kita dapat menampilkan logo logo cantik medsos sebagaimana yang akan kita tunjukan contohnya pada dua gambar di bawah ini.

Memang banyak sekali yang harus dipergunakan untuk memaksimalkan sebuah desain suatu tema web atau template blog, salah satunya ya menggunakan font awsome ini. Bukan hanya sekedar mempercantik font atau untuk gaya gayaan (padahal memang iya) Tapi memang sangat berpengaruh pada tampilan estetika halaman blog atau web kita. Contohnya beberapa widget yang dipasang sebelum dan sesudah
Widget tanpa awsome font: Tampak tidak ada logo yang dapat ditampilkan nasib baik kalau hanya tidak bisa ditampilkan kadang pada beberapa kasus akan meninggalkan cacat image.
Gambar diatas adalah widget medsos yang ditambahkan kedalam proyek pembuatan templat dan perhatikan perbedaan tampilannya setelah kode awsome diatas di tanamkan ke dalam html template di bawah ini:

Widget setelah kode awsome ditanamkan ke dalam html tampak logo medsos yang lazim dipakai menjadi tampil:
 Walhasil tampilan widget menjadi lebih hidup dan lebih familiar dimata pembaca blog kita. Jika kurang mengerti karena tulisan saya yang masih belum lugas ini, silahkan meninggalkan komentar, akan kami berikan jawaban.


Comments

  1. iya sist di template piroamp juga ada font awsome nya, kalau masalah kode mengkode jadi bingung, kemaren aja upload html fanspage facebook sendiri di github gak jadi2 alhasil pakai rawgitnya orang dulu hihihi

    ReplyDelete
    Replies
    1. kode (koding) hanyalah bahasa yang kita pergunakan agar dapat berkomunikasi dengan "mesin" Sama dengan bahasa yang dipakai oleh manusia dalam kehidupan sehari hari: memberikan intruksi, menyampaikan informasi hingga "CURHAT" he he he...Well hanya saja karena kita tidak terbiasa sehingga sedikit "membingungkan"

      pilosofinya sama: Komunikasi dua arah: manusia dan mesin, mesin dengan mesin, dan pada akhirnya mesin kepada manusia (dalam waktu dekat setelah algoritma mendekati inteligent manusia)

      Delete

Post a Comment