Tutorial: Cara Mengubah (Mengganti) Jenis/Gaya Huruf di Template Blogger (Blogspot)
Pada laman Google Fonts, dengan mudahnya kita mendapatkan berbagai gaya atau jenis huruf yang disedikan oleh Google; dan dapat diimplementasikan langsung di blog yang kita miliki.
Contohnya ada Roboto, yang masih menjadi primadona dan paling banyak digunakan sampai saat ini; ada juga Lora, Droid Sans, Open Sans Condensed, Poppins, Raleway, Lato, dan berbagai teks lainnya dengan gaya Serif, Sans-Serif, Display, Handwriting, dan Monospace.
Pertanyaannya, bagaimana cara mengubah atau mengganti jenis gaya huruf yang sebelumnya sudah ada di dalam template blogger?
Seandainya pun belum terpasang, bagaimana cara membuat dan memasang Google Fonts di dalam template blogger? Sebenarnya, tidak sulit yang dibayangkan. Praktisnya, sangat mudah kok.
Jika sebelumnya sobat belum pernah mencoba, menambahkan, atau memasang Google Fonts di template blogger; disini penulis akan menjelaskan tutorialnya.
Dikatakan dan/atau dikategorikan "Fast Loading", lantaran Google Fonts terkadang menimbulkan permasalahan Render Blocking CSS dan JavaScript sekaligus. Melalui tutorial di bawah ini, insya Allah tidak ada kesalahan; baik pada Render Blocking CSS maupun JavaScript.
Copas kode di atas, TEPAT diatas kode </head> atau </head><!--<head/>-->. Selanjutnya simpan perubahan template blogger.
Kalau ingin memisahkannya, pasang kode di bawah ini -- 100% persis sama:
Hanya ada sedikit perbedaan diantara dua kode di atas, kan? Ketika salah satu diantaranya diimplementasikan di dalam template blogger, atau pun dibandingkan; HASILNYA tetap sama.
Selanjutnya, tentang bagaimana cara mengganti gaya jenis huruf yang ada di template blogger. Sebelumnya, perhatikan bagaimana kodenya, apakah format Link-nya langsung seperti ini:
...atau memang sudah dalam format Fast Loading sebagaimana No. 1 diatas? Contohnya seperti ini:
Ikuti beberapa instruksi dibawah ini:
Pada tahap ini, sobat akan melihat berbagai informasi dari jenis Google Fonts yang telah dipilih; dimulai dari teks dengan gaya Normal (300/400), Italic (miring - 300i/400i)), dan hingga Bold (700) sampai Bold yang dimiringkan (700i).
Nah, misalkan Google Fonts yang ingin digunakan adalah jenis teks Raleway, bisa ditambahkan dengan gambaran kode seperti ini: Raleway:400,400i,700,700i.
Nah diatas itu adalah beberapa cara membuat dan memasang JavaScript Google Fonts di blog. Selanjutnya, tentang bagaimana cara kita "memanggil" kode tersebut agar AKTIF di tampilan blog kita.
Sebenarnya agak rumit menjelaskan poin No. 2 ini karena setiap template blogger memiliki ciri khasnya masing-masing.
Contohnya, apabila ingin mengganti (mengubah) gaya teks Roboto dengan Raleway, maka hapus tulisan Roboto tersebut, dan ganti dengan tulisan/kata yaitu Raleway.
Oh kalau misalkan JavaScript dari Google Fonts tersebut mendukung gaya teks Normal Halus (disebut juga Light, 300 atau 300i) maka tambahkan kodenya seperti di bawah ini:
Itu pun kalau sobat ingin menggunakan tampilan teks dengan gaya Normal Halus (Light). Kalau ingin menggunakan biasa (Medium), tidak perlu menambahkan kode "font-weight" lagi.
Oh... kalau misalkan teks tersebut ingin ditebalkan (Bold), maka tambahkan kode "font-weight" dengan ukurannya tersendiri; apakah itu 400 atau 700.
Nah, gampang banget, kan? Itu dia cara mengubah/mengganti gaya (jenis) teks huruf di template blogger. Semoga artikel ini membantu, wassalam.*
Pada laman Google Fonts, dengan mudahnya kita mendapatkan berbagai gaya atau jenis huruf yang disedikan oleh Google; dan dapat diimplementasikan langsung di blog yang kita miliki.
Contohnya ada Roboto, yang masih menjadi primadona dan paling banyak digunakan sampai saat ini; ada juga Lora, Droid Sans, Open Sans Condensed, Poppins, Raleway, Lato, dan berbagai teks lainnya dengan gaya Serif, Sans-Serif, Display, Handwriting, dan Monospace.
Pertanyaannya, bagaimana cara mengubah atau mengganti jenis gaya huruf yang sebelumnya sudah ada di dalam template blogger?
Seandainya pun belum terpasang, bagaimana cara membuat dan memasang Google Fonts di dalam template blogger? Sebenarnya, tidak sulit yang dibayangkan. Praktisnya, sangat mudah kok.
Cara Memasang Google Fonts Fast Loading di Blog
Jika sebelumnya sobat belum pernah mencoba, menambahkan, atau memasang Google Fonts di template blogger; disini penulis akan menjelaskan tutorialnya.
Dikatakan dan/atau dikategorikan "Fast Loading", lantaran Google Fonts terkadang menimbulkan permasalahan Render Blocking CSS dan JavaScript sekaligus. Melalui tutorial di bawah ini, insya Allah tidak ada kesalahan; baik pada Render Blocking CSS maupun JavaScript.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Oswald|Raleway:400,400i,700,700i");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Copas kode di atas, TEPAT diatas kode </head> atau </head><!--<head/>-->. Selanjutnya simpan perubahan template blogger.
Note: Perhatikan kode warna merah diatas; dimana kasusnya, saya menggabungkan Google Fonts jenis Oswald dan Raleway menjadi SATU, dipisahkan tanda "|" tanpa tanda petik.
Kalau ingin memisahkannya, pasang kode di bawah ini -- 100% persis sama:
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Oswald");loadCSS("https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Hanya ada sedikit perbedaan diantara dua kode di atas, kan? Ketika salah satu diantaranya diimplementasikan di dalam template blogger, atau pun dibandingkan; HASILNYA tetap sama.
Cara Mengubah (Mengganti) Jenis Huruf di Template Blogger/Blogspot
Selanjutnya, tentang bagaimana cara mengganti gaya jenis huruf yang ada di template blogger. Sebelumnya, perhatikan bagaimana kodenya, apakah format Link-nya langsung seperti ini:
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
...atau memang sudah dalam format Fast Loading sebagaimana No. 1 diatas? Contohnya seperti ini:
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Oswald|Raleway:400,400i,700,700i");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Ikuti beberapa instruksi dibawah ini:
- Ubah atau ganti yang saya warna merahkan diatas; atau sebagaimana yang ditampilkan di template blogger sobat
- Masuk ke Google Fonts > Cari jenis huruf yang ingin digunakan > Tambahkan
Pada tahap ini, sobat akan melihat berbagai informasi dari jenis Google Fonts yang telah dipilih; dimulai dari teks dengan gaya Normal (300/400), Italic (miring - 300i/400i)), dan hingga Bold (700) sampai Bold yang dimiringkan (700i).
Saran terbaik dari saya, gunakan jenis Google Fonts yang mendukung semua gaya teks seperti yang dijelaskan diatas, -- Normal, Italic, dan Bold.
Nah, misalkan Google Fonts yang ingin digunakan adalah jenis teks Raleway, bisa ditambahkan dengan gambaran kode seperti ini: Raleway:400,400i,700,700i.
Cara Mengaktifkan JavaScript Google Fonts di Blog dengan CSS
Nah diatas itu adalah beberapa cara membuat dan memasang JavaScript Google Fonts di blog. Selanjutnya, tentang bagaimana cara kita "memanggil" kode tersebut agar AKTIF di tampilan blog kita.
Selalu ingat, JavaScript itu "pemanis" tampilan blog, biasanya berpengaruh ke kecepatan loading blog yang semakin lambat apabila dipasangkan; sedangkan CSS mengatur gaya tampilan situs kita, sedangkan HTML hanyalah bentuk-bentuk dasar dari tampilan blog.
Sebenarnya agak rumit menjelaskan poin No. 2 ini karena setiap template blogger memiliki ciri khasnya masing-masing.
- Cari kode .post-body atau .post atau .body atau main-wrapper atau body,.body-fauxcolumn-outer
- Jika sebelumnya telah terpasang kode font-family: Roboto; atau font: 14px Roboto; atau font: 14px Roboto, sans-serif
- Silakan ganti nama CSS pada "Roboto" diatas dengan nama JavaScript Google Fonts yang telah sobat pilih
Contohnya, apabila ingin mengganti (mengubah) gaya teks Roboto dengan Raleway, maka hapus tulisan Roboto tersebut, dan ganti dengan tulisan/kata yaitu Raleway.
Oh kalau misalkan JavaScript dari Google Fonts tersebut mendukung gaya teks Normal Halus (disebut juga Light, 300 atau 300i) maka tambahkan kodenya seperti di bawah ini:
.post-body {background:#fff;font: 15px Raleway; font-weight: 300; line-height:1.2;color:#333}
Itu pun kalau sobat ingin menggunakan tampilan teks dengan gaya Normal Halus (Light). Kalau ingin menggunakan biasa (Medium), tidak perlu menambahkan kode "font-weight" lagi.
Oh... kalau misalkan teks tersebut ingin ditebalkan (Bold), maka tambahkan kode "font-weight" dengan ukurannya tersendiri; apakah itu 400 atau 700.
Biasanya, teks yang ditebalkan (Bold), seringkali digunakan untuk kata-kata pada bagian Navigasi Menu yang ada di dalam blog tersebut. Contohnya: .navigasimenu {background:#3a89b9;list-style:none;margin:0;float:left;font:16px Oswald;text-transform:uppercase; font-weight: 400}
Nah, gampang banget, kan? Itu dia cara mengubah/mengganti gaya (jenis) teks huruf di template blogger. Semoga artikel ini membantu, wassalam.*
Post A Comment:
0 comments so far,add yours
Posting Komentar