Skip to main content

Memasang google font di blogger

Memasang google font di blogger

Google Fonts merupakan platform yang sangat berguna bagi yang ingin memodifikasi tema blogger. Google Fonts menyediakan berbagai macam font yang dapat digunakan secara gratis dan bersifat open source.

Font-font ini dapat dengan mudah diintegrasikan ke dalam blog, selain itu terdapat banyak pilihan font dan ikon yang dapat disesuaikan dengan kebutuhan anda. Dengan menggunakan Google Fonts, anda dapat mempercantik tampilan blog anda tanpa biaya tambahan.

Berikut cara memasang google font di blogger

1. Pertama anda buka situs https://fonts.google.com.
2. Berikutnya anda cari dan pilih font yang anda inginkan, disini saya gunakan font oswald sebagai contoh.
3. Berikutnya anda klik Get Font.
Memasang google font di blogger
4. Karena anda menggunakan blogger, silahkan anda klik Get Embed Code.
Memasang google font di blogger
5. Pada pilihan selanjutnya, silahkan anda pilih web lalu ceck list yang @import dan copy kode yang muncul.
Memasang google font di blogger
6. Berikutnya anda login ke blogger com, didalam editor HTML tema blogger, silahkan  anda letakkan kode tersebut di atas kode </head>
7. Terakhir, anda klik Simpan.

Cara menggunakan font

Disini saya akan memberikan contoh yang paling sederhana, yaitu mengganti judul sidebar dengan font yang baru dipasang tadi.
1. Masuk ke editor HTML tema pada blogger.
2. Kode untuk judul sidebar umumnya seperti ini
.sidebar h2 {
font-family: roboto ;
font-size: 16px;
font-weight: 700;
font-style: normal
}
note:
  • font-family:roboto, merupakan jenis font yang akan diganti
  • font-size:16px, merupakan ukuran font
  • font-weight:700 adalah ketebalan font, anda dapat menggantinya menjadi 100 sampai 900, semakin besar angkanya maka semakin tebal
  • font-style:normal, yaitu normal atau tanpa style, jika anda menginginkan style huruf miring maka silahkan anda ganti normal menjadi italic
3. Silahkan anda ganti font roboto menjadi oswald, dan hasilnya akan seperti ini.
.sidebar h2 {
font-family: oswald ;
font-size: 16px;
font-weight: 700;
font-style: normal
}
4. Terakhir anda klik, Simpan.

Silahkan anda kunjungi blog anda untuk melihat hasilnya. Demikianlah cara memasang google font di blogger, semoga bermanfaat.

Comments

Popular

Mendaftarkan blog di google search

Mendaftarkan blog di google search console merupakan sebuah cara yang digunakan sebagai salah satu upaya agar blog yang kita miliki dapat diindex oleh mesin pencarian google, dengan begitu blog kita akan muncul di hasil pencarian google. Apa itu google search console? Google Search Console adalah layanan gratis yang ditawarkan oleh Google untuk membantu Anda memantau, mempertahankan, dan memecahkan masalah terkait kehadiran situs web Anda di hasil pencarian Google.  Beberapa fitur utama dari Google Search Console Pemantauan Kinerja Anda dapat melihat seberapa baik situs Anda tampil di hasil pencarian, termasuk jumlah klik, tayangan, dan posisi rata-rata. Perbaikan Masalah Alat ini membantu Anda mengidentifikasi dan memperbaiki masalah yang mungkin mempengaruhi visibilitas situs Anda. Pengelolaan Indeks Anda dapat meminta Google untuk mengindeks halaman baru atau menghapus halaman yang tidak diinginkan dari hasil pencarian. Laporan Keamanan Google Search Console memberikan informasi...

Mencadangkan tema blogger

