Pada blog ini, banyak terdapat tutorial untuk mengubah tampilan Blogger dan membuat blog kamu tampil beda dari yang lainnya. Salah satunya adalah dengan menggunakan CSS pada Blogger. Namun setiap saya membuat panduan tersebut, saya selalu mengulang penjelasan yang sama. Di mana saya harus meletakan kode tersebut?[adinserter block=”1″]
Blogger adalah platform blogging gratis yang bisa membantu kamu membuat blog dengan mudah. Meski begitu ada banyak kekurangan seperti masalah tampilan yang cukup sulit untuk diubah bila dibandingkan dengan WordPress.
Bila kamu mau sedikit belajar dan berusaha, tampilan pada Blogger dapat diubah dengan mudah dengan CSS. Meski tidak semua tampilannya bisa kamu modifikasi, CSS bisa membantu kamu mempercantik dan membuat blog kamu tampil unik.
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.
Daftar Isi
Cara Menggunakan CSS pada Blogger
Ada dua cara untuk memasukan kode CSS ke dalam template Blogger yang kamu pakai. Kamu bisa menggunakan CSS melalui menu kustomisasi template Blogger atau menambahnya 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.
1. Menambahkan CSS menggunakan template Blogger
Caranya cukup mudah, cukup masuk ke dashboard Blogger dan pilih menu TEMPLATE » SESUAIKAN.
Kemudian pada menu TINGKAT LANJUT, kamu akan melihat pilihan TAMBAHKAN CSS yang biasanya berada di urutan paling bawah.
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.[adinserter block=”1″]
2. 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.
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.
Untuk mulai menggunakan CSS, klik tanda panah dan masukan kode CSS di antara code <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.
Penutup
Saya harap tutorial ini bisa membantu kamu dalam menggunakan CSS pada Blogger 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.
keren mas informasi nya
terimakasih,sangat bermanfaat sekali untuk blogger pemula seperti saya
artikel yang bagus dan bermanfaat, sekali lagi terimaksih untuk sharingnya
postingan yang bermanfaat…css adalah hal menarik buat saya…
silahkan kawan kawan blogger mampir di wahyuddinrosi.blogspot.com
bagus banget itu ajalah terima kasih
saya lagi mencari kode css nya… tapi di sini saya mendapat cara yg mudah untuk memasukkan kode css nya. terima kasih…
Iya, lumayan banyak yang request cara belajar CSS-nya, mudah2an nanti kesampean bikin yah, soalnya materinya banyak mulai dari Inspect Element, HTML dasar, baru CSS-nya.
Menarik sekali , sayangnya saya tidak tahu membuat CSS mas …
Iya, dah banyak yang request ternyata, mungkin nanti diprioritaskan tutorialnya
Ok siap boss
Sebenarnya saya mencari artikel mengenai fungsi dari setiap detail CSS. Ya walaupun gak diterangin disini, setidaknya dengan komentar disini bisa saling silaturahim antara blogger mas 🙂
Oke, terima kasih masukannya. Masuk draft dulu kalau gtu.
Keren gan pembahasannya, salam dari saya FajarYusuf
Terima kasih atas kunjungannya, salam kenal juga mas Fajar Yusuf 🙂
Terimakasih informasi nya, semoga saya bisa praktek kan dalam proses belajar Web, CSS. Artikel ini membantu buat saya.
Alhamduliillah kalau artikel ini bisa membantu blogger lainnya, terima kasih atas kunjungannya yah mba!
Terimakasih buat tutorial input css blogger sangat membantu sekali .salam kenal saya masih baru dlm dunia blog .jika ada waktu mampir ke my blog bimahartono . saya akan senang bila bisablog dpt memberikan masukan untuk blog saya masih berantakan maklum masih baru.
Hi mas Bima Hartono, salam kenal juga
Kalau meihat tampilan blognya memang terlihat masih berantakan yah mas 🙂 Langkah pertama mungkin cari tema Blogger yang bagus dulu. Saya kira pilihannya sudah lumayan banyak. Setelah itu mas Bima bisa mengaplikasikan CSS yang mas bima pelajari untuk mengubah tampilan default template Blogger agar lebih sesuai dengan keinginan mas Bima.
Itu saja saran saya dulu, kalau nanti ada kesulitan pada CSS-nya, mas Bima boleh kok’ tanya-tanya di sini.
Makasih banyak mas syafiq telah bersedia mampir di blog saya dan memberikan saran yang sangat baik serta berguna bagi saya.untuk saat ini belum ada yg mau saya tanyakan lagi ,maklum lg buat artikel singkat he he .salam sukses buat mas syafi dan teman blog lainnya.
Sama-sama mas Bima, feel free to ask.
BTW dah ganti tema yah? Lebih bagus yang sekarang.
Terimakasih mas syafiq,itu juga karena saran dari mas syafiq dan saran mas wawan-dewa ilmu he he . maaf agak terlambat saya membalasnya. hanya saja saya gunakan template greatmag ini ada beberapa konten yang dihidden .kemarin sih sempat saya custom tetapi rusak tema tidak dapat ditampilkan.
terpaksa saya kembalikan pengaturan standar.
Terimakasih mas atas kontennya
Sudah menjawab beberapa pertanyaan yg menjadi masalah saya. Oiya menurut mas, taunya kalo css itu tinggal ditambahkan atau mengubah css bawaan template itu bagaimana ya mas ? Suka bingung mana yg harus di hapus lalu diganti dan mana yg seharusnya tidak di hapus. Suwun 🙂
Pada banyak kasus modifikasi CSS, kita hanya perlu menambahkan saja tanpa perlu menghapus kode CSS yang lama. Selain beginner-friendly, kita juga lebih mudah melihat dan mengatur perubahan kode CSS yang kita lakukan.