11/18/16

Cara Memasukan Kode CSS di Blogger

Hari ini saya akan membahas bagimana cara memasukan kode CSS di Blogger atau BlogspotUntuk memasukan kode css di blog Blogger atau Blogspot sendiri ada 3 cara dan itu sangat mudah. Apa itu kode CSS ? mungkin pertanyaan ini yang ada di benak sobat semua. maka saya akan menjelaskan sedikit tentang apa itu Kode CSS.

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke  CSS3.

Itulah sedikit pengetahuan tentang Kode CSS, untuk lebih lengkapnya silahkan kamu searcing sendiri melalui mbah google, atau jika kamu ingin mempelajarinya lebih jauh, silahkan kunjung www.w3schools.com disana tutorial-nya lengkap. tanpa banyak basa-basi lagi berikut di bawah ini tutorialnya, simak baik-baikya.


Memasukan Kode CSS di Blogger melalui editor perancangan template


Pertama-tama silahkan kamu login ke blog kamu dan buka dashboard blognya setelah kamu membuka dashboard blog, maka kamu akan masuk ke halaman admin setelah di halaman admin anda tinggal pilih Template lalu pilih sesuaikan untuk lebih jelasnya silahkan anda lihat gambar di bawah ini :

Cara memasukan Kode CSS di Blogger melalui Editor template.

Setelah kamu menekan tombol sesuaikan akan muncul gambar seperti di bawah ini. jika sudah muncul gambar seperti di bawah maka kamu pilih tingkat lanjut lalu secroll ke bawah cari Tambahkan CSS lihat pada gambar untuk lebih jelasnyayang di tunjukan oleh angka no 4 itu tempat untuk memasukan kode CSS-nya.

Cara memasukan Kode CSS di Blogger melalui Editor template.

Untuk mencobanya silahkan kalian copy paste kode di bawah ini dan coba masukan setalah kamu masukan lalu tekan enter.

#Attribution1 {
  display:none;
  visibility:hidden
}

Keterangan : Jika anda menggunakan template default Blogger setelah memasukan kode di atas maka Attribution pada blog anda akan hilang. Attribution itu tulisan "powerd by blogger" atau "diberdayakan oleh blogger" yang ada di bawah blog.

Ringkasan tutorial pertama :
  • Pertama anda login ke blog.
  • Kedua setelah ada di halaman admin blog kalian pilih "template" yang di tunjukan oleh angka nomer 1 pada gambar di atas. jika belum tau tentang halaman admin blog silahkan kalian baca di sini.
  • Ketiga pilih "sesuaikan" yang di tunjukan oleh angka nomer 2 pada gambar di atas. 
  • Keempat pilih "tingkat lanjut" yang di tunjukan oleh angka nomer 3 pada gambar di atas.
  • Kelima scrol kebawah lalu cari "tambahkan css" setelah menemukan lalu masukan kode css anda di area yang di tunjukan oleh angka nomer 4 pada gambar di atas dan jangan lupa tekan enter untuk melihat perubahan kode yang anda masukan..
  • Terakhir jika anda telah memasukan Kode CSS jangan lupa untuk menyimpannya. lihat pada gambar di atas yang di tunjukan oleh angka nomer 5.
Kode CSS yang kamu masukan jika kamu menyimpannya maka akan otomatis berada di atas "]]></b:skin>". di mana itu kode "]]></b:skin>" ini ? mungkin pertanyaan ini yang ada di benak kamu sekarang. untuk menemukan kode tersebut kamu bisa simak tutorial yang ke dua dibawah ini.

Memasukan Kode CSS di Blogger melalui Editor template HTML

Untuk tutorial kedua ini langkah-langkanya sama dengan tutorial pertama, cuman setelah anda mengklik "Template" di sebelah tombol "Sesuaikan" yang anda pilih tadi. ada satu lagi tombol yang tulisannya " Edit HTML",  setelah anda menemukan-nya klik pada tombol tersebut lalu anda akan masuk ke bagian editor halaman, silahkan anda lihat gambar di bawah untuk lebih jelasnya.

Editor template HTML

Untuk menyimpan Kode CSS di bagian halaman editor ini ada 2 cara. Untuk cara pertama kamu harus mencari kode ini ]]></b:skin> yang kamu cari-cari tadi, untuk mencari kode tersebut agar lebih mudah kalian bisa klik sembarang pada kolom editor halaman lalu tekan "Ctrl+F" lalu masukan kode yang kamu cari tadi. copy paste kode di bawah biar kamu lebih mudah.

]]></b:skin> 

Setelah di copy paste kode di atas, kamu simpan di pencarian lalu tekan Enter, untuk lebih jelasnya lihat gambar di atas. 

Jika kamu belum memasukan kode yang saya kasih pada tutorial pertama di atas maka silahkan coba memasukan kode tersebut tepat di atas kode ini  "]]></b:skin>"  klik enter ter lebih dahulu setelah kode "}" atau tepat di belakang kode tersebut agar memberi ruang biar kelihatan rapih kode yang kamu masukan (atau biar enggak menyatu dengan kode lain). karena kalau menyatu bisa menyebabkan error atau kode tidak berjalan.

Untuk cara ke dua memasukan kode CSS di halaman editor HTML biasanya menambahkan sebuah blok style atau stylesheet biasanya kode yang di awali dengan styleshet di simpan di bawah kode "<head>" atau sebelum tag penutup "</head>" . tapi kadang juga di masukan di luar area tersebut tergantung dengan kegunaan kode tersebut.

contoh 1 dengan menggunakan blok style :
<style> 
p {font-family:Arial;

font-size:12px;

color:red;

text-align:left; }
</style>


contoh ke 2 :
<style type="text/css">

p {font-family:Arial;

font-size:12px;

color:red;

text-align:left; }

</style>


Silahkan kamu mempelajari terlebih dahulu untuk memasukan kode css untuk cara kedua yang menggunakan blok style ini,  karena jika kamu salah memasukan satu hurup saja maka kode tidak akan berjalan. 

Jika ada kesalahan jangan segan-segan untuk mengoreksi dan semoga postingan kali ini bisa membantu kalian. jika ada yang kurang jelas atau kurang paham silahkan tanyakan di kolom komentar di bawah.  

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.