Hallo Sobat Kwikkers Semuanya!

Yang ada di sana mana teriakkannya..? Yeeee,,,!!

Yang ada di sini mana suaranya,,?? Yaaaa..!!
Yang ada di sini yang tadi baru saja ke sana mana tepuk tangannya? Prok prok
prok..
Salam sayang Kwikku sampaikan teruntuk sobat semuanya. Wee, yang udah
sering mainan Kwikku pasti tahu dong fitur kustomisasi via CSS? Yup bener sekali,
Kwikku menyertakan

kustom profil

menggunakan

fitur CSS dengan

tujuan

mendukung cipta, rasa dan karsa para sobat Kwikkers. Kwikku menyadari
bahwasanya setiap pribadi adalah unique person Ceile, bahasanya itu loh.. :D
Maka dari itu, untuk memenuhi sisi kreatif pengguna Kwikku, Tim Kwikku
membangun platform yang bisa dikreasikan sebebas mungkin.
Nah, buat sobat Kwikkers yang pengen membuat sesuatu yang unik dan
sesuatu yang mampu menggambarkan siapa jati diri sobat. Yuk simak panduan
sederhana ini sampai selesai. Bagi yang baru tahu apa itu CSS, hal pertama yang
perlu diingat adalah yakinkan diri sobat bahwa sobat pasti BISA! Yee,, yip yip yee..!!
Disimak ya, berikut adalah rincian cara mempercantik Kwikku dengan CSS. Lho-lho
Om, ane kan cowok. Iya deh, mempercantik dan memperganteng profil Kwikku
sobat. :D
Pengertian:
CSS merupakan singkatan dari Cascading Style Sheet, atau lebih jelasnya kode
yang digunakan untuk mengubah tampilan suatu website. CSS adalah salah satu
stylesheet

paling

populer

dikalangan

pembuat

web.

Sebelum

Negara

api

menyerang Ada banyak stylesheet di luar sana tetapi CSS tetap yang paling banyak
digunakan. Bahkan banyak penguna Kwikku yang menggunakan CSS. Yaeyalah, kan
emang disediakan fiturnya. :D
Dalam pengembangan platform www.kwikku.com Tim Kwikku juga menggunakan
stylesheet CSS. Jadi jikalau sobat ingin mengubah ataupun mengatur ulang bentuk
profil, sobat musti dan kudu menggunakan CSS. Pada Handbook ini, sobat Kwikkers
akan dituntun secara santai dalam memahami kode CSS yang dipakai untuk

mengubah tampilan profil. Mulai dari pengenalan tahap dasar sampai yang nulis
capek contoh menggunakan kode CSS Kwikku. :D

