Bagaimana Cara Mengubah Tampilan Blogger dengan CSS

Pada blog ini, banyak terdapat tutorial untuk membuat blog Blogger kamu tampil beda dari yang lainnya, salah satunya adalah dengan menggunakan CSS. Namun setiap saya membuat panduan tersebut, saya selalu mengulang penjelasan yang sama. Di mana saya harus meletakan kode tersebut?

Dalam panduan kali ini, saya akan membahas secara khusus bagaimana cara kamu bisa menggunakan CSS dan beberapa opsi yang bisa kamu gunakan, terutama untuk blog Blogger yang kamu punya.

Menambahkan CSS pada Blogger

Ada dua cara untuk memasukan kode CSS ke dalam template Blogger yang kamu gunakan. Kamu bisa menggunakan CSS melalui menu kustomisasi template Blogger atau menambahkannya langsung ke dalam kode HTML template kamu melalui template editor.

Cara yang mana yang paling baik?

Tergantung. Kalau kamu menggunakan menu kustomisasi template Blogger, kamu akan menambahkan kode yang terpisah dari CSS utama template tersebut. Ini akan sangat berguna kalau kamu ingin menyimpan CSS yang kamu tambahkan karena kode tersebut akan tetap tersimpan meskipun kamu mengganti template baru.

Menambahkan CSS langsung pada template blogger melalui HTML editor akan membuat kode CSS yang kamu gunakan menyatu dengan CSS utama dan kamu dapat melihat secara keseluruhan CSS yang ada pada template tersebut. Cara ini juga bisa menghindari kamu dari penumpukan kode yang kadang membuat CSS yang kamu tambahkan tidak bisa terlihat hasilnya karena ada kode pada CSS utama yang mengesampingkan CSS yang kamu tambahkan.

Menambahkan CSS menggunakan template Blogger

Caranya cukup mudah, cukup masuk ke dashboard Blogger dan pilih menu Template » Sesuaikan.

menambahkan-css-dengan-menyesuaikan-template-blogger

Kemudian pada menu Tingkat Lanjut, kamu akan melihat pilihan Tambahkan CSS yang biasanya berada di urutan paling bawah.

tingkat-lanjut-tambahkan-css-blogger

Sekarang kamu bisa memasukan kode CSS yang ingin kamu tambahkan pada template Blogger kamu. Gunakan live preview yang ada di bawahnya untuk melihat hasil perubahan dari kode yang kamu masukan.

Kalau kamu sudah selesai, klik tombol Terapkan ke Blog yang ada pada sudut kanan atas untuk menyimpan kode CSS.

Menambahkan CSS menggunakan editor Blogger

Caranya hampir sama dengan di atas, masuk dulu ke dashboard Blogger dan pilih menu Template, hanya saja kali ini kita akan menggunakan fitur Edit HTML.

menambahkan-css-dengan-mengedit-html-template-blogger

Secara umum, kode CSS yang ada pada template kamu biasanya berada di antara <b:skin> dan </b:skin>, meskipun mungkin ada beberapa developer yang menggunakan cara lainnya.

Kode ini biasanya berada pada baris-baris awal dari kode template yang kamu gunakan. Kalau kamu tidak menemukannya, kamu bisa menggunakan fasilitas pencarian dengan menekan tombol Ctrl+F.

Kalau kamu sudah menemukannya, kamu akan melihat tanda panah hitam di sebelah kiri. Panah tersebut menunjukan kalau baris itu ada dalam keadaan terlipat/folded, artinya kalau kamu menekan panah tersebut, maka baris yang ada akan terbuka dan memperlihatkan kode CSS yang ada di dalamnya.

menambahkan-css-pada-template-blogger

Untuk mulai menggunakan CSS, klik tanda panah dan masukan kode CSS di antara <b:skin> dan </b:skin>, meskipun ada baiknya kalau kamu memasukannya di baris terakhir tepat di atas </b:skin>.

Kalau kamu menambahkan CSS lewat cara yang pertama, maka kode yang baru juga akan secara otomatis masuk pada baris terakhir. Selain itu memasukan CSS secara manual pada baris terakhir juga akan memudahkan kamu dalam memonitor CSS yang kamu tambahkan.

Namun kalau kamu ingin mengubah kode CSS yang ada sebaiknya kamu mengubah kode yang asli dan tidak menambahkannya lagi agar tidak terjadi penumpukan.

CATATAN: Kalau kamu ingin menjaga konsistensi tampilan blog kamu, ada baiknya kamu menyimpan CSS pada file khusus karena dengan cara ini semua perubahan yang kamu lakukan akan hilang kalau kamu mengganti template yang kamu gunakan.

Saya harap tutorial ini bisa membantu kamu dalam menggunakan CSS untuk memperindah tampilan blog kamu.

Namun jangan lupa untuk selalu membackup template yang kamu gunakan sebelum melakukan perubahan untuk menghindari hal-hal yang tidak diinginkan.

Silahkan tulis pertanyaan dan saran kamu di kolom komentar di bawah ini. Dan kalau pos ini membantu kamu, jangan segan untuk berbagi dengan yang lain ya.

Posted in Blogger.

Tulis komentar kamu di sini...

Be the First to Comment!

Notify of
avatar
wpDiscuz