Skip to main content

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

Popular posts from this blog

INI DIA 9 SITUS TEMPAT BELAJAR KODING TERBAIK

Selagi kalian masih muda, dan kalian terbiasa mengoperasikan komputer: Laptop, Desktop, iPad, Tablet dan bahkan Smart-phone, maka sesungguhnya kalian memiliki kesempatan yang sangat besar untuk tetap bisa belajar layaknya sekolah formal namun melalui jalan online!
Belajar Online? Mengapa tidak? Tidak ada yang salah dengan belajar online. Kalau bisnis online terbukti sukses, belanja online juga bisa, mengapa harus tertutup kesempatan belajar online? Tidak banyak alasan untuk menolaknya, sekalipun masih ada orang berpikirnya begini: Tidak afdol kalau belajar online, harus melalui guru langsung.

Itu namanya paradigma lama, saya belajar secara online, tanpa guru dan walaupun belum terlalu menguasai pelajaran koding seperti yang telah saya targetkan, namun saya telah menguasai beberapa bahasa program web tanpa keluar uang sepeserpun selain hanya waktu dan quota internet. Saran saya jangan mempersulit diri kita sendiri dengan banyak alasan untuk tidak belajar. Hari segini bisnis saja tanpa at…

MENGAPA POWERED BY BLOGGER ITU PENTING BAGI GOOGLE?

Blogger menggunakan ikon, ikon yang dipergunakannya adalah tipe SVG, sebenarnya banyak jenis jenis ikon yang bisa kita pergunakan, misalnya yang paling populer adalah ikon font awsome, namun jika memilih menggunakan font awsome kita harus memasang script link eksternal ke dalam template blogger kita. Hal ini akan membebani loading atau kecepatan halaman blog saat dijalankan di internet.

Nah itulah sebabnya mengapa blogger secara default tidak menggunakan font awsome yang cantik dan memiliki banyak ikon tersebut. Blogger secara default menggunakan SVG yang jauh lebih ringan, dapat berjalan pada semua browser utama.

Ikon pada atribusi dan kredit blogger adalah "trademark" special platform blogger, jadi tidaklah bijaksana menghapus ikon tersebut (walaupun Google tidak secara jelas melarangnya atau memperbolehkannya, meskipun template anda buat dari NOL. Mengapa? Alasannya adalah:
Anda tidak akan membuat template blogger kalau platform blogger itu sendiri tidak ada. Platform Blogge…

QUORA: PEKERJAAN PALING ENAK DAN SANTAI NAMUN GAJINYA BESAR

Quora adalah sebuah situs tempat bertanya dan menjawab: Dari sekian ton pertanyaan dan jawaban saya menemukan jawaban menggelitik seputar profesi anggota DPR dan Pegawai negeri, panasaran? Simak saja:

1. ANGGOTA DPR
Jawaban terbaik untuk pertanyaan ini tentu saja adalah pekerjaan mulia yang digawangi oleh para wakil rakyat Indonesia di gedung DPR-RI. Pekerjaan sebagai anggota DPR. Saya (Anissa) tergoda untuk mencontek langsung tulisan yang bersumber dari quora ini:

Gaji dan tunjangan tetap Gaji Pokok = Rp 4.200.000 Tunjangan Istri (10% GP) = Rp 420.000 Tunjangan Anak (2 anak x 2% GP) = Rp 168.000 Uang sidang / Paket = Rp 2.000.000 Tunjangan Jabatan = Rp 9.700.000 Tunjangan Beras Rp 30.090 per jiwa per bulan Tunjangan PPH pasal 21= Rp 2.699.813 Penerimaan lain:
Penerimaan lain Tunjangan Kehormatan: Rp 5.580.000 Tunjangan Komunikasi Intensif = Rp. 15.554.000 Tunjangan Peningkatan Fungsi Pengawasan dan Anggaran = Rp 3.750.000 Bantuan Langganan Listrik dan Telepon = Rp 7.700.000 Asisten Anggo…