Sebelum mengganti tema blogger , sebaiknya anda membuat cadangan tema yang sedang anda gunakan. Agar nantinya tema tersebut dapat anda gunakan kembali disuatu hari nanti atau untuk jaga-jaga saja saat anda menemukan kegagalan saat mengedit tema blogger, maka anda dapat menggunakan kembali tema yang anda cadangkan. Ada 2 pilihan cara membuat cadangan tema di blogger, yaitu: mendownload tema dalam bentuk .xml menggunakan aplikasi notepad catatan. Cara mencadangkan tema blogger A. Mendownload tema yang sedang digunakan Pilihan pertama yaitu membuat cadangan tema dengan cara mendownload tema yang sedang anda gunakan. 1. Login di blogger.com. 2. Klik Tema , Cadangkan . 3. Klik Download . 4. File hasil download harus berbentuk . xml . B. Menggunakan aplikasi notepad atau catatan Pilihan kedua yaitu dengan cara memanfaatkan aplikasi notepad atau aplikasi catatan. 1. Login di blogger.com. 2. Klik Tema , Edit HTML , lalu anda copy atau salin semua kode-kode pada editor HTML. 3. Buka notepad ata...

Membuat halaman contact form di blogger

Tujuan pembuatan halaman contact form atau formulir kontak bertujuan untuk memudahkan pengunjung blog berkomunikasi secara pribadi ke admin blog. Pesan pada contact form yang terkirim akan diteruskan ke inbox gmail milik admin blog, dalam hal ini gmail yang digunakan adalah gmail yang digunakan untuk membuat blog. Sebenarnya blogger telah menyediakan gadget contact form yang di tempatkan pada bagian sidebar blog, namun kebanyakan pemilik blog memilih menyembunyikannya dan memilih untuk membuat halaman contact form sendiri dengan berbagai variasi di halaman statis. Cara membuat halaman contact form di blogger I. Menambahkan gadget contact form pada bagian sidebar Langkah pertama adalah menambahkan gadget contact form pada bagian sidebar atau anda juga dapat meletakkannya dibagian footer blog. 1. Pertama anda klik Tata Letak . 2. Berikutnya anda klik Tambahkan Gadget pada layout sidebar. 3. Berikutnya cari dan klik Contact form atau formulir kontak . 4. Simpan . II. Menyembunyikan gadg...

Perbaikan thumbnail postingan blogger yang blur part 1

Gambar kecil atau thumbnail biasanya digunakan dibagian halaman utama blog apabila memakai readmore, popular posts, related posts, recent post. Blur pada thumbnail ini sering kali disebabkan karena sering mengganti tema, sering mengedit postingan yang nantinya blogger akan mereset pengaturan pada gambar postingan yang berakibat gambar thumbnail pecah atau blur. Blur pada thumbnail juga dapat disebabkan oleh pengguna yang merubah ukuran gambar didalam tema blog tanpa memperhatikan kualitas thumbnail yang akan muncul. Sebenarnya blur pada thumbnail ini dapat diatasi dengan cara merubah kode pada tema maupun merubah kode gambar pada postingan itu sendiri. Disini kita akan mencoba memperbaiki thumbnail yang blur dengan cara merubah kode gambar pada postingan, cara ini terbilang cukup ampuh namun memiliki beberapa kelemahan diantaranya: Setelah ganti tema maka thumbnail akan kembali blur, sehingga kita harus mengeditnya kembali satu-persatu. Setelah update pada gambar postingan maka gambar ...

merubah teks link newer post

Link newer post terletak di bagian bawah postingan blog, fungsinya yaitu sebagai navigasi yang apabila diklik maka pengunjung akan diarahkan ke halaman postingan yang lebih baru. Untuk merubah teks link tersebut dengan nama yang anda inginkan, misalnya dengan kata previous , anda cukup merubah kode HTML yang berada didalam editor HTML tema. Berikut cara merubah teks link newer post 1. Login di blogger.com. 2. Berikutnya anda klik Tema , Edit HTML . 3. Berikutnya anda cari kode berikut ini <data:newerPageTitle/> 4. Berikutnya anda hapus kode tersebut, dan ganti dengan kata previous atau yang sesuai dengan apa yang anda inginkan. 5. Terakhir anda klik Simpan . Cara ini berlaku untuk tema bawaan blogger yang belum responsive semisal simple bold, awesome, travel dan lainnya. Untuk melihat tutorial mengenai cara merubah teks pada link Older Post, silahkan klik disini . Demikianlah cara merubah teks link newer post pada blogger.com, semoga bermanfaat.