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.
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.
Cara Menggunakan Google Font API Effect
Fitur ini sebenarnya masih versi beta (uji coba), namun sudah bisa kita gunakan untuk blog atau website kita, cara cukup simple yaitu dengan menambahkan
Sebagai contoh seperti dibawah ini :
Dalam contoh effect font diatas, saya menggunakan effect font
Tempatkan kode diatas antara
Untuk menggunakan dan menghasilkan efek, tambah class name yang diinginkan pada elemen HTML. Class name yang diinginkan selalu diawali dengan
Hasilnya :
Anda dapat meminta (request) beberapa efek dengan memisahkan nama efek dengan karakter pipa
Berikut ini adalah daftar lengkap dari semua efek font yang tersedia di Google Fonts :
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.
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.
Cara Menggunakan Google Font API Effect
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. Sebagai contoh seperti dibawah ini :
Ini adalah Efek Font!
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 | 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.
No comments