Tutorial: Cara Mengubah (Mengganti) Jenis/Gaya Huruf di Template Blogger (Blogspot)
Pada laman Google Fonts, dengan mudahnya kita mendapat banyak sekali gaya atau jenis abjad yang disedikan oleh Google; dan sanggup diimplementasikan pribadi di blog yang kita miliki.
Contohnya ada Roboto, yang masih menjadi primadona dan paling banyak dipakai hingga dikala ini; ada juga Lora, Droid Sans, Open Sans Condensed, Poppins, Raleway, Lato, dan banyak sekali 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 praktis 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, wacana bagaimana cara mengganti gaya jenis abjad yang ada di template blogger. Sebelumnya, perhatikan bagaimana kodenya, apakah format Link-nya pribadi menyerupai ini:
...atau memang sudah dalam format Fast Loading sebagaimana No. 1 diatas? Contohnya menyerupai ini:
Ikuti beberapa arahan dibawah ini:
Pada tahap ini, teman akan melihat banyak sekali isu 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 yakni jenis teks Raleway, sanggup ditambahkan dengan citra kode menyerupai ini: Raleway:400,400i,700,700i.
Nah diatas itu yakni beberapa cara menciptakan dan memasang JavaScript Google Fonts di blog. Selanjutnya, wacana bagaimana cara kita "memanggil" kode tersebut semoga AKTIF di tampilan blog kita.
Sebenarnya agak rumit menjelaskan poin No. 2 ini alasannya yakni 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 bila misalkan JavaScript dari Google Fonts tersebut mendukung gaya teks Normal Halus (disebut juga Light, 300 atau 300i) maka tambahkan kodenya menyerupai di bawah ini:
Itu pun bila teman ingin memakai tampilan teks dengan gaya Normal Halus (Light). Kalau ingin memakai biasa (Medium), tidak perlu menambahkan kode "font-weight" lagi.
Oh... bila misalkan teks tersebut ingin ditebalkan (Bold), maka tambahkan kode "font-weight" dengan ukurannya tersendiri; apakah itu 400 atau 700.
Nah, praktis 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 banyak sekali gaya atau jenis abjad yang disedikan oleh Google; dan sanggup diimplementasikan pribadi di blog yang kita miliki.
Contohnya ada Roboto, yang masih menjadi primadona dan paling banyak dipakai hingga dikala ini; ada juga Lora, Droid Sans, Open Sans Condensed, Poppins, Raleway, Lato, dan banyak sekali 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 praktis 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, wacana bagaimana cara mengganti gaya jenis abjad yang ada di template blogger. Sebelumnya, perhatikan bagaimana kodenya, apakah format Link-nya pribadi menyerupai 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 menyerupai 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 arahan 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 banyak sekali isu 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 menyerupai yang dijelaskan diatas, -- Normal, Italic, dan Bold.
Nah, misalkan Google Fonts yang ingin dipakai yakni jenis teks Raleway, sanggup ditambahkan dengan citra kode menyerupai ini: Raleway:400,400i,700,700i.
Cara Mengaktifkan JavaScript Google Fonts di Blog dengan CSS
Nah diatas itu yakni beberapa cara menciptakan dan memasang JavaScript Google Fonts di blog. Selanjutnya, wacana bagaimana cara kita "memanggil" kode tersebut semoga 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 alasannya yakni 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 bila misalkan JavaScript dari Google Fonts tersebut mendukung gaya teks Normal Halus (disebut juga Light, 300 atau 300i) maka tambahkan kodenya menyerupai di bawah ini:
.post-body {background:#fff;font: 15px Raleway; font-weight: 300; line-height:1.2;color:#333}
Itu pun bila teman ingin memakai tampilan teks dengan gaya Normal Halus (Light). Kalau ingin memakai biasa (Medium), tidak perlu menambahkan kode "font-weight" lagi.
Oh... bila 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 bab 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, praktis banget, kan? Itu beliau cara mengubah/mengganti gaya (jenis) teks abjad di template blogger. Semoga artikel ini membantu, wassalam.*
0 Response to "Cara Mengubah (Mengganti) Jenis Aksara Di Template Blogger/Blogspot"