Kwikku CSS [HANDBOOK]

Versi: 1.2

Handbook ini bertujuan untuk pembelajaran CSS dengan

menggunakan platform Kwikku.com sebagai mesinnya. Perlu diingat
bahwa setiap kode CSS bekerja pada tag CSS Kwikku
2014 | Tim Kwikku Nusantara | Kwikku Media Nusantara | Kwikku.com

Hallo!
Pengen belajar KwikkuCSS? Yuk simak artikel ini sampai selesai, maka kamu akan
BISA! Mempercantik profil kamu, karena disini akan diulas secara lengkap fungsi
dank ode CSS.
Pengertian:
CSS merupakan singkatan dari Cascading Stylesheet, atau lebih jelasnya kode yang
digunakan untuk mengubah tampilan suatu website, CSS adalah salah satu
stylesheet paling popular dikalangan pembuat web, ada banyak stylesheet diluar
sana tetapi CSS merupakan yang paling banyak digunakan, bahkan Kwikku sendiri
menggunakan CSS untuk mengatur tampilannya.
Kwikku disini menggunakan stylesheet CSS, jadi untuk mengubah bentuk profil
Anda yaitu dengan menggunakan kode dari CSS, pada Handbook ini Anda akan
dituntun untuk memahami kode CSS yang dipakai untuk mengubah tampilan profil
Anda seperti apa yang Anda inginkan. Mulai dari perkenalan sampai contoh
menggunakan kode CSS Kwikku.

BAB I: PENGENALAN
1. Cara mengubah warna background kotak status
Untuk mengubah kotak status pada profil Anda yaitu dengan menuliskan kode
seperti ini pada kotak CSS yang tersedia di Kwikku
.sts_bd{background-color: red;}
Setelah Anda menulis kode tersebut, maka warna kotak status akan berubah
menjadi merah, warna tersebut bisa Anda ganti sesuka hati dengan nama warna
dalam bahasa inggris atau menggunakan kode HEXA, kode HAXA seperti #00000
untuk warna hitam, untuk mencari kode haxa bisa melakukan pencarian di Google
dengan kata kunci Color Haxacode
Hasil dari kode diatas adalah:

2. Menambah bayangan pada kotak status

Untuk menambahkan bayangan pada kotak status yaitu dengan menuliskan kode
.sts_bd{box-shadow: 0px 0px 10px black;}
Atau dengan mengubah kode diatas menjadi
.sts_bd{background-color: red; box-shadow: 0px 0px 10px black;}
Apabila Anda mengubah kode diatas, usahakan untuk memisahkan antara kode css
dengan tanda ;
Hasil dari kode diatas adalah

Anda dapat mengubah ukuran bayangan, seperti ini

box-shadow: 0px 0px 10px black;

-angka 0 pertama yaitu mengubah posisi bayangan dari kiri ke kanan, jadi kalau
Anda mengubah 0 pertama menjadi 10px maka bayangan akan ke kiri, kalau -10px
maka akan ke kanan

-angka 0 kedua yaitu mengubah posisi bayangan dari atas ke bawah, jadi kalau
Anda mengubah 0 pertama menjadi 10px maka bayangan akan ke bawah, kalau
-10px maka akan ke atas

-angka 0 ketiga yaitu membuat ukuran bayangan, apabila Anda mengubahnya

menjadi 100px maka bayangan akan menjadi sangat besar
-black, atau warna gambar, Anda bisa mengubah warna gambar tersebut sesuka
hati
3. Mengubah background status menjadi gambar
Untuk mengubah background kotak status menjadi gambar yaitu dengan menulis
kode seperti ini
.sts_bd{background-image: url(alamatgambar.png);}
Atau dengan mengubah kode diatas menjadi
.sts_bd{background-color: red; box-shadow: 0px 0px 10px black; backgroundimage: url(alamatgambar.png);}

Alamatgambar.png adalah lokasi Anda meletakan alamat gambar Anda, alamat

