membuat layout plurk sendiri

Warna-Warna Font

Yah, seperti kata judulnya, ini warna font. Setahu aku semua tempat ada kodenya kecuali pane plurk *tempat ketik* & plurk box *tempat lihat status plurk, yang ada di timeline itu*

Sebenarnya, tinggal tambah color saja, contoh :

Kode awal

body {
background : url(www.apalah) ;
color : *warna* ;
}

Tinggal tambah color : warna saja, ini beberapa tempat untuk mewarnai.

Warna karma

#karma {
color : warna;
}

Warna STATS di dashboard

#dash-stats {
color: warna;
}

Warna FRIENDS di dashboard

#dash-friends {
color : warna ;
}

Warna FANS di dashboard

#dash-fans {
color : warna ;
}

Warna nama panjang di dashboard

#full_name {
color: warna ;
}

Warna about me di dashboard

p#about_me {
color : warna ;
}

Warna judul *di atas timeline*

#top_bar a, #top_login a {
color: warna;
}

Kurang lebih itu bagian yang penting-penting



Dekorasi border

Aku sedang belajar cara membuat layout MP, & bertanya2 gimana caranya border guestbook itu bisa titik-titik. Aku liat di profile account plurkers lain, mereka bisa membuat dashboard titik-titik. Selama ini aku hanya tahu solid.

Jadi, setelah mengecek2 trik dari MP bisa digabungkan dengan plurk.

Dekorasi border ada beberapa :

CONTOH mengganti border pane plurk :

#pane_plurk {
border-color : pink ; border-width:5px; border-style:dashed; background : url(URL)
}

Jangan lupa border-widthnya, dashed bisa membuat border titik-titik, opsi lain adalah :

border-style :solid ;

border-style:dashed ;

border-style:groove ;

border-style:double ;

border-style:ridge ;

border-style:inset ;

border-style: outset ;

Kode ini bisa digunakan di manapun yang memiliki border.



Tanda Response

Sudah lama nggak post disini... maklumi, sedang banyak tugas ^o^ hohohoho.

Nama group ini plurk layouts & tutorials, jadi layoutnya aku ganti, jadi ada 'aura' plurknya. *Padahal yang ada hubungan sama plurk cuma banner & bullet doang*.

Info kecil, tadi aku baru post layout baru Colorful Music. Silahkan lihat di layouts.

Sekarang tentang tanda response. Di samping kanan plurk biasanya ada tanda berapa response. Sudah di commentin berapa kali. Ini cara mendekorasikannya.

Ini kode untuk TIDAK ADA RESPON BARU.

.response_count {
background: *WARNA*;
color: *WARNA FONT*;
font-size: *BERAPA PX*;
}

KODE TANDA RESPONSE BARU

.new .response_count {
background: *WARNA*;
color: *WARNA FONT*;
font-size: *BERAPA PX*;
}

Sebenarnya tinggal masukin warna aja & px aja. & bukan itu aja *aja-aja-aja-aja-aja-aja-aja <----- gak jelas*.

Response itu bisa dibulet-bulettin, pakai :

-moz-border-radius: px px px px;

Jadi bulet. Atau bisa buat response itu transparan pakai opacity :

opacity: 0.7; filter:alpha(opacity=70);

Biasanya kalau transparan, aku pakai 0.7 kadang-kadang 0.8 sih. Semakin kecil angkanya, semakin transparan. Kalau sampai 0, ilang deh gambarnya.

Pane Plurk

Biasanya kalau mau update status plurk, ada kotak persegi panjang, kan? Itu namanya pane plurk. Ini cara mendekorasi pane plurk.

#pane_plurk { background-image:url(*URL DISINI*); border-color: *BRP PX & WARNA*; }

textarea#input_big, textarea#input_permalink { font-family: *JENIS FONT* ; text-transform: *BERUBAH MENJADI APA*; background: *WARNA*; }

