Plurk adalah salah satu situs pertemanan yang membuat penggunanya bisa kreatif, selain rajin naikin karma, kita juga perlu menghias-hias plurk kita dengan layout keren yang mengundang pengunjung, apalagi kalau layout plurk itu desain kita sendiri pasti lebih membanggakan, ya udah nanti dulu basa-basinya ayo belajar mendesain Layout plurk made sendiri!!! (^_^)
Pertama kita harus menemukan URL Image Kita, Caranya:
1.) Upload Foto Kita pada situs Gambar Online, salah satunya photobucket, picassa, flickr, dll. Tapi tenang kita akan menggunakan website gratis untuk mengupload foto kita tanpa perlu mendaftar (sign up) yaitu salah satunya imagehost klik disini untuk mengupload foto.
2.) Setelah itu akan ada kode seperti:
| |||||||||||||||||
3.) plih kode “ Hotlink “ kemudian copy.
Contoh Kode:
Setelah itu kita buka halaman pembuat layout plurknya, salah satu yang sering digunakan adalah Plurk Layout.Com Karena gratis tanpa perlu registrasi Klik Disini Untuk membuka halaman webnya!!!.
Setelah itu ada tampilan halamannya yang seperti ini:
Profile Background
Bg Color:
Bg Color:
BG Image URL :
Position: Repeat: Attachment:
TimeLine Image URL :
Position: Repeat: Attachment:
Plurk Response Panel | |
Font Set: | |
Buttons Text: | |
Buttons BG: | |
Buttons Border: | Style: |
Buttons Text (Hover): | |
Buttons BG (Hover): | |
Buttons Border (Hover): | |
Misc | |
Timeline Border: | Style: |
Dashboard Link Color: | Text-Transform: |
Stats, Friends, Fan BG Color: | |
Stats, Friends, Fan Border: | Width: Style: |
Segment BG Color: | |
• • • • Copy the above code and put them into your Customize Profile CSS under your edit My profile section. |
( Begitu juga pada TimeLine Image URL).
5.) Setelah itu editlah warna background, tesk, link, header, maupun border sesuka hati kamu dengan mengklik "Pick Colour".
- Agar gambar foto kamu bisa terlihat sebaiknya ubah warna Background menjadi transparan, dengan cara klik " Pick Colour " Klik Lagi " Transparent "
- Pilih warna Teks yang bisa terlihat (Menabrak Warna layoutnya). Bila layout gelap pilih warna tesk cerah dan sebaliknya.
- BG = background.
- Timeline: Tempat dimana plurk-plurk anda dan teman anda tampil.
- Border, bisa diubah " Style " menjadi: Solid, Dashed, Double, dll. Ubah Width (lebar)= 1 px, 2 px, 3 px , dll.
- Selebihnya otak-atik aja karena nanti pasti ngerti sendiri kok kayak saya!!! (^o^v)
6.) Edit mulai dari Page Background, Global text, Global link, Text Area, Sampai Dashboard Box....
7.) Jika sudah selesai mengatur semuanya klik " Generate CSS Code ". Maka akan tampil Code Script Seperti :
• • • • /* Basic Plurk Layout Editor V.1.0 - Plurk-Layout.com */ /* Main Body and Background of Body */ body, html { background: url(http://b.imagehost.org/0664/Elin_Green.jpg); background-attachment:fixed; background-position:center; background-repeat:repeat; background-color:#ffffff; } /* Timeline Holder Background */ #timeline_holder { background: url(http://f.imagehost.org/0340/A-Single-Red-Rose.jpg); background-attachment:fixed; background-position:center; background-repeat:repeat; background-color:#ffffff; } /* Page Title */ #page_title { font-family:Arial, Sans-serif; color:#cc00ff !important; } /* Your Name Text Color */ .qual_holder { color:#993399 !important; } /* Your Karma Text Color */ #karma { color:#3366cc !important; font-family:century gothic; font-size: 20px;} /* Plurk Panel Text Color */ #pane_plurk { color:#3300ff !important; } /* About Me Text Color */ p#about_me { color:#33cc33 !important; margin:2px; padding: 10px; text-align:left;} /* TimeLine Text Color */ .bottom_start , .bottom_end { color:#66ff66 !important; font-weight:bold; font-size:12px;} /* GLOBAL LINKS */ #top_bar a, #top_login a { text-decoration:underline; color:#cc00cc; } #dashboard_holder a, #footer a { font-family:Arial, Sans-serif; color:#cc00cc; } #dashboard_holder a:hover, #plurk-dashboard a:hover { text-decoration:underline; color:#ccccff; } /* Plurk Textarea */ textarea#input_big, textarea#input_permalink { font-family:Arial, Sans-serif; color:#ff66cc !important; background:#ff6699; } /* Dashboard Header2 */ #plurk-dashboard h2 { color:#ff0099; font-family:century gothic; font-size: 20px;} /* DashBoard Background */ #plurk-dashboard { border-color:#ffcc99; background:#33cc99; } /* Dashboard Stats area */ #dash-stats { color:#3366cc; } /* Pane Plurk Width Size */ #pane_plurk { border-width:0px; border-style:solid; } /* Pane Plurk Background */ #pane_plurk { background:#6699ff; } /* Pane Plurk Background Border */ #pane_plurk { border-color:#ff6699; } /* TimeLine BORDER */ #timeline_holder { border-style:inset; border:1px;} /* Plurk: Background where responses are*/ .plurk_box .list, #filter_tab a.off_tab, #filter_tab a.filter_selected { font-family:Arial, Sans-serif; color:#ccff66; border-color:#996666; background-color:#996699; } #filter_tab a.filter_selected { color:#4f4f4f; border-color:#e1e1e1; background-color:#ccff99; } Copy the above code and put them into your Customize Profile CSS under your edit My profile section. |
8.) Copy code script tersebut!!
9.) Cara menaruh kode layout pada plurk:
- Buka Plurk Anda
- Pada " Profil Saya " Klik " Sunting "...
- Setelah itu akan ada Pop Out " Pengaturan Profil "
- Klik lagi " Penyesuaian profil "
- Pastekan pada jendela " Sesuaikan profil Anda lebih jauh dengan CSS "..... ( jangan lupa hapus code layout yang lama sebelum code layout buatan anda di pastekan ).
- Klik " Simpan dan perbarui ". Dan.... Abrakadabra plurk dengan layout foto anda sudah jadi!!! (^__^)
Sekian ilmu yang bisa saya berikan jika kurang jelas, atau You pada gak paham langsung aja tanya dengan menambahkan " komentar " pada artikel ini!!! Semoga bermanfaat!!! Oyasumi Nasai (^_^)
makasih yha ka eliin,,, kak keren deh blognya!
BalasHapussi dka...
BalasHapus