Cara Menambahkan Kode CSS Khusus ke Blog Blogger

Cara Menambahkan Kode CSS Khusus ke Blog Blogger

Tambahkan CSS ke Blogger: Cascading Style Sheets (CSS) terutama digunakan untuk menata Halaman Web Anda atau mengubah tampilan Blog Anda. Di sini kita belajar caranya tambahkan CSS di blogger.

Semua orang ingin membuat blognya berbeda dan unik dari yang lain baik dengan mengubah tata letak atau menambahkan beberapa elemen selain dari niche Anda. CSS khusus akan membantu blog Anda terlihat seperti blog blogger profesional.

Ada lima opsi utama untuk menambahkan kode CSS ke blog blogger dan Anda harus memilih salah satunya sebagai opsi terbaik yang dapat Anda terapkan dengan mudah ke blog Anda.

Secara umum, pilihan untuk menambahkan/mengubah kode CSS akan bergantung pada kebutuhan Anda seperti apakah Anda ingin menambahkan CSS untuk seluruh blog atau hanya ingin menata elemen tertentu yaitu. Sidebar, footer, posting tunggal, Gadget tertentu, dll.

Tambahkan Kode CSS ke Blog Blogger

Ubah Blog dengan CSS: Menambahkan kode CSS sangat sederhana dan Anda dapat memilih salah satu dari lima opsi populer yaitu menyesuaikan tema untuk css, menambahkan css ke html, kode css ke gadget, menambahkan css di post html dan menautkan file css eksternal.

Berikut adalah panduan detail untuk menyesuaikan blog dengan css pada tahun 2021-2022:

Kustomisasi Tema untuk CSS

Jika Anda blogger baru maka opsi ini adalah yang terbaik untuk Anda. Tidak perlu pengetahuan teknis. Dalam metode ini Anda tidak perlu khawatir tentang kesalahan yang akan dihadapi saat menambahkan kode CSS ke dalam template blogger.

Anda dapat mengubah aspek apa pun dari blog Anda dengan menambahkan kode CSS ke bidang Tambahkan CSS yang terletak di bawah Tab Lanjutan. Bagian terbaik dari alat ini adalah Anda dapat langsung melihat hasilnya dalam pratinjau langsung.

Langkah-1 (Masuk ke Blogger.com): Login ke akun blogger Anda di blogger.com/home.

Langkah-2 (Pilih Blog untuk diperbarui): Jika Anda memiliki lebih dari satu blog, pilih blog yang ingin Anda sesuaikan dari sisi kiri seperti yang ditunjukkan pada gambar di bawah.

Daftar Blog Terbaru
Daftar blog terbaru

Langkah-3 (Sesuaikan Tema): Di menu sebelah kiri, klik Tema dan di bawah Tema Saya, klik Sesuaikan.

Sesuaikan Tema Blogger
Sesuaikan Tema Blogger

Langkah-4 (Tambahkan CSS ke Penyesuai): Di menu sebelah kiri, di bawah Canggih Tab, gulir ke bawah dan pilih Tambahkan CSS.

Tambahkan CSS ke penyesuai
Tambahkan CSS ke penyesuai

Namun, jika Anda menggunakan Template/Tema Blogger pihak ketiga, Anda mungkin langsung melihat opsinya Tambahkan CSS di panel kiri.

Sekarang Anda dapat menambahkan kode CSS di bidang yang terletak di bawah Tambahkan CSS Kustom untuk mengganti gaya blog Anda yang sudah ada.

Setelah menambahkan kode Anda, jangan lupa untuk mengklik Menyimpan tombol di sudut kanan bawah jendela penyesuai blogger Anda.

Tambahkan CSS ke HTML

Tambahkan CSS melalui Edit HTML Template Blog: Untuk menggunakan metode ini, Anda harus memiliki pengetahuan dasar tentang Editor HTML tema blog blogger. Dengan kata lain, jika Anda sudah terbiasa dengan editor HTML, Anda dapat menambahkan kode CSS dengan lebih mudah ke dalam blog Anda.

Namun, saya sangat menyarankan Anda untuk mendownload salinan template blog Anda sebelum membuat perubahan atau mengedit kode.

Untuk menambahkan kode CSS apa pun ke html blogger secara langsung, buka Tab Tema blog Anda dan klik tombol Edit HTML. Lihat tangkapan layar di bawah ini:

