Cara Membuat Template Blogspot: Dasar Dasar CSS.(Video)

<div style='background-color: none transparent;'></div>
Halo sobat,

Seperti yang telah saya janjikan, hari ini saya akan merelease postbook "Cara Membuat Template Blogspot". Sebelum melangkah jauh dalam pembuatan template blogspot. Anda wajib mengerti tentang CSS. Oleh sebab itu pada pembahasan yang pertama dalam postbook saya, Saya akan membahas tentang "Dasar Dasar CSS".

Tanpa ada CSS anda tidak bisa membuat template dengan desain yang rapih dan juga cepat di akses. Langsung saja ke tutorial.

Dalam CSS ada dua tag yang digunakan dalam membangun template css yaitu ID Tags dan Class Tags. Apa bedanya? Saya akan membahasnya dibawah ini:

Id Tags CSS

Id tags pada CSS biasanya menggunakan tanda "#" pada awalan selector. Contohnya adalah seperti dibawah ini:
#contohid{}
Untuk pemanggilan selector tersebut biasanya menggunakan id="selector" seperti dibawah ini:
<div id="contohid"></div>

Class Tags CSS

Id tags pada CSS biasanya menggunakan tanda "." pada awalan selector. Biasanya penggunaan class ini pada selector yang sudah di kelompokan. Kalau pada blogspot kita akan menemui banyak tags jenis ini. Contohnya adalah seperti dibawah ini:
.contohclass{}
Untuk pemanggilan selector tersebut biasanya menggunakan class="selector" seperti dibawah ini:
<div class="contohclass"></div>
Sekarang saya lanjutkan ke Command CSS. Apa itu?

Command Css

Command CSS adalah perintah yang bisa digunakan dalam bahasa CSS. Ada berbagai macam perintah dalam bahasa CSS yang bisa anda gunakan. Yang sering digunakan dalam membuat template blogspot adalah seperti dibawah ini:

Untuk mempermudah anda dalam belajar, save gambar tersebut ke komputer anda.

Untuk penggunaan Command CSS saya akan memberikan simulasinya seperti dibawah ini:
Copy gambar tersebut supaya anda bisa melihat simulasinya.

Ini video tutorialnya biar anda lebih jelas:



Source Tutorial:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #FFFFFF;
}
p{color:#cccccc;}
-->
</style></head>

<body>
<p>Ini paragraf.</p>
</body>
</html>
Supaya anda lebih jelas lagi tentang penggunaan css, Datang lagi besok pada postingan tentang "Membuat Layout CSS Untuk Blogspot", ada video tutorialnya juga lho. Jangan lupa tinggalkan komentarnya ya.

18 komentar:

Habil DS mengatakan...

mantapp..!! ini yang ku tunggu!!

Blog Seputar Ramadhan mengatakan...

Jazaakallah khair atas tutorialnya. Ditunggu kelanjutannya

Salam ukhuwah

intuts mengatakan...

Sering-sering main kesini sob ya. Semoga allah masih menambah ilmu saya untuk di share ke sahaba di seluruh tanah air.

Viyan Pradita mengatakan...

Mari.. saya ikuti step demi stepnya sob...
Sambil belajar juga neh, salam kenal :)

intuts mengatakan...

Oke sob, salam kenal, ikuti terus blogku ya.

Cheat Game4u mengatakan...

hmm, saya bau tau tentang CSS,, saya mau datang lagi besok.

gembelusernya mengatakan...

masih bingung .mau mulai nya dari mana dulu nih...hehe
maklum ya...newbie

intuts mengatakan...

Ada versi revisinya sob besok versi video, tadi mau upload gak sempet.

maddy mengatakan...

I got to learn about someone new. Great blog..i'm newest follower! Thanks for sharing!

Menu Templates

gunawan mengatakan...

turut berpartisipasi meramaikan bloger Indonesia,sdh di pasang,kirim ke gnwn170@gmail.com

Aron Prabowo (Afif Khoiron) mengatakan...

thx gan atas bantuan updatean knowladgex.....
met berkreasi dan berinovasi
sukses bwat qta para laskar blogger
amin

edibukit.blogspot.com mengatakan...

makasih gan oya kalu boleh sih jagan Command CSS aja saya minta yang php,ajax dan jquery dung mas makasih sebelumnya mas.

Anonim mengatakan...

makasih sekali informasinya, nice sharing

Unknown mengatakan...

gan mohon pencerahan
saya udah ikutin tutorial dari awal
dan kira" menurut saya udah jadi
begitu saya save extensi hml di filenya saya ganti jadi xml
nah begitu di ungga di blog error gan

gmn ya itu

Unknown mengatakan...

salam kenal gan bisa nggak aku pesan Template Blogspot

AYAM KODOK JAKARTA (Dapur Nera) mengatakan...

salam kenal ryo, sy ibu rt yg sedang belajar cara membuat template blog sendiri, spt memasukkan gbr dan background atw pun tampilan lain. apakah ada sekolah khusus atw dimana sy bisa belajar secara onlen, krn sy tidak bisa tinggalkan anak hanya utk belajar ini. mohon masukannya,ditunggu. tks :)

Mohammad Rifqi Sucahyo mengatakan...

Akhirnya ketemu juga, sekian lama cari cari yang seperti ini,. :)
makasih gan tutornya, mesti rutin nih kesini.. :D

Unknown mengatakan...

maaf numpang gan
setahu saya kode itu buat di website kan?kalo buat di blogger gimana caranya ya?
soalnya saya upload yang sudah beres gak bisa walau pun formatnya udah giganti dgn format.xml
kasih solusinya gan kalau sempat trimakasih.

Posting Komentar

Kirimkan komentar yang berbobot untuk membangun kredibilitas anda, Komentar dengan link sampah/spam akan saya hapus.