Tutorial: Cara Mengubah (Mengganti) Jenis/Gaya Huruf di Template Blogger (Blogspot)
Pada laman Google Fonts, dengan mudahnya kita mendapat aneka macam gaya atau jenis abjad yang disedikan oleh Google; dan sanggup diimplementasikan eksklusif di blog yang kita miliki.
Contohnya ada Roboto, yang masih menjadi primadona dan paling banyak dipakai hingga ketika ini; ada juga Lora, Droid Sans, Open Sans Condensed, Poppins, Raleway, Lato, dan aneka macam teks lainnya dengan gaya Serif, Sans-Serif, Display, Handwriting, dan Monospace.
Pertanyaannya, bagaimana cara mengubah atau mengganti jenis gaya abjad yang sebelumnya sudah ada di dalam template blogger?
Seandainya pun belum terpasang, bagaimana cara menciptakan dan memasang Google Fonts di dalam template blogger? Sebenarnya, tidak sulit yang dibayangkan. Praktisnya, sangat simpel kok.
Jika sebelumnya teman belum pernah mencoba, menambahkan, atau memasang Google Fonts di template blogger; disini penulis akan menjelaskan tutorialnya.
Dikatakan dan/atau dikategorikan "Fast Loading", karena Google Fonts terkadang menjadikan permasalahan Render Blocking CSS dan JavaScript sekaligus. Melalui tutorial di bawah ini, insya Tuhan 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, perihal bagaimana cara mengganti gaya jenis abjad yang ada di template blogger. Sebelumnya, perhatikan bagaimana kodenya, apakah format Link-nya eksklusif ibarat ini:
...atau memang sudah dalam format Fast Loading sebagaimana No. 1 diatas? Contohnya ibarat ini:
Ikuti beberapa isyarat dibawah ini:
Pada tahap ini, teman akan melihat aneka macam info dari jenis Google Fonts yang telah dipilih; dimulai dari teks dengan gaya Normal (300/400), Italic (miring - 300i/400i)), dan hingga Bold (700) hingga Bold yang dimiringkan (700i).
Nah, misalkan Google Fonts yang ingin dipakai yaitu jenis teks Raleway, sanggup ditambahkan dengan citra kode ibarat ini: Raleway:400,400i,700,700i.
Nah diatas itu yaitu beberapa cara menciptakan dan memasang JavaScript Google Fonts di blog. Selanjutnya, perihal bagaimana cara kita "memanggil" kode tersebut biar AKTIF di tampilan blog kita.
Sebenarnya agak rumit menjelaskan poin No. 2 ini sebab setiap template blogger mempunyai ciri khasnya masing-masing.
Contohnya, apabila ingin mengganti (mengubah) gaya teks Roboto dengan Raleway, maka hapus goresan pena Roboto tersebut, dan ganti dengan tulisan/kata yaitu Raleway.
Oh jika misalkan JavaScript dari Google Fonts tersebut mendukung gaya teks Normal Halus (disebut juga Light, 300 atau 300i) maka tambahkan kodenya ibarat di bawah ini:
Itu pun jika teman ingin memakai tampilan teks dengan gaya Normal Halus (Light). Kalau ingin memakai biasa (Medium), tidak perlu menambahkan kode "font-weight" lagi.
Oh... jika misalkan teks tersebut ingin ditebalkan (Bold), maka tambahkan kode "font-weight" dengan ukurannya tersendiri; apakah itu 400 atau 700.
Nah, simpel banget, kan? Itu beliau cara mengubah/mengganti gaya (jenis) teks abjad di template blogger. Semoga artikel ini membantu, wassalam.*
Pada laman Google Fonts, dengan mudahnya kita mendapat aneka macam gaya atau jenis abjad yang disedikan oleh Google; dan sanggup diimplementasikan eksklusif di blog yang kita miliki.
Contohnya ada Roboto, yang masih menjadi primadona dan paling banyak dipakai hingga ketika ini; ada juga Lora, Droid Sans, Open Sans Condensed, Poppins, Raleway, Lato, dan aneka macam teks lainnya dengan gaya Serif, Sans-Serif, Display, Handwriting, dan Monospace.
Pertanyaannya, bagaimana cara mengubah atau mengganti jenis gaya abjad yang sebelumnya sudah ada di dalam template blogger?
Seandainya pun belum terpasang, bagaimana cara menciptakan dan memasang Google Fonts di dalam template blogger? Sebenarnya, tidak sulit yang dibayangkan. Praktisnya, sangat simpel kok.
Cara Memasang Google Fonts Fast Loading di Blog
Jika sebelumnya teman belum pernah mencoba, menambahkan, atau memasang Google Fonts di template blogger; disini penulis akan menjelaskan tutorialnya.
Dikatakan dan/atau dikategorikan "Fast Loading", karena Google Fonts terkadang menjadikan permasalahan Render Blocking CSS dan JavaScript sekaligus. Melalui tutorial di bawah ini, insya Tuhan 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, aku 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, perihal bagaimana cara mengganti gaya jenis abjad yang ada di template blogger. Sebelumnya, perhatikan bagaimana kodenya, apakah format Link-nya eksklusif ibarat 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 ibarat 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 isyarat dibawah ini:
- Ubah atau ganti yang aku warna merahkan diatas; atau sebagaimana yang ditampilkan di template blogger sobat
- Masuk ke Google Fonts > Cari jenis abjad yang ingin dipakai > Tambahkan
Pada tahap ini, teman akan melihat aneka macam info dari jenis Google Fonts yang telah dipilih; dimulai dari teks dengan gaya Normal (300/400), Italic (miring - 300i/400i)), dan hingga Bold (700) hingga Bold yang dimiringkan (700i).
Saran terbaik dari saya, gunakan jenis Google Fonts yang mendukung semua gaya teks ibarat yang dijelaskan diatas, -- Normal, Italic, dan Bold.
Nah, misalkan Google Fonts yang ingin dipakai yaitu jenis teks Raleway, sanggup ditambahkan dengan citra kode ibarat ini: Raleway:400,400i,700,700i.
Cara Mengaktifkan JavaScript Google Fonts di Blog dengan CSS
Nah diatas itu yaitu beberapa cara menciptakan dan memasang JavaScript Google Fonts di blog. Selanjutnya, perihal bagaimana cara kita "memanggil" kode tersebut biar AKTIF di tampilan blog kita.
Selalu ingat, JavaScript itu "pemanis" tampilan blog, biasanya besar lengan berkuasa 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 sebab setiap template blogger mempunyai 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 teman pilih
Contohnya, apabila ingin mengganti (mengubah) gaya teks Roboto dengan Raleway, maka hapus goresan pena Roboto tersebut, dan ganti dengan tulisan/kata yaitu Raleway.
Oh jika misalkan JavaScript dari Google Fonts tersebut mendukung gaya teks Normal Halus (disebut juga Light, 300 atau 300i) maka tambahkan kodenya ibarat di bawah ini:
.post-body {background:#fff;font: 15px Raleway; font-weight: 300; line-height:1.2;color:#333}
Itu pun jika teman ingin memakai tampilan teks dengan gaya Normal Halus (Light). Kalau ingin memakai biasa (Medium), tidak perlu menambahkan kode "font-weight" lagi.
Oh... jika 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 dipakai untuk kata-kata pada pecahan 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, simpel banget, kan? Itu beliau cara mengubah/mengganti gaya (jenis) teks abjad di template blogger. Semoga artikel ini membantu, wassalam.*