Biasanya pane plurk ini ada di customize my profile, tapi hanya ada beberapa warna. Tapi ini bisa diganti gambarnya dan warna bordernya.

& kode bagian bawahnya untuk text area, tempat untuk diketiknya.

Dan untuk text transform, ada beberapa contoh
text-transform : uppercase ;
text-transform : lowercase ;
text-transform : capitalize ;

Uppercase, jadi setiap kali mengetik sesuatu di text area, tanpa caps lock otomatis hurufnya berubah jadi besar.

Lowercase, setiap kali mengetik sesuatu di text area, pakai caps lock atau tidak hurufnya akan tetap kecil.

Capitalize, setiap kali mengetik 1 kata di text area, setiap huruf pertama dari kata itu hurufnya kapital.

Walaupun ada efek-efek seperti ini, hasilnya tidak akan jadi besar, kecil, atau huruf kapital. Ini hanya berlaku di text area saja ^.^


Day Seperator

Di bagian kiri timeline, ada sebuah persegi panjang berwarna putih. Itu namanya day seperator. Gunanya adalah seperti semacam bookmark, setiap 1 hari ada batasnya. Ini cara mengganti gamar / warna day seperator.

.day_bg .div_inner {
background: transparent url(*URL DISINI*) *REPEAT / NO REPEAT* *TEMPAT DAY SEPERATOR*;
border-left: *BERAPA PX*;
border-right: *BERAPA PX*;
}

Taruh saja URLnya, dan gambar itu mau di ulang / tidak. Repeat kalau mau diulang, No-repeat kalau tidak mau diulang.

Tempat day seperator itu biasanya center, jadi berada di dalam persegi panjang. Otomatis kalau ada gambarnya, tidak ada warnanya. Kalau mau diganti warnanya saja, cukup :

background-color : *WARNA* ;

Border left & right bisa ditentukan tebalnya dan warna, tapi kalau pakai gambar, biasanya jadi jelek kalau ada border. Kalau ingin menghapus border itu, kodenya :

border-left: 0px none;
border-right: 0px none;


Mengganti Loading Ikan

*Loading ikan*

Biasanya kalau loading, ada ikan warna biru dan tulisan loading. Cara mengganti ikan itu, dengan kode ini.

.cmp_loading {
background: transparent url( *URL DISINI* ) no-repeat scroll 0 0;
width: *PX UKURAN GAMBAR*;
height: *PX UKURAN GAMBAR*;
}

Sebagai catatan, ada 2 macam loading. Yang ada di timeline, dan ada di respond box. Khusus yang ini, untuk di timeline saja. Sejauh ini aku masih belum tahu untuk respond box. Kalau tahu, nanti akan aku post

URL gambar itu mungkin lebih baik kalau flash, atau .GIF.

Untuk width *Lebar* dan height *Tinggi* Usahakan jangan terlalu besar, kalau tidak timelinenya hancur.

Biasanya lebar itu 200 dan tingginya 130.


Hilangin Beberapa Tombol & Dekorasi Tombol "Follow Friend"

**Tombol Follow Friend**

Di dashboard, ada profile picture, status *Untuk Karma*, Friends, & Fans.

Biasanya ada tombol add .... as friend, / follow ..... plurks.

Sejauh ini belum ak otak-atik, bisa mengubah gambarnya atau tidak, tapi bisa saja diganti menjadi bulat.


.friend_man.add_follow, .friend_man.remove, .friend_man.add_friend, .friend_man.pending {
-moz-border-radius: *PX* *PX* *PX* *PX*;
-khtml-border-radius: *BERAPA PX*;
-webkit-border-radius: *BERAPA PX*;
border-radius: *BERAPA PX*;
}

Dan jika ingin hilangin beberapa tombol *Share plurk, dan invite* Ini caranya, agar terlihat lebih bagus =)

**Untuk share plurk**

