AdelinaSasa

INI GUNANYA FONT AWSOME BUAT MEMPERCANTIK DESAIN TEMPLATE

Mempercantik desain blog dengan elemen font awsome

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

Artikel Terkaitnya:

2 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

Home

Labels

Abadi account action addicted adobe photoshop fix adobe photoshop mix adobe photoshop touch adsense agama AI akal alam Albert Einstein alexander the great. Allien Amerika AMP anak Androd android angkasa angkasa luar animal animal planet animasi antithieft aplikasi hebat Appe apple Apple Face ID Artifical Intelligent artificial inteligent artikel artis asesories asus atheis autoCAD autodidact awas Ayu Ting Ting badai bahasa bahasa. bakteri batam BBM beginning benar bencana berbagi berita berjalan berlari bijaksana bing bisnis kecil black hole Blackberry blackberry Messenger blog blogger blogger logo blogger moblie blogging bluetooth keyboard bluetooth mouse bocor bot BPJS buku bully buruh burung langka business camera cat cellphone ceramah cerita charles Darwin chat China cinta classic Cloud cloud drive contempo contempohybrid coolest covid 19 CSS curhat custom ROM cybercrime Darwin dasbor Deep mind Demo desain Design dewa dilema docomo dollar amerika download DPR RI drama Drive DSLR dunia earn money editblogtema Education ekonomi Email emas endorse enggang English entertainment error etika evolusi Facebook fakta fanpage favicon feature fiksi fiksi sains filem filsafat finansial fisika flashdisk Florence Nightingle Florida food. forbes freckles Free friendship fun futuristik G+ Gadget Gagdet Galaxy Mega 6.3 Galaxy note 10.1 2014 edition gambir serawak game gaya hidup genetika Genius GENOM girl global gojek gold Google google adsense Google Rewards Opinion google%20drive google+ grafis Hack hacker handphone hantu hapeseken hari tua harimau harun yahya harvey heart secret hebat help me hewan hiburan hoax Hobit. hollywood horor HTML http://justdelete.me Huawei P20 pro hubungan hujatan hukum human humanbeing humor Hutan Lindung ICBM iis sugianto ilmuwan immortality impian Indosat infinity war iniJawabannya! insiden insipirasi intelligent Internasional internet invansion investment iOS iOS 11 iOS 8 iPad iPad Air ipad pro iphone iPhone 6 iPhone Case iPhone X iPhone Xs iphone. iPhoneX islam Israel isu sara jailbreak Jaime Sanjuan Ocabo Jalan Tikus janji Javascript Jenius Jerusalem jitu Job Jokowi Jokowi aja bekerja keras jokowi aja kreatif Jonru Ginting judi kamera kamera hape kantor Kaskus keabadian keadilan keamanan Kebenaran kecanduan kecantikan kecelakaan kecerdasan buatan kehidupan keluarga kemajuan kemanan kemiskinan kemudahan hidup kenyamanan kertas keruntuhan kesetiaan keyakinan keyboard external PC keyboard fisik tablet keyboard fisik tambahan keywords khairil anwar khotbah kiamat kisah klasik kode koding koes plus komedi komputer Konsipirasi konten kotak pandora kreatif kriminal krisis kristen kucing kuyang lagu lapangan kerja laptop leisure Lenovo Life lifehack lingkungan listrik logika logitech LOGO loneliness Lotgitech lowongan luar lucu MacBook madonna magis make up malam minggu Malaysia manipulatif manusia masa depan masa lalu mati tertawa media medis medsos membela diri mencari uang menggambar mengintip rahasia menulis meretas Messenger Micorosft Office Microsoft microsoft office microsoft%20office milk lover miras mitos mobile modal motivasi motivation motivation. movie Muhammad murai batu musik myths naluri NASA navigasi blogspot template network new news ngeblog Nokia X nuklir nyanyian nyata obat kuat Office office%20365 old time job online operating system oppo organisme original Otodidak pademi pahlawan pamali Pandora panduan paradox password PC pegawai negeri pekerja pekerjaan pemrograman pemula pencipta pendidikan pengarang penghasilan pension pensiun penulis perang perbankan perekamLayar perkawinan phablet phising PHK phone phone camera photographi phtography pilihan hidup pilosofi Play Store politik ponsel postingan potografer powered by blogger prabowo subianto prediksi teknologi premium pria pribadi prilaku privasi produktivitas programming promosi prostitusi psikologi Puasa publisher Puisi qoute Raffi Ahmad rahasia ramadhan rano karno rasialis relativitas reliji remaja renungan responsive review rhoma irama riba Robot ROM. stock ROM ruang waktu rumah sakit Rusia Safir screen sahabat sains salah Samsung samsung galaxy foldable Samsung Galaxy note 2014 Samsung S8 samsung tabS2 screenRecorder scy-fi SECRET secrets sejarah seken selebritis medsos self learning self-confident semesta sentinel SEO simalangkama simple singularity smarphone smartohone smartphone Smartwatch social song sony sosial spam spoiler Spy Stephen Hawking steve job strategi struktur success sukses suku terasing supernatural tablet tablet 7" TabletAndroid takhyul taktik tantangan target tauhid technic Technology teknik teknologi teknologi hoax telkomsel tema template tenaga kerja teologi teori terbaik theme thomas alpha edison Time traveller tips toko online Tokoh tourism town tragedi trik triks troubleshooting Tuhan Tutorial Tutorial. tweeter twiteer uang UFO ultrabook unggas langka United States universe usaha video viral virtual vivo waktu website widget Windows 8 Windows PC wisata women WORDPRESS xiomi xml xperia Yahoo yahudi

Get Updates