Cara mengkonversi CSS template bawaan blogger ke CSS standart editing
Sebagian besar pengguna blogspot enggan mengunakan template bawaan karena beberapa alasan dan yang pasti, kebanyakan pengguna cukup sulit dalam memahami kode CSS yang di tanamkan ke dalam templatenya.
Misalnya saja CSS seperti body {font:$(body.font); color:$(body.text.color); background:$(body.background)}. Jika kode-kode tersebut kita ganti secara asal, kemungkinan tampilan blog kita akan terkena imbasnya atau tepatnya, tampilan blog akan berantakan. Tapi lain lagi ceritanya jika seseorang tersebut paham dengan kode CSS secara mendalam, Tapi saya cukup yakin, ini bisa di bilang hanya beberapa orang saja.
Untuk mensiasati hal tersebut, kita dapat mengkonversi kode CSS bawaan ke kode CSS standar editing sehingga nantinya kita akan lebih mudah dalam mengedit dan mungkin saja nantinya kita bisa membuat tampilan yang lebih mewah di banding template yang sudah jadi. Ingat, template yang sudah jadi dan bersifat gratisan hanya menjadi media backlink bagi pembuat template. Tak jarang, script-script yang merugikan pengguna juga di suntikan untuk memantau dan mencari keuntungan.
Tertantang untuk membuat template kreasi sendiri dengan mengandalkan template bawaan dengan kode standar editing? Langsung saja..
Agar nantinya kita tidak terlalu repot dalam memodifikasi kode CSSnya, Edit saja template blog menggunakan editor bawaan. Caranya, masuk ke Template dan pilih tombol Sesuaikan kemudian tata lah blog kamu sesuai keinginan.
Contoh,
Jika di rasa sudah cukup, jangan lupa untuk mengklik tombol Terapkan ke Blog sebelum kembali ke Dashboard blog.
Sekarang kembali ke menu Template dan pilih Edit HTML.
Dan kode-kode ini lah yang membuat bingung sebagian pengguna awam.
Untuk mengkonversi kode CSS di atas, kunjungi alamat blog yang templatenya sudah kamu edit.
Sekarang, tekan Ctrl+U pada keyboard komputer kamu dan rangkuman kode seperti ini biasanya akan tampil pada tab baru.
Tapi ingat, tidak semua kode yang bisa kamu ambil disini, Yang akan kita ambil hanya kode CSSnya saja. Jika ragu, berikut penjelasannya.
Kode yang ada dalam lingkup <style id='page-skin-1' type='text/css'><!-- sampai --></style> adalah kode CSS yang nantinya harus di tempatkan pada lingkup <b:skin><![CDATA[ sampai ]]></b:skin>.
Sedangkan kode CSS yang ada pada lingkup <style id='template-skin-1' type='text/css'><!-- sampai --></style> adalah kode CSS yang nantinya harus di tempatkan pada lingkup <b:template-skin> sampai </b:template-skin>.
Jadi harap di perhatikan dengan seksama.
Untuk menata kode CSSnya agar terlihat lebih rapi, Salin semua kode CSS yang ada dalam lingkup <style id='page-skin-1' type='text/css'><!-- sampai --></style> kemudian buka laman CSS Compressor yang bisa kamu kunjungi pada tautan ini.
Tempel kode CSSnya pada kolom yang tersedia. Sebelum menekan tombol Compress CSS sebaiknya kamu mencentang pilihan Strip all comments untuk menghapus semua komentar yang terselip pada CSS.
Jika sudah, sekarang tekan tombol Compress CSS.
Inilah hasil kompresi CSSnya,
Untuk mempermudah pengeditan nantinya, Sekarang hilangkan kompresi CSSnya dengan memanfaatkan fitur De-compress. Caranya, hilangkan centang pada pilihan Break multiple selector.. dan centang pada pilihan Space after : and,.
Dan jadilah kode CSS yang lebih rapi sekaligus mudah di pahami karena sudah berjalan di CSS standar editing.
Sekarang salin semua kode CSSnya dan ganti semua kode CSS yang ada pada lingkup <b:skin><![CDATA[ sampai ]]></b:skin> di template yang kamu gunakan.
Lakukan juga cara yang sama untuk kode CSS yang ada pada lingkup <style id='template-skin-1' type='text/css'><!-- sampai --></style>. Jangan lupa, kode CSS yang ini harus kamu tempatkan pada lingkup <b:template-skin> sampai </b:template-skin>. Tapi ini hanya pilihan (optional).
Kode yang ada pada lingkup <b:template-skin> sampai </b:template-skin> sebenarnya bisa di gabung dengan kode yang ada pada lingkup <b:skin><![CDATA[ sampai ]]></b:skin>. Namun jika sudah di gabung seperti ini, pastikan kamu telah menghapus semua kode mulai dari <b:template-skin> sampai </b:template-skin> termasuk semua kode yang ada di dalamnya sebelum menyimpan template.
Sekarang, Kode CSS template kamu sudah mudah untuk di pahami dan di edit, tinggal bagaimana kamu dalam mengkreasikannya agar blog tersebut bisa tampil lebih baik. Selamat bermain CSS!
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.