#sharePlurk {
opacity:0 ;
filter:alpha(opacity=0) ;
height: 0px ;
width: 0px ;
}

**Untuk Invite**

a#dashboard-invite,a#mobile-gfx,a#widget-gfx, a#twitter-gfx {
height: 0px ;
width: 0px ;
opacity:0 ;
filter:alpha(opacity=0) ;
}


Hilangin Creature Plurk & Dekorasi Bottom Line

**Hilangin Creature Plurk**

#dynamic_logo { opacity:0;filter:alpha(opacity=0);zoom:1 }

Makhluk yang ada di pojok atas kanan timeline itu bisa dihilangkan dengan itu. Singkatnya karena opacitynya 0.

**Dekorasi Bottom Line**

.p_img { border-top : white ; border-bottom : white; }
#bottom_line {
background-image : * URL DISINI*) ;
}


Di bawah timeline, ada angka-angka, yaitu jam. Bisa didekorasi border bagian atas & bagian bawahnya.

Bisa diganti background-color-nya, dibuat transparan, gambar juga bisa.


Cursors & Updaters

**Cursors**

body{
Cursor: url( *URL DISINI* ), default;
}
a, a:link, a:visited{
Cursor: url( *URL DISINI* ), pointer;
}

Kodenya sama seperti di multiply. Default untuk yang biasa, pointer adalah yang biasanya menunjuk link.

Di timeline, jenis cursor itu adalah all scroll, sejauh ini aku masih belum tahu kode untuk all scroll. Kalau ada yang tahu, kasih tahu aku ya

Ini sedikit panjang. Cara mengganti updater. Updater adalah box persegi panjang, tempat notification ada plurk / response baru. Biasanya itu persegi panjang dan warnanya putih. Ini cara menggantinya.

#updater {
background-color: * WARNA *;
alpha(opacity= *ANGKA*);
opacity: *ANGKA*;
color : brown ;
border-left: *BERAPA PX* *WARNA*;
border-top: *BERAPA PX* *WARNA*;
border-bottom: *BERAPA PX* *WARNA*;
border-right: *BERAPA PX* *WARNA*;
-moz-border-radius: *PX*;
-khtml-border-radius: *PX*;
-webkit-border-radius: *PX*;
border-radius: *PX*;
font-size: *BERAPA PERSEN*;
}

#updater a:link, #updater b {
color: *WARNA* ;
}
#updater a:hover{
color: *WARNA*;
text-decoration: *JENIS*;
}

Satu per satu dulu.

#updater {
background-color: *WARNA*;
alpha(opacity=*ANGKA*);
opacity: *ANGKA*;
color : *WARNA*;

Isi saja warnanya, itu untuk warna background updater itu. Sedangkan alpha & opacity itu gunanya untuk mengganti warna jadi transparan. Atur saja ketransparannya, biasanya angka itu aku isi 70, & 0.7.

Color itu untuk warna fontnya.

border-left: *BERAPA PX* *WARNA*;
border-top: *BERAPA PX* *WARNA*;
border-bottom: *BERAPA PX* *WARNA*;
border-right: *BERAPA PX* *WARNA*;
-moz-border-radius: *PX*;
-khtml-border-radius: *PX*;
-webkit-border-radius: *PX*;
border-radius: *PX*;
font-size: *BERAPA PERSEN*;

Border-border itu diwarnakan, dan berapa tebal garisnya itu. Kalau tidak mau ada pengubahan ketebalan, tidak apa-apa.

Sama seperti dashboard, updater juga bisa dibundarkan. Sudut-sudutnya diatur agar memiliki ujung yang tidak lancip.

Untuk font size, kali ini bisa pakai persen. Kalau 100%, box itu penuh, agar tidak terlalu penuh, biasanya aku pakai 90% dari box.

#updater a:link, #updater b {
color: *WARNA* ;
}
#updater a:hover{
color: *WARNA*;
text-decoration: *JENIS*;
}

