AdelinaSasa

Privacy Perihal kami Coba Template kami
×
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

  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

Popular Minggu ini:

TAHUKAH KAMU BEDANYA iPhone BEKAS JEPANG DENGAN SINGAPORE?

Pernah dengar Rumor iPhone rakitan Jepang dan Singapore?
Terutama anda yang domisili di batam yang masih sebagai "sorganya" elektronik, kali ini khusus seken. Dari hasil pantauan saya dilapangan peminat ponsel pintar bekas semakin meningkat terutama iPhone. Well, anda datang ketempat yang benar: BATAM.

Harga sebuah iPhone 5, 5c seken sekarang hanya berkisar 900 - satu jutaan disini. Kualitas tentu saja dijamin oleh toko penjual.

Mengapa batam? Karena Batam begitu dekat dengan singapore, hanya berjarak 45 menit (aktualnya hanya 25 menit, namun karena ada peraturan kecepatan di laut perbatasan dalam kecepatan tertentu maka dipatoklah 45 menit) perjalanan santai naik ferry laut, banyak celah dan peluang bisnis, salah satunya adalah bisnis ponsel bekas ini. Jangan anda remehkan ya, omsetnya bisa mencapai ratusan juta rupiah perbulan.  Kembali kepada topik: Perbedaan iPhone seken asal Jepang dan singapore.
Secara fisik, fitur dan kemampuan tidak ada perbedaan yang essensial. Nam…

APA BEDA SONY XPERIA ZR DOCOMO DENGAN GLOBAL?

Di Indonesia terutama di Batam sedang diserbu oleh produk hape bekas besutan sony keluarga xperia, saya juga tidak mengerti mengapa seken hape ini bisa sampai banjir di negara kita yang seluas ini, kalau mau dibilang produk hape ini sudah terbilang lawas di rilis dikisaran waktu 2013 - 2015, namun speknya masih terbilang bagus, dengan kamera beresolusi 13 - 20,7 Megapixel RAM 2GB, ruang simpan yang cukup lega dikisaran 8 - 32GB, tentu sangat menarik apalagi (kalau di Batam) harganya sangat murah berkisar antara RP. 550.000,- hingga RP.800ribuan, sangat terjangkau. Dan penjualnya memberikan garansi toko, bisa juga dibeli secara online, (kamu bisa mencari nama nama toko di Facebook seperti: Putra siregar seken singapore, atau bang Juju karena nama nama ini sudah terjamin kredibilitas bisnis mereka di Batam, Putra siregar bahkan telah memiliki beberapa cabang, Pekanbaru, Jakarta, Bali dll)

Satu hal yang kamu harus tahu: baik docomo maupun global keduanya sama sama asli besutan Sony, sama…

5 SIGNS WHY YOU ARE GENIUS

IF YOU CAN USE YOUR SMARTPHONE BY RIGHT when you confuse what shall be bought a laptop or a smartphone? Just consider the bugdet that you have for now, then I guess you will buying a phone, Am I right?  But why? Because with a smarthphone you can call your mom by dial her number, or you can texting your friends and send them some messages, so many fun in just one hand. Further more a phone does have networking capacity as laptop does have, so you can also chat with your friends through the internet.
Oh yes! I can't count how many times you can use it for get pictures with your friends and send them into social media like Facebook, IG, and GPlus? That are the ordinary people way to use their phones.

Why we call you are genius one is when you can use your smartphone more than a phone. You can use it for some productivity work such as: Blogging, support working, support learning, and for some excercises. When you so curious, here we go:

Signs 1. BLOGGING
You can use your smartphone fo…