Tema Blogger Mengedit HTML
Tema Blogger Mengedit HTML

Di Editor HTML blog Anda yang terbuka, Anda akan melihat banyak baris dengan berbagai kode. Klik atau letakkan penunjuk tetikus Anda di mana saja pada kode yang diberikan dan cari ]]></b:skin>

Sekarang, sebelum atau di atas ]]></b:skin> tambahkan kode CSS Anda untuk mengubah hampir semua aspek tampilan blog Anda.

Perhatikan bahwa setiap Cascading Style Sheets (CSS) dimulai dengan nama tag dan kode CSS harus disisipkan di antara {Kurung} dalam lembar gaya.

Misalnya:

/* Showeblogin CSS Codes sample for body tag */
body {
font-family:"Times New Roman",Serif;
color:#123456;
background:#654321;
border:solid 2px red;
}

Setelah menambahkan kode, klik Pratinjau Template untuk melihat efeknya, lalu simpan tema saja. Anda juga dapat menambahkan CSS antara Kode CSS di sini di mana saja di template tetapi harus lebih baik untuk memasukkannya sebelum menutup </head> menandai.

Kode CSS ke Gadget

Sisipkan kode CSS melalui Gadget: Metode ini juga bebas risiko dan dapat bermanfaat bagi pendatang baru di platform blogging. Selanjutnya, jika Anda memiliki banyak kode terbuka CSS, pendekatan ini akan ramah pengguna.

Cukup kunjungi Dasbor blog Anda dan buka Tab Tata Letak lalu klik tautan Tambahkan Gadget mana pun yang disediakan di area widget blog Anda.

Gadget JavaScript HTML
Gadget JavaScript HTML

Sekarang, gulir ke bawah dan klik HTML/Javascript seperti yang ditunjukkan pada tangkapan layar di atas. Sekarang, tambahkan kode CSS khusus Anda di antara:

<style type="text/css">
/* Place your CSS codes here. */
</style>

Tautkan File CSS Eksternal

Tautkan file CSS eksternal ke Blog: Pemula tidak boleh menggunakan metode ini karena membutuhkan banyak perawatan dan pengetahuan teknis termasuk menghosting file css eksternal dan menambahkan CSS melalui Edit HTML Tema Blog.

Tapi, kami punya trik sederhana untuk itu. Jadi, jika Anda memiliki file CSS khusus eksternal dan ingin menautkan file CSS yang dihosting secara eksternal ke template blog Anda, Anda dapat melakukannya sebagai berikut:

<link type="text/css" rel="stylesheet" href="https://www.superwebtricks.com/add-css-into-blog-template/your-externally-hosted-style.css">

Buka Editor HTML tema blog Anda dan cari <head> tag lalu tambahkan kode HTML di atas dengan tautan file style.css yang dihosting secara eksternal setelah/di bawah <head> atau sebelum/di atas </head>.

File CSS Eksternal
File CSS Eksternal

Namun, tag tautan harus ditempatkan di dalam <head> ... </head> elemen saja. Atribut rel dengan nilai "lembar gaya" memungkinkan browser untuk mengenali bahwa href atribut memberikan alamat Web (URL) untuk style sheet Anda.

Tambahkan CSS di Posting HTML

Tambahkan CSS untuk Posting Tunggal Blog Anda: Teknik ini akan digunakan untuk gaya inline. Dengan kata lain, Anda dapat menerapkan metode ini untuk posting blog atau halaman web tertentu.

Oleh karena itu, jika Anda ingin melakukan pemformatan satu kali untuk paragraf tertentu di postingan blog Anda, berikut adalah format untuk menatanya:

<span style="CSS Codes here">Write your text here</span>

Misalkan Anda ingin menata teks tertentu (Showeblogin) dalam paragraf tertentu, maka Anda dapat melakukannya dengan bantuan pengkodean sederhana ini.

Kode CSS Posting Blog
Kode CSS Posting Blog

Pergi ke editor posting (HTML) alih-alih mode penulisan dari posting blog tertentu itu dan tambahkan kode CSS khusus berikut:

<span style="color:red;font-weight:bold;background-color:#f3f3f3;">Showeblogin</span>

Menikmati!

Admin Tamvan, disegala Arah dan Cuaca..

You might also like