Jadikan tampilan Blog anda dengan Google Font Effect - Hanyalah Berbagi Informasi

Jadikan tampilan Blog anda dengan Google Font Effect




Sebelumnya saya sudah memposting artikel Cara Menggunakan Google Font pada Blog, nah kali ini saya akan melanjutkan artikel lanjutan yang terkait dengan Google Font yaitu saya beri judul Jadikan tampilan Blog anda dengan Google Font Effect.

Cara membuat Google Font Effect

Ketika membuat teks header atau teks tampilan pada website, Anda mungkin menginginkan teks web Anda dalam tampilan yang dekoratif. Untuk mempermudah pekerjaan itu, Google telah menyediakan koleksi efek font yang dapat Anda gunakan dengan sedikit menggunakan penggunaan kode HTML untuk menghasilkan tampilan teks yang indah.

Sebagai contoh seperti dibawah ini :


Ini adalah Efek Font!


Fitur ini sebenarnya masih versi beta (uji coba), namun sudah bisa kita gunakan untuk blog atau website kita, cara cukup simple yaitu dengan menambahkan effect= pada link request Google Fonts API (API Name) dan menambahkan effect font yang diinginkan pada tag "class name" element HTML.

Dalam contoh effect font diatas, saya menggunakan effect font fire-animation, sehingga pengkodeaannya seperti berikut :

<link href='https://fonts.googleapis.com/css?family=Pacifico&effect=fire-animation' rel='stylesheet' type='text/css'/>

Tempatkan kode diatas antara <head> dan </head>, sehingga bisa terlihat seperti dibawah ini :

<head>
....................................
....................................
<link href='https://fonts.googleapis.com/css?family=Pacifico&effect=fire-animation' rel='stylesheet' type='text/css'/>
....................................
....................................
</head>

Untuk menggunakan dan menghasilkan efek, tambah class name yang diinginkan pada elemen HTML. Class name yang diinginkan selalu diawali dengan font-effect-, sehingga penggunaan class name pada contoh diatas adalah fire-animation menjadi font-effect-fire-animation. Dan dalam penerapannya adalah seperti dibawah ini :

<div class="font-effect-fire-animation">Ini adalah Efek Font!</div>

Hasilnya :


Ini adalah Efek Font!


Anda dapat meminta (request) beberapa efek dengan memisahkan nama efek dengan karakter pipa (|), contoh :

<link href='https://fonts.googleapis.com/css?family=Pacifico&effect=shadow-multiple|3d-float' rel='stylesheet' type='text/css'/>

Berikut ini adalah daftar lengkap dari semua efek font yang tersedia di Google Fonts :

Effect API Name Class Name Support
Anaglyph anaglyph font-effect-anaglyph Chrome, Firefox, Opera, Safari
Brick Sign brick-sign font-effect-brick-sign Chrome, Safari
Canvas Print canvas-print font-effect-canvas-print Chrome, Safari
Crackle crackle font-effect-crackle Chrome, Safari
Decaying decaying font-effect-decaying Chrome, Safari
Destruction destruction font-effect-destruction Chrome, Safari
Distressed distressed font-effect-distressed Chrome, Safari
Distressed Wood distressed-wood font-effect-distressed-wood Chrome, Safari
Emboss emboss font-effect-emboss Chrome, Firefox, Opera, Safari
Fire fire font-effect-fire Chrome, Firefox, Opera, Safari
Fire Animation fire-animation font-effect-fire-animation Chrome, Firefox, Opera, Safari
Fragile fragile font-effect-fragile Chrome, Safari
Grass grass font-effect-grass Chrome, Safari
Ice ice font-effect-ice Chrome, Safari
Mitosis mitosis font-effect-mitosis Chrome, Safari
Neon neon font-effect-neon Chrome, Firefox, Opera, Safari
Outline outline font-effect-outline Chrome, Firefox, Opera, Safari
Putting Green putting-green font-effect-putting-green Chrome, Safari
Scuffed Steel scuffed-steel font-effect-scuffed-steel Chrome, Safari
Shadow Multiple shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera, Safari
Splintered splintered font-effect-splintered Chrome, Safari
Static static font-effect-static Chrome, Safari
Stonewash stonewash font-effect-stonewash Chrome, Safari
Three Dimensional 3d font-effect-3d Chrome, Firefox, Opera, Safari
Three Dimensional Float 3d-float font-effect-3d-float Chrome, Firefox, Opera, Safari
Vintage vintage font-effect-vintage Chrome, Safari
Wallpaper wallpaper font-effect-wallpaper Chrome, Safari

Sebenarnya ada banyak cara untuk merubah gaya font pada blog anda melalui CSS. Tetapi dengan adanya layanan dari Google Fonts Effect memberikan beberapa ide baru bagi anda.
Baca juga : Cara Meningkatkan Loading Blog di PageSpeed Insights.
Bagaimana, jika anda merasa masih bingung mari kita diskusikan melalui kotak kometar.

Jadikan tampilan Blog anda dengan Google Font Effect Jadikan tampilan Blog anda dengan Google Font Effect Reviewed by Om Rudi on April 12, 2016 Rating: 5

Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.