BAB I: PENGENALAN
1. Cara mengubah warna background kotak status
Untuk mengubah kotak status pada profil sobat, tulis kode berikut pada kotak
CSS di Kwikku.
.sts_bd{background-color: red;}
Setelah sobat menulis kode tersebut, maka warna kotak status akan berubah
menjadi merah. Warna tersebut bisa sobat ganti sesuka hati dengan nama warna
dalam bahasa inggris (misal blue, black, green de el el), atau sobat juga bisa
menggunakan kode heksa (seperti #00000 untuk warna hitam). Untuk mencari
kode hexa bisa melakukan pencarian di Google dengan kata kunci Color Hexacode
Hasil dari kode di atas adalah:

2. Menambah bayangan pada kotak status

Berikut adalah kode CSS untuk menambahkan bayangan pada kotak status :
.sts_bd{box-shadow: 0px 0px 10px black;}
Atau dengan mengpmbinasikan kedua kode di atas seperti berikut :
.sts_bd{background-color: red; box-shadow: 0px 0px 10px black;}
Usahakan memisahkan setiap tag CSS dengan tanda ; (titik koma)

Hasil dari kode di atas adalah

Sobat juga dapat mengubah ukuran bayangan, seperti ini

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

Angka 0 pertama berfungsi mengubah posisi bayangan dari kiri ke kanan

menggunakan satuan piksel (px), jadi kalau sobat mengubah 0 pertama
menjadi 10px maka bayangan akan ke kiri. Jika sobat ingin memindahkan
bayangan ke arah kanan maka ubah angka 0 pertama menjadi -10px

Angka 0 kedua berfungsi mengubah posisi bayangan dari atas ke bawah. Jadi
jika sobat ingin mengubah 0 pertama menjadi 10px maka bayangan akan ke
bawah. Jika sobat ingin mengubah posisi bayangan ke atas maka ubah 0
kedua menjadi -10px

Angka 0 ketiga berfungsi untuk mengubah ukuran bayangan. Apabila sobat

merubahnya menjadi 100px maka bayangan akan menjadi sangat besar

Black kode CSS black di atas memiliki maksud membuat bayangan yang
berwarna hitam. Sobat bisa mengubahnya sesuka hati, Baik dengan nama
warna maupun kode heksa.

3. Mengubah background status menjadi gambar

Berikut adalah kode CSS untuk mengubah background kotak status menjadi gambar
:
.sts_bd{background-image: url(alamatgambar.png);}
Atau dengan mengombinasikan kode-kode di atas seperti berikut
.sts_bd{background-color: red; box-shadow: 0px 0px 10px black; backgroundimage: url(alamat_gambar.png);}
alamat_gambar.png adalah alamat website dari gambar yang sobat inginkan.
Alamat gambar terlihat seperti berikut :
http://www.kwikku.com/gambar_saya.jpg
nah alamat tersebut bisa Anda masukan kedalam kode css ubah background tadi
menjadi
background-image: url(http://www.kwikku.com/gambar_saya.jpg);}
Perlu diketahui bahwa alamat gambar di atas hanyalah contoh saja dan
tidak dapat digunakan. Silahkan memasukan alamat gambar sobat sendiri
4. Cara mengubah font seluruh halaman profil Anda
Font memiliki peranan dalam menjadikan tampilan profil sobat lebih menarik dan
wow.
Berikut adalah kode CSS untuk mengubah jenis font.
body{font-family: arial;}
Dalam contoh di atas menggunakan jenis font arial. Sobat bisa mengganti nama
font yang sobat inginkan. Usahakan pilih nama font standar yang sudah tersedia
misal : Times New Roman, Kristen ITC dll.

5. Mengubah warna background profil Anda

Untuk mengubah warna background profil sobat, bisa menggunakan kode berikut
body{background-color: red;}
atau dengan mengombinasikan kode-kode di atas menjadi :
body{font-family: arial; background-color: red;}
6. Mengubah background profil menjadi gambar
Untuk mengubah background profil, sobat dapat menggunakan kode berikut :
body{background-image: url(alamat_gambar.png);}
atau dengan mengubah kode yang Anda tulis diatas menjadi
body{font-family:

arial;

url(alamat_gambar.png);}

background-color:

red;

background-image:

BAB II: TAG

Setelah sobat memahami apa yang disampaikan di atas, maka secara tidak
langsung sobat telah berhasil membuat social media sendiri. Yee.. :D Tuh kan, orang
Indonesia juga bisa bikin konten sendiri. Selanjutnya, di BAB ini akan dijelaskan tag
apa saja yang berlaku di Kwikku. Tag-tag tersebut sangat membantu saat sobat
ingin mengustomisasi profil. So lets disimak.
1. Menu profil
Untuk mengubah menu pada profil gunakan tag :
#menuScn{ tulis kode css di sini }

2. Mngubah pilihan pada menu profil

Untuk mengubah pilihan pada menu profil, seobat bisa menggunakan tag :
.bar_mob_op{ tulis kode css di sini }

3. Mengubah tombol di Kwikku

Untuk mengubah tombol pada profil, sobat bisa menggunakan tag :
.btn_blue{ tulis kode css di sini }

4. Mengubah header element

Untuk mengubah header element, sobat bisa menggunakan tag :
.area_title{ tulis kode css di sini }

5. Mengubah body element

Di atas adalah contoh mengubah header element, berikut akan dijelaskan
bagaimana

mengubah

body

element.

Sobat

bisa

merubahnya

dengan

menggunakan tag :
.sr_path{ tulis kode css di sini }

6. Mengubah pilihan di status

Untuk mengubah pilihan apa saja yang ada di kotak status, sobat bisa
menggunakan tag :
.sts_op{ tulis kode css di sini }

7. Mengubah garis vertikal pada Status

Garis vertikal ini memiliki maksud sebagai garis waktu yang telah sobat lalui
bersama

Kwikku.

Untuk

mengubah

menggunakan tag
.sts_line{border-left: 5px solid red;}

garis

vertikal

pada

status,

sobat

bisa

8. Mengubah bulatan di bawah foto pada garis vertikal status

Bulatan yang berada di bawah foto tersebut memiliki maksud membedakan setiap
hal yang dibagikan pengguna berdasarkan jenisnya. Saat sobat berbagi foto, status
ataupun artikel akan memunculkan gambar yang berbeda. Untuk mengubah warna
bulatan tersebut, sobat bisa 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;}

Bagaimana mudah dan seru bukan? Terlihat bahwa gambar di atas memiliki
lingkaran berwarna merah dengan bayangan biru.
9. Mengubah menu dropdown pengaturan
Menu dropdown pilihan merupakan menu untuk memunculkan pilihan setting.
uUntuk mengubahnya sobat bisa memanfaatkan tag :
.mDropOp{background-color: red;}
Sama seperti penjelasan pada nomor 8, bahwa menu dropdown juga memiliki
bayangan. Gunakan kode CSS berikut untuk meunculkan bayangan tersebut :

.mDropOp{background-color: red; box-shadow: 0 0 7px green;}

10.

Mengubah pilihan pada menu dropdown

Setelah memahamo penjelasan pada nomor 9, di sini kita akan mengubah

pilihannya dengan tag sebagai berikut
.mDropSel:hover{background-color: yellow;}
Maka hasilnya akan seperti ini:

11.

Mengubah latar belakang kotak status

Perlu diketahui bahwa latar belakang yang akan kita ubah ini berlaku di semua
menu pada profil. Mulai dari, garis waktu, artikel, foto dan lainnya. Untuk
mengubahnya sobat bisa menggunakan kode :
.body_onbodybig{background-color: red;}
Hasilnya akan seperti ini

12.

Mengubah latar belakang album

Ketika sobat ingin mengubah latar belakang album, maka kode yang harus sobat
masukan adalah
.fprof_albcnv{background-color: red;}
Hasilnya akan seperti ini

13.

Mengubah latar belakang pada Artikel

Selanjutnya akan dijelaskan cara mengubah latar belakang pada Artikel. Berikut
adalah kode yang bisa sobat gunakan
.pn_canvas{background-color: red;}
Maka hasilnya akan berubah menjadi seperti dibawah ini

14.

Mengubah Tulisan Mengikuti Anda

Sobat sudah pada tahu kan ada tulisan ini? Yup,tulisan dekatnya tombol yang
awalnya berwarna hijau. Jika sobat kebelet banget pengin mengubahnya maka
gunakan kode berikut :
.subme{background-color: red;}
Hasilnya akan seperti ini

Kode ditas menggunakan border berwarna hijau. Jika sobat ingin mengubah warna
border menjadi putih bisa menambahkan border: 3px solid white; Berikut contohnya
:

.subme{background-color: red; border: 3px solid white}

Eng ing eng, Hasilnya adalah . . . . Taraaa :D

INFO PENTING
1. :HOVER
Tag :hover adalah tag yang baru berfungsi saat wilayah tersebut dilewati kursor
mouse. Agar profil sobat lebih interaktif, hover memberikan peran yang besar
dalam mewujudkannya. Berikut contohnya :
.sts_bd:hover{background: pink;}
Tag .sts_bd adalah tag status, ketika kursor berada di atas kotak status maka warna
backgroudnya akan menjadi warna pink.
Awal, sebelum kursor di melewati kotak status

Setelah kursor melewati kotak status maka warna background menjadi pink

2. :ACTIVE
Sama seperti :hover, hanya saja :active ini berfungsi ketika elemen tersebut di klik.
Jika hanya diarahkan kursor maka elemen tersebut tidak akan berubah. (Power
ranger kali ya om pake berubah segala) :D Berikut cara penggunaannya :
.sts_bd:active{background: pink;}
Fungsi dan kegunaannya sama seperti :hover

INFO
Untuk menulis kode css pada tag di atas, tuliskan kode css di dalam tanda kurung
kurawal {}
{ tulis kode css di sini }
Contoh : .sts_op{background-color: blue;}
Maka warna pilihan status akan menjadi biru

Kode CSS:
width : kode ini digunakan untuk mengubah ukuran panjang, cara
penggunaan yaitu width: 100p; ukuran 100px atau piksel bisa diganti
sesuka hati

Untuk kode cssnya sama seperti yang telah dijelaskan pada BAB I, hanya saja

height : kode ini digunakan untuk mengubah ukuran tinggi, cara

tag.
penggunaan yaitu width: 100px; ukuran 100px atau piksel bisa
Atau sobat dapat mempelajari kode-kode CSS pada kotak di bawah ini
diganti sesuka hati
berbeda

background-color : kode ini digunakan untuk mengubah warna

background, 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
bergambar,
cara
penggunaan
yaitu
background-image:
url(alamatgambar.png); alamat gambar bisa diganti dengan
alamat gambar sesuka Anda
box-shadow : yaitu kode untuk menamba bayangan, cara
penggunaan yaitu box-shadow: 0px 0px 0px black; angka 0px

BAB III: CONTOH CSS YANG SUDAH JADI

Pada bab ini, akan dicontohkan 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 top,left bottom,from(#93C1FF),to(#44B4FF));}

2. Mengubah warna menu utama menjadi keren

Menu utama adalah menu paling atas yang berfungsi untuk berpindah ke halaman
profil dan beranda, kodenya seperti berikut :
#menubar{background-image:
-webkit-gradient(linear,left top,left bottom,from(#69B1E5),to(#005690));
background-color: #005690; box-shadow: inset 0 -2px 0 #005690;}

BONUS : Di bawah ini diberikan bonus contoh tema profil yang bisa sobat
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 di atas adalah

Nah dari penjelasan singkat di atas, Kwikku harap sobat kwikkers yang di sini, yang
di sana, yang di sini tapi baru saja ke sana benar-benar telah paham tentang cara
mengubah profil Kwikku sesuai dengan hati nurani keinginan. :D

Siap? Yuk ciptakan KREASI profil

Anda se-keren munkin dari
SEKARANG!
Semakin bagus profil Anda semakin
banyak kesempatan dipromosikan
diberbagai acara oleh Tim Kwikku
Nusantara lho.. :D
Berikut

Kwikku

dikresikan

sertakan

oleh para

bukan..? Pastinya

contoh

profil

yang

telah

sobat kwikkers. Gimana?? Seru

Kwikku menyadari dalam penyampaian handbook ini masih banyak

kurang sana-sini. Demi kesempurnaan dimasa yang akan datang.
Ayo sampaikan kritik dan saran sobat ke : admin@kwikku.com