gambar contohnya seperti
http://www.inicontohsaja.com/gambarsaya.jpg
nah alamat tersebut bisa Anda masukan kedalam kode css ubah background tadi
menjadi
background-image: url(http://www.inicontohsaja.com/gambarsaya.jpg);}
Perlu diketahui bahwa, alamat gambar diatas hanyalah contoh dan tidak dapat
digunakan, silahkan memasukan alamat gambar Anda sendiri
4. Cara mengubah font seluruh halaman profil Anda
Untuk mengubah jenis font, Anda bisa mengubahnya dengan menulis kode baru
body{font-family: arial;}
arial, adalah nama font! Anda bisa menulis nama font yang Anda inginkan,
usahakan nama font standar yang sudah tersedia

5. Mengubah warna background profil Anda

Untuk mengubah warna background profil Anda yaitu dengan menulis kode seperti
ini
body{background-color: red;}
atau dengan mengubah kode yang Anda tulis diatas menjadi
body{font-family: arial; background-color: red;}
6. Mengubah background profil menjadi gambar
Untuk mengubah background profil Anda menjadi gambar yaitu
body{background-image: url(alamatgambar.png);}
atau dengan mengubah kode yang Anda tulis diatas menjadi
body{font-family:
arial;
background-color:
red;
url(alamatgambar.png);}

background-image:

BAB II: TAG

Setelah apa yang telah disampaikan diatas dan Anda telah memahaminya, maka
pada BAB ini hanya dijelaskan tag apa saja yang berlaku di Kwikku untuk diubah
atau dikostumisasi.
1. Menu profil
Untuk mengubah menu pada profil gunakan tag
#menuScn{ tulis kode css disini }

2. Mngubah pilihan pada menu profil

Untuk mengubah pilihan pada menu profil gunakan tag
.bar_mob_op{ tulis kode css disini }

3. Mengubah tombol
Untuk mengubah tombol pada profil Anda gunakan tag
.btn_blue{ tulis kode css disini }

4. Mengubah header element

Untuk mengubah header element gunakan tag
.area_title{ tulis kode css disini }

5. Mengubah body element

Diatas adalah mengubah header element, disini Anda akan mengubah body
element, dengan menggunakan tag
.sr_path{ tulis kode css disini }

6. Mengubah pilihan status

Untuk mengubah pilihan status, maka gunakan tag
.sts_op{ tulis kode css disini }

7. Mengubah garis vertikal pada Status

Untuk mengubah garis vertikal pada status, maka gunakan tag
.sts_line{border-left: 5px solid red;}

8. Mengubah bulatan jenis status pada garis vertikal status

Untuk mengubah warna bulatan yang ada pada garis vertikal status yaitu dengan
menggunakan tag
.sts_info{background-color: red;}
Karena dibulatan tersebut memiliki bayangan, maka untuk menggantikan bayangan
tambahkan kode box-shadow: 0 0 0px 2px #D2EEFB; pada .sts_info , sehingga
menjadi
.sts_info{background-color: red; box-shadow: 0 0 0px 2px blue;}

Terlihat bahwa gambar diatas, lingkaran berwarna merah dengan bayangan biru
9. Mengubah dropdown pilihan
Dropdown pilihan merupakan menu turunan, untuk mengubahnya gunakan tag
.mDropOp{background-color: red;}
Sama seperti penjelasan pada nomor 8, bahwa menu dropdown juga memiliki
bayangan, untuk menggantikannya sama seperti diatas, maka akan diubah menjadi
.mDropOp{background-color: red; box-shadow: 0 0 7px green;}

10.
Mengubah pilihan pada dropdown menu
Seletah penjelasan pada nomor 9, disini kita akan mengubah pilihannya dengan tag
sebagai berikut
.mDropSel:hover{background-color: yellow;}
Maka hasilnya akan seperti

11.
Mengubah latar belakang kotak status
Perlu diketahui bahwa ini berlaku disemua menu pada profil mulai dari, garis waktu,
artikel, foto dan lainnya. Untuk mengubahnya maka menggunakan kode
.body_onbodybig{background-color: red;}
Maka hasilnya akan seperti ini

12.
Mengubah latar belakang album
Ketika Anda ingin mengubah latar belakang album, maka kode yang harus Anda
masukan adalah
.fprof_albcnv{background-color: red;}
Maka hasilnya akan seperti ini

13.
Mengubah latar belakang pada Artikel
Ketika Anda ingin mengubah latar belakang pada Artikel yaitu dengan menyunting
kode dibawah ini sesuai dengan kebutuhan Anda
.pn_canvas{background-color: red;}
Maka hasilnya akan berubah menjadi seperti dibawah ini

14.

Mengubah mengikuti Anda

Tahu kan tulisan ini, yang awalnya berwarna hijau. Jika Anda ingin mengubahnya
maka gunakan kode berikut ini
.subme{background-color: red;}
Maka hasilnya akan seperti ini

Dengan border berwarna hijau, jika Anda ingin mengubah warna border bisa
menambahkan border: 3px solid white; maka bordernya akan berwarna putih,
contoh mengubahnya seperti ini
.subme{background-color: red; border: 3px solid white}
Maka hasilnya seperti ini

INFO PENTING
1. :HOVER

Setiap tag CSS, apabila diberi :hover pada tag maka css akan berfungsi ketika
kursor melewati element yang kita kehendaki, sebagai contoh
.sts_bd:hover{background: pink;}
Tag .sts_bd adalah tag status, ketika kursor berada diatas status maka warnanya
backgroudnya akan menjadi warna pink.
Awal, sebelum kursor diatas status

Setelah kursor diatas status maka warnanya akan menjadi pink

2. :ACTIVE
Sama seperti :hover, hanya saja :active ini berfungsi ketika element tersebut di klik,
jika hanya diarahkan kursor maka element tersebut tidak akan berubah, tetepi
kalau kursor di klik diatas element tersebut barulah element tersebut berubah, cara
penggunaan
.sts_bd:active{background: pink;}
Fungsi dan kegunaannya sama seperti :hover
Kode CSS:
width : kode ini digunakan untuk mengubah ukuran panjang, cara
penggunaan yaitu width: 100p; ukuran 100px atau piksel bisa diganti sesuka
INFO
hati
Untuk menulis kode css pada tag diatas, tuliskan kode css didalam kotak yang telah
telah tersedia yaitu di { tulis kode css disini }
height : kode ini digunakan untuk mengubah ukuran tinggi, cara penggunaan
Contoh
yaitu width: 100px; ukuran 100px atau piksel bisa diganti sesuka hati
.sts_op{background-color: blue;}
background-color : kode ini digunakan untuk mengubah warna background,
Maka warna pilihan status akan menjadi biru
cara penggunaan yaitu background-color: red; tulisan red bisa diganti
dengan nama warna apapun dalam bahasa inggris atau kode hexa(#0000)
background-image : kode ini digunakan untuk membuat background
Untuk
kode cssnya cara
sama seperti
yang telah dijelaskan
pada
BAB I, hanya saja
bergambar,
penggunaan
yaitu
background-image:
berbeda
tag. Atau Anda dapat mempelajari
kode CSS
pada
kotak dengan
dibawah alamat
ini
url(alamatgambar.png);
alamat gambar
bisa
diganti
gambar sesuka Anda
box-shadow : yaitu kode untuk menamba bayangan, cara penggunaan yaitu
box-shadow: 0px 0px 0px black; angka 0px pertama yaitu membuat
bayangan dari kiri ke kanan, 0px kedua yaitu membuat bayangan dari atas
kebawah, 0px ketiga yaitu membuat ukuran bayangan, dan black adalah
warna bayangan

BAB III: CONTOH CSS YANG SUDAH JADI

Pada bab ini, akan di tulis beberapa CSS yang telah jadi sebagai contoh dan
langsung dapat digunakan
1. Mengubah warna menu profil menjadi keren
Kodenya sebagai berikut
.bar_mob{background-image:
-webkit-gradient(linear,left
bottom,from(#93C1FF),to(#44B4FF));}

top,left

2. Mengubah warna menu utama menjadi keren

Menu utama adalah menu paling atas untuk berpindah halaman profil dan beranda,
kodenya seperti
#menubar{background-image:
-webkit-gradient(linear,left
top,left
bottom,from(#69B1E5),to(#005690)); background-color: #005690; box-shadow:
inset 0 -2px 0 #005690;}
Untuk mengubah menu utama, gunakan tag
#menubar{ kode css disini }
3. Dibawah ini ada satu contoh theme yang bisa Anda gunakan
langsung
.kwik_PPoP{margin: -35px 0px 0px 20px;}
.bar_mobP {width: 829px; padding-left: 0px;}
body{background-color: rgb(75, 167, 189);}
.profile_oPCB {background: linear-gradient(to bottom,rgba(22, 22, 22, 0) 0%,rgba(0,
115, 142, 1) 100%);}
#menubar {background-image: -webkit-gradient(linear,left top,left
bottom,from(#69B1E5),to(#005690)); background-color: #005690; box-shadow:
inset 0 -2px 0 #005690;}
.area_title{background-image: -webkit-gradient(linear,left top,left
bottom,from(#FFFFFF),to(#98D6FF));}
.sr_path{background-color: rgb(219, 237, 255);}
.bar_mobP{background-image: -webkit-gradient(linear,left top,left
bottom,from(#93C1FF),to(#44B4FF));}
.sts_bd {background-color: rgba(255, 255, 255, 0.62);}
.sts_line {border-left: 5px solid rgba(255, 255, 255, 0.31);}

.bsdw {box-shadow: 0 0 0 0px #D2EEFB; border-bottom: 0px solid #C3E9FD;}

.pn_canvas{background-color: rgba(255, 255, 255, 0.62);}
.fprof_albcnv{background-color: rgba(255, 255, 255, 0.62);}
.ush{background-color: rgba(255, 255, 255, 0.62);}
Hasil dari kode diatas adalah

Nah dari penjelasan diatas, penulis harap Anda telah paham tentang cara
mengubah profil Kwikku sesuai dengan kebutuhan Anda.

Siap? Yuk ciptakan KREASI profil

Anda sebagus mungkin dari
SEKARANG!
Semakin bagus profil Anda semakin
banyak kesempatan dipromosikan
diberbagai acara oleh Tim Kwikku

Kritik dan saran mengenai handbook ini, silahkan sampaikan ke

FEEDBACK Kwikku.com