Link itu, warna link yang ada di updater. Sedangkan hover, adalah jika hover warnanya apa.

Text decoration ada strikethrough, overline & underline.


Dekorasi Dashboard

Sekarang mengenai plurk dashboard. Dashboard adalah bagian tempat profile, status, karma, friends, & fans.

#plurk-dashboard {
background-image:url( *URL DISINI* );
border: * WARNA * ;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

Taruh saja URL di dalam kurung.

Border adalah garis-garis yang mengelilingi dashboard. Biasanya dashboard itu berwarna abu-abu, tapi bisa diubah.

Untuk :

-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Gunanya adalah membuat dashboard menjadi bulat. px itu bisa diubah, jadi lebih bundar. Kalau mau berbentuk persegi panjang, boleh, tapi kalau mau bulat, bisa gunakan kode itu


Dekorasi Top Bar

Di bagian atas, ada beberapa link.

* My profile *
* Edit *
* My friends *
* Alerts *
* Find / Invite friends *
* My account *
* Sign out *

Ada beberapa kode untuk mendekorasinya :

Warna links di top bar

#top_bar a, #top_login a {
color: *Warna apa*;
}

Underline di top bar, gambar.

#top_bar .on img {
border-bottom: *Berapa px* solid *Warna*;
border-up: *Berapa px* solid *Warna*;

}

Hover text di top bar

#top_login a:hover, #top_bar .on {
color: *Warna*;
}

Hover edit

#top_bar #edit_link:hover {
background: *warna* none repeat scroll;
color: *warna*;
}

Hanya perlu mengisi warna & ketebalan saja. Tidak banyak yang bisa dijelaskan, khusus untuk edit, background itu berbentuk kotak, *Coba hover, pasti edit itu bentuk kotak*.



basic

Mulai dari awal dulu. Ini kode standar yang jadi body layout ini.

body, html {
background:transparent url( URL PASTE DISINI) ;
font-family: Tempus sans ITC ;
font-size : 15 px ;
}

dimulai dari body, html.
di background, dengan transparent URL, langsung paste aja.

Ada 2 cara mendapat URL.

-> cari gambar di internet, mungkin dari google.
-> Klik kanan, pilih properties.
-> Copy URL, URL itu dibagian 'Location', yg akhirnya ada .jpg, .gif, dll.
-> Contoh hasil :

background: transparent url(http://profile.ak.fbcdn.net/object2/942/33/q247754692297_2551.jpg)

Cara lain, kalau gambar itu ada di dalam komputer *misalnya buat sendiri, atau diedit dulu biar tambah bagus*

-> Pergi ke www.photobucket.com
-> Buat account dulu, setelah itu upload dari komputer gambar yg ingin diinginkan
-> Nanti ada URL, copy lalu paste.

Lalu, font-family. Itu untuk menetapkan jenis fontnya. Jangan gunakan yang rumit, kayak jokerman, Curlz MT, nanti nggak ada yang bisa baca.

Oh iya, ada banyak software, tapi lebih banyak orang Indonesia pakai windows.

Contoh menggunakan augie, font augie hanya ada di microsoft 2007 di windows. Di microsoft 2003 masih belum ada augie, jadi yang terjadi fontnya berubah jadi sesuatu yang beda, contoh arial, lucida, dll.

Jadi, usahakan pakai font yang umum. Contoh : Arial, Bradley hand ITC, Kristen ITC, Comic sans MS, dan sebagainya.

font-size perlu sedikit perhatian. Jangan terlalu besar, kalau iya bisa hancur mungkin tertabrak dengan gambar.

*Timeline background*

#timeline_holder {
background-image: url(URL DISINI);
background-position: center ;
}

sama seperti sebelumnya, taruh URL di 'URL DISINI'. Posisi background itu bisa center, top, bottom, left, right, dll.

Itu langkah awal-awalnya, kalau ada pertanyaan bisa disini, atau di question