Cara Mengubah (Mengganti) Jenis Abjad Di Template Blogger/Blogspot

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 pribadi 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?

 dengan mudahnya kita mendapat aneka macam gaya atau jenis abjad yang disedikan oleh Googl Cara Mengubah (Mengganti) Jenis Huruf di Template Blogger/Blogspot

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 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 &lt;/head&gt;&lt;!--<head/>--&gt;. 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 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 aba-aba 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 gosip 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 ialah 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 ialah 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 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 jikalau 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 jikalau teman ingin memakai tampilan teks dengan gaya Normal Halus (Light). Kalau ingin memakai biasa (Medium), tidak perlu menambahkan kode "font-weight" lagi.

 dengan mudahnya kita mendapat aneka macam gaya atau jenis abjad yang disedikan oleh Googl Cara Mengubah (Mengganti) Jenis Huruf di Template Blogger/Blogspot

Oh... jikalau 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 ia cara mengubah/mengganti gaya (jenis) teks abjad di template blogger. Semoga artikel ini membantu, wassalam.*
Sumber https://tipsseokiller.blogspot.com/

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel