Belajar CSS Template Blogger Untuk Pemula

Published on Monday, November 2, 2015

Saya membagikan artikel ini bukan berarti saya mahir menggunakan CSS. Namun, saya memiliki sedikit ilmu tentang CSS yang memudahkan bagi blogger pemula yang ingin mengedit templatenya. Di artikel tentang CSS yang pertama kali ini saya hanya ingin menyampaikan bagaimana penerapan CSS pada Template HTML di Blog.

CSS adalah kepanjangan dari Cascading Style Sheets. Kode CSS digunakan untuk membuat tampilan blog. Seperti warna, ukuran, dan model. Mempelajari CSS memang tidak mudah karenna ilmunya bercabang. Saya sendiri masih pemula. Jadi saya hanya memberi tutorial mengedit CSS di template blog. Sebagai contoh, misalkan saya ingin mengedit footer pada blog. Namun sebelum itu, saya akan menyampaikan bagaimana script CSS.

CSS biasanya diawali dengan titik (.) atau pagar (#)

Contoh : .footer-wrapper {width:1240px; height:30px;}

Penjelasan : .footer-wrapper adalah kode CSS untuk footer dan diberi nama footer-wrapper (harus gandeng). Setelah nama CSS pasti diikuti tanda kurung kurawal "{" dan "}". Di dalamnya di isi perintah ukuran, bisa warna, atau batas pinggir, dll.
Contoh diatas adalah lebar 1240 piksel dan tiap variabel harus di akhiri titik koma (;)

Ketika kita membuat kode CSS, tidak akan langsung berfungsi sebelum kita memanggilnya. Jadi, Kode CSS yang berada di atas, biasanya di panggil di bawah dengan kode

<div class='Kode CSS tanpa titik'>

Jadi kode lengkapnya untuk memanggil CSS diatas kurang lebih seperti ini :

<div class='footer-wrapper'>
Copyright © 2015 <a href='http://www.mncolah.com/'>MNColah</a>
</div>

Arti kode diatas adalah kita membuat tulisan Copyright dst dengan ukuran sesuai dengan CSS ".footer-wrapper" yang pengaturannya sudah tertulis di atas. Dan bukan cuma height dan width saja, tetapi ada imbuhan seperti font, ukuran, warna, dll.

Jadi, kode div class digunakan untuk mengelompokkan dan memanggil CSS. Selain div class, ada juga div id. Perbedaanya, pada kode yang dipanggil.

div class untuk memanggil CSS dengan awalan titik (.)
div id untuk memanggil CSS dengan awalan pagar (#)

Nah, sekarang bagaimana cara mengedit CSS pada template Blog?

- Mudah saja. Lihat dulu template kalian, cari bagian yang akan diedit. Misalkan footer. Lihat tulisan apa yang ada di bagian Footer. Misal, tulisan "Copyright". Berarti anda cari tulisan Copyright di Edit HTML menggunakan tombol CTRL+F.

- Lihat kode script di atas copyright. Akan ada tulisan div class atau div id. lihat apa tulisannya.
Misal : div class='footer' berarti anda harus cari .footer
Misal : div id='footer' berarti anda harus cari #footer

- Setelah itu anda otak-atik baik ukuran, warna, maupun jarak. Seperti Padding dan Margin.

NB : - Jika terdapat lebih dari satu class, silahkan coba satu persatu- Jangan lupa back up template terlebih dahulu untuk menghindari kegagalan

Begitulah sedikit ilmu mengenai dasar-dasar dari CSS yang insyaAllah akan saya tambah lagi ilmunya di artikel selanjutnya. Jika ada yang ditanyakan, silahkan langsung menuju ke kotak komentar atau fanspage MNColah. Jika kamu ingin dapat pemberitahuan ketika artikel selanjutnya terbit, silahkan isi email di kolom "Subscrebe" di bawah. Sampai bertemu di artikel selanjutnya. ^^