11/18/16

Cara Memasukan Kode CSS di Blogger

Setelah Anda membuat blog di Blogspot, selain Anda akan menulis topik yang Anda sukai, tentu Anda juga pastinya ingin mengedit tampilan template blog Anda sekeren mungkin sesuai dengan keinginan Anda.

Untuk mengedit template blog Anda, Blogspot atau google Blogger hanya mengizinkan tiga bahasa pemograman yaitu; HTML, Javascript, dan CSS.

Ketiga bahasa pemrogaman itulah yang akan Anda temukan di setiap template default blogspot ataupun template custom.

Nah, di artikel ini saya akan berbagi cara menambahkan dan memasukan kode CSS ke template Blogspot. Dan saya akan memulai dengan menjelaskan pengertian tentang Kode CSS, kemudian langsung ke tutorial.

Apa itu Kode CSS?

CSS (Cascading Style Sheet) adalah salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.

Kalau kita mengibaratkan ke dalam proses membangunan sebuah rumah, kode CSS merupakan tahap finishing akhir dari sebuah bangunan seperti pengecatan, pemberian warna, dll.

Itulah sedikit pengertian tentang Kode CSS, untuk lebih lengkapnya silahkan anda membaca pada laman wikipedia tentang CSS.

Setelah Anda mengetahui sedikit pengertian tentang CSS, mari kita lanjutkan ke tutorial menambahkan dan memasukan kode css ke Blogspot.

Ada 2 opsi untuk menambahkan kode CSS ke Blogspot:

Opsi 1: Memasukan Kode CSS ke Blogger melalui editor design template


Editor template blogspot


  1. Pertama-tama silahkan Anda Login ke Blogspot Anda.
  2. Buka dashboard blog Anda. Anda akan masuk ke halaman admin, kemudian klik Tema.
  3. Klik tombol Sesuaikan. Setelah kamu mengklik tombol akan muncul menu-menu dari Editor Template.
  4. Pilih menu Tingkat Lanjut. Geser kursor ke bawah dan kamu akan menemukan bidang Tambahkan CSS.

Cara memasukan Kode CSS di Blogger melalui Editor template.

Untuk mencobanya silahkan Anda salin kode CSS di bawah dan paste-kan ke kolom Tambahkan CSS lalu tekan Enter.

#Attribution1 {
  display:none;
  visibility:hidden
}

Penjelasan: Jika Anda menggunakan template default blogspot, setelah memasukan kode di atas maka tulisan "powerd by blogger" akan hialang atau Widget Attributions pada blog Anda akan hilang.

Terkait: Mengenal Menu-menu pada Halaman Dashboard Blogger.

Opsi 2: Memasukan Kode CSS di Blogger melalui Editor template HTML
Editor template HTML

Untuk menggunakan opsi kedua silahkan ikut langkah berikut:

  1. Login ke Blogspot menggunakan akun Anda.
  2. Pilih menu Tema yang berada di Sidebar sebelah kiri pada dashbord Blogspot.
  3. Selanjutnya klik tombol Edit HTML yang berada di sebelah tombol Sesuaikan dan Anda akan dibawa masuk ke bagian editor halaman.
  4. Untuk menyimpan Kode CSS di bagian halaman editor ini ada 2 cara: 1) Cara pertama kamu harus mencari kode berikut ]]></b:skin>, 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. Setelah di copy paste kode di atas, kamu simpan di pencarian lalu tekan Enter (untuk lebih jelasnya lihat gambar di atas). 2) 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 menggunakan blok style CSS:

Style CSS 1
<style> 
p {font-family:Arial;
font-size:12px;
color:red;
text-align:left; }
</style>


Style CSS 2
<style type="text/css">
p {font-family:Arial;
font-size:12px;
color:red;
text-align:left; }
</style>


Itulah tutorial menambahkan kode CSS ke Blogspot yang saya ketahui. Jika Anda ingin mempelajari kode CSS lebih lengkap dan bahasa pemrograman lainnya, Anda bisa belajar secara online dengan mengunjungi situs www.w3schools.com.

Jika ada kesalahan jangan segan-segan untuk mengoreksi dan semoga saja artikel kali ini bisa membantu Anda.

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.