Plurk sebagai salah satu pilihan ber-micro blogging sambil bersocial network yang pernah saya bahas disini menyediakan pilihan mengemas tampilan profile anda lebih menarik dan unik menggunakan custom code css. Tentunya fitur mantap ini hanya bisa didapat setelah point karma anda mencapai jumlah tertentu ( antara 20 / 30 , saya lupa persis-nya. )

Setelah anda mencapai jumlah tersebut lakukan edit profile ( panel sebelah kiri atas ) lalu pilihlah tab customize profile di bawah itu ada box untuk memasukkan kode css..

Buat anda yang masih baru di-css code… silakan belajar sebentar di www.w3schools.com , buat yang ngga mao pusing dan pengen yang versi cepet ( copy-paste code aja ) klik aja kesini :

• plurklayouts.com
• plurkthemes.com
• plurktemplates.com

Kalo pengen agak2x beda ( dari yang udah ada ) yaa bikin sendiri aja .. saya sih udah bikin sendiri…

simak aja artikel berikut.

Bagian dari layout yang memungkinkan untuk di edit :

Body

Bagian ini merupakan bagian utama dari layout profile .. karena tertutup timeline di atasnya maka bagian yang tampak hanya pd bagian bawah(dashboard) dan sedikit pada bagian atas (top-bar)..

untuk melakukan custom seperti menambahkan background image / pewarnaan, masukkan kode berikut pada box custom css di edit profile->customize profile :

body {
background-image: url(http://tentangrifai.com/demo/plurk.jpg);
background-attachment: fixed;
background-position: bottom right;
background-repeat: no-repeat;
background-color: #d95d00;
color:#000000;
}

untuk background-image : url…. disesuaikan saja dengan alamat direct url gambar anda..

#timeline_holder

Bagian yang terdapat semua plurk sesuai time line yang berjalan… bagian ini terpisah dengan window utama (hampir seperti penggunaan frame) sehingga tanpa perlu resize window kita sudah bisa geser kanan-kiri untuk mengikuti pergerakan timeline plurk.

untuk melakukan custom seperti menambahkan background image / pewarnaan, masukkan kode berikut pada box custom css di edit profile->customize profile :

#timeline_holder {
background:#4CCDE3 url(”http://tentangrifai.com/demo/plurk2a.jpg”) repeat-x;
}

sama seperti sebelumnya , untuk background-image : url…. disesuaikan saja dengan alamat direct url gambar anda..

#page_title

Tulisan yang berada pada bagian atas di tengah top bar anda

Untuk mengubah warna tulisan maupun warna backgroundnya masukkan kode berikut pada box custom css di edit profile->customize profile :

#page_title {
background-color: #990000;
color: white;
}

dengan sedikit modifikasi.. layoutnya bisa dijadiin model seperti ini :

code css-nya :

text indent -5000px cuma tricky aja supaya text-nya bisa ilang di replace ama gambar sesuai path url-nya

#plurk-dashboard

Bagian tengah yang berisi statistik , list friend , fans dan lain-lain

Dengan teknik berbeda, kita bisa menampilkan dashboardnya dalam bentuk tranparan… sehingga isinya mengikuti background body seperti yang sudah kita buat sebelumnya. untuk membuatnya masukkan kode berikut pada box custom css di edit profile->customize profile :

#plurk-dashboard {
background-color: transparent;
position: relative;
color: white;
border: 2px solid white;
}

#top_bar a, #top_login a, #dashboard_holder a, #footer a

Link text yang tampil pada profile page .. seperti Edit profile , my friends, alerts, FAQ, Contact Us … dll

modifikasi yang dapat dilakukan antara lain mengubah color dan background dari link text-nya

Untuk membuatnya masukkan kode berikut pada box custom css di edit profile->customize profile :

#top_bar a, #top_login a, #dashboard_holder a, #footer a {
color: white;
background-color: black;
}

Untuk menambahkan kondisi berbeda pd saat mouse-over

#top_bar a:hover, #top_login a:hover, #dashboard_holder a:hover, #footer a:hover {
color: white;
background-color: red;
}

Sementara ini segitu dulu dehh… nanti saya coba explore lebih lanjut lagi… kalo ada tambahan/revisi nanti saya tulis di artikel ini….

Thx…

Keep Blogging !!!

=== tambahan ===

ternyata masih banyak juga elemen css layout plurk yang bisa di custom.. seperti

#dash-stats h3

#karma

bagian point karmanya bisa di custom seperti ini :

code css-nya :

#karma{
color:#fff;
}
#dash-stats h3{
background-image: url(http://tentangrifai.com/demo/karma.png);
background-position: top left;
background-repeat: no-repeat;
padding-left:8px;
padding-top:5px;
color:#fff;
width:212px;
height:46px;
}