Cool Plurk Layouts

Cool Plurk Layouts

Beberapa saat yang lalu saya menemukan layout atau theme Plurk yang menurut saya menarik.

Menarik karena tema ini berbeda dari tema (layout) Plurk biasanya; semua elemennya ada di dalam satu halaman saja. Jadi semuanya bisa dilihat tanpa perlu melakukan scroll down up atau scroll left right.

Artikel ini juga bisa Anda baca di www.mukadimah.com. Klik di sini untuk pergi ke www.mukadimah.com.

Dari bagian credit di kodenya, layout atau tema Plurk ini dibuat oleh: Indonesian Plurk Layouter (Layout Founder: Haerul Rijal - Layout editing: blackmask).

Kode dari tema ini bisa Anda kopi-paste di bagian akhir posting ini.

Berikut screenshot dari layout (theme) Plurk yang saya maksud.



Klik di sini jika ingin mengetahui cara memasang atau instal kode ini di Plurk.


Saya membuat beberapa perubahan kecil di kode ini.


Pertama, saya gunakan gambar sendiri, bisa juga foto, sebagai background theme ini. Saya ubah di bagian kode seperti berikut ini.




Kedua, tema ini mendukung animasi di timeline dan update statusnya.




Jika ingin diubah gambar animasinya, bisa diganti bagian berikut ini. Ganti dua bagian yang ditandai mata panah dengan file gif animasi Anda sendiri.




Dan theme Anda pun kini bisa terlihat semuanya hanya dalam satu halaman saja. Cool!


Artikel ini juga bisa Anda baca di www.mukadimah.com. Klik di sini untuk pergi ke www.mukadimah.com.

Jika ingin memakai layout seperti di atas, kopi paste semua kode berikut ini.

#page_title {
overflow: hidden;
opacity:0; width: 0;
}

html {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDSBjch82O7WkXLF1WAUH1VWOaBg1DAYhQpjarX4taBSI6eg4eK3FnYjOi37uwKlXdSwMOVNuLK1aowYtf-o8fQBud78vIvGYdvOrpNbJNiKYENXMom9Tv1q5L4Jiku3ZeygsDvtUag4/s1600/SriGuluDARKER.png);
background-repeat: no-repeat;
}

body {
background: none;
padding-left: 210px;
padding-right: 215px;
overflow-x:hidden;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 9pt;
}
#top_login {
padding: 2px 10px 0px 0px !important;
margin: 0px 0px 0px 0px;
background-image: url();
background-color: transparent;
background-repeat: repeat;
color: black !important;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

#sign_up {
padding: 0px 3px 0px 3px !important;
margin: 0px 0px 0px 0px !important;
position: relative !important;
}

#dash-stats h3 {
font-size: 24px;
}

#alert_beacon {
text-shadow: 1px 1px 1px white;
color: black !important;
}

h1 {
font-weight: bold;
text-shadow: 1px 1px 1px grey;
color: black !important;
}

table, td {
color: black !important;
text-shadow: 1px 1px 1px white;
}

#plurk-dashboard a, #footer a, #top_login a, #top_bar a {
font-family: "Trebuchet MS", Helvetica, sans-serif;
text-shadow: 1px 1px 1px white;
color: black !important;
}

#karma, .karma_hover {
font-family: "Trebuchet MS", Helvetica, sans-serif;
text-shadow: 2px 2px 2px black;
color: #99FF33;
font-weight:bold;
}
.browse_button {
margin-left: 210px !important;
}

.tooltip_cnt {
background: #003300;
text-shadow: 1px 1px 1px black;
}

/* ----- TIMELINE ------ */

#timeline_cnt {
background: url() no-repeat;
background-color: transparent;
}

#timeline_holder {
background: url(http://i47.tinypic.com/mhx5d0.jpg) repeat-x;
padding-left: 210px;
padding-right: 215px;
position: relative;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
border: 1px solid #CCCCCC;
}

#bottom_line {
position: relative;
top: 365px !important;
right: 215px;
left: 0px;
}

div#updater {
left: 18em; right: auto;
-moz-border-radius:12px;
-webkit-border-radius:12px;
-khtml-border-radius:12px;
}

#filter_tab .off_tab {
background: #003300;
}

/* ***************************** */
/* Indonesian Plurk Layouter */
/* ***************************** */
/* Layout Founder : Haerul Rijal */
/* eMail : the.trojan.x@gmail.com */
/* Layout editing : blackmask */
/* eMail : blackmask@gmail.com */
/* ***************************** */

/* Thanks For Downloading :) */
/* ********************************* */

/* -------plurk--------- */

.p_img img {
border: 2px solid white;
background: white
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-border-radius:2px;
-webkit-border-radius:2px;
-khtml-border-radius:2px;
}

.response_count {
padding: 2px 2px 2px 2px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
}

textarea#input_small, textarea#input_big {
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
}

.mini_form {
color: black;
font-weight: bold;
text-shadow: 1px 1px 1px white;

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

-moz-border-top-right-radius: 10px 10px;
-webkit-border-top-right-radius: 10px 10px;
-khtml-border-top-right-radius: 10px 10px;
}

.plurk_box .list .empty {
text-shadow: 1px 1px 1px white;
}
.plurk_box .list {
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
}

.qualifier {
text-shadow: 1px 1px 1px black;
color: white;
padding: 0px 1px 0px 1px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-khtml-border-radius:2px;
}

#emoticons_show img {
border: 0px !important;
}

#emoticons_show, #emoticons_tabs ul li {
border: 1px solid grey;
padding: 2px 2px 2px 2px !important;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
}

.plurk_cnt {
text-shadow: 1px 1px 1px grey;
font-size: 9pt;
border: 1px solid #CCCCCC;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;

}

.dots .inner {
background: white;
text-shadow: 1px 1px 1px white;
padding: 0px 1px 1px 0px !important;
border: 1px solid #CCCCCC;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;

}

.plurk_cnt table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;

}

.plurk_cnt {
opacity: .9;
padding: 2.5px 9px;
background: white;
margin-left: 5px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
}
.plurk_box .caption {
background: rgb(72,72,72);
color: rgb(231,231,231);
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;

}

.info_box {
-moz-border-bottom-left-radius: 10px 10px;
-webkit-border-bottom-left-radius: 10px 10px;
-khtml-border-bottom-left-radius: 10px 10px;
-moz-border-bottom-right-radius: 10px 10px;
-webkit-border-bottom-right-radius: 10px 10px;
-khtml-border-bottom-right-radius: 10px 10px;
}

.plurkaction .qual_holder {
text-shadow: 1px 1px 1px white;
font-weight: bold;
color: #FFFFFF;
}

.emoticon, .p_img {
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-khtml-transition-duration: 500ms;
}
.emoticon:hover, .p_img:hover {
-webkit-transform: rotate(390deg) scale(1.2);
-moz-transform: rotate(390deg) scale(1.2);
-khtml-transform: rotate(390deg) scale(1.2);
}

/* ----- DASHBOARD ------ */

#dash-profile {
background: url(http://i47.tinypic.com/mhx5d0.jpg) repeat;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
position: fixed !important;
opacity : 1 !important;
text-align: center;
color: white;
text-shadow: 1px 1px 1px black;
margin: 0px 0px 0px 20px;
padding: 3px 3px 3px 3px;
border: 1px solid #CCCCCC;
right: 5px;
top: 5px;
height:80px;
width:195px;
}

#dash-additional-info {
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
position: fixed !important;
opacity : 1 !important;
text-align: center;
color: white;
text-shadow: 1px 1px 1px black;
margin: 0px 0px 0px 20px;
padding: 35px 3px 3px 3px;
right: 5px;
top: 10px;
width:190px;
}
div#private_plurk {
margin: 10px 1px 5px 75px !important;
}

#profile_pic {
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
position: fixed !important;
opacity: 1 !important;
margin: 0px 0px 0px 0px;
background-color: white;
left: 5px;
top:5px;
width:195px;
height:195px;
border: 0px solid #CCCCCC;

-webkit-border-radius: 97px;
-khtml-border-radius: 97px;
-moz-border-radius: 97px;
}

p#about_me:hover {
opacity: 1 !important;
}
p#about_me {
position: fixed !important;
opacity: .5 !important;
margin: 0px 00px 0px 0px;
text-shadow: 1px 2px 2px black;
color: white;
left: 5px;
text-align : center;
top: 205px;
width:195px;
}

.award_bar div {
padding: 0px 1px 3px 5px;
margin: 0px 0px 0px 0px;
height: 26px;
width: 26px;
}

.award_bar img {
-moz-transform: scale(0.7);
-khtml-transform: scale(0.7);
-webkit-transform: scale(0.7);
-o-transform: scale(0.7);
}

.award_bar {
position: fixed !important;
background: url(http://i47.tinypic.com/mhx5d0.jpg) repeat-x;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
padding: 0px 0px 5px 0px;
border: 1px solid #CCCCCC;
left: 0px;
opacity: 1 !important;
text-align : right;
top: 220px;
width:180px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

#dash-friends {
position: fixed !important;
background: url() repeat-x;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
padding: 0px 0px 5px 0px;
border: 1px solid #CCCCCC;
left: 5px;
opacity: 1 !important;
text-align : center;
top: 300px;
width:190px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
}

#dash-fans {
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
position: fixed !important;
background: url() repeat-x;

-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
opacity : 1 !important;
text-align: center;
margin: 0px 0px 0px 0px;
padding: 3px 3px 3px 3px;
border: 1px solid #CCCCCC;
right: 5px;
top: 363px;
width:195px;
}

.friend_holder td {
padding: 0px 0px 3px 3px;
}

.friend_holder img {
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

#dashboard-invite, #sharePlurk {
width: 0; height: 0 !important;
opacity: 0 !important;
padding: 0px !important;
overflow: hidden !important;
}

#dash-stats {
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
position: fixed !important;
background: url() repeat-x;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
opacity : 1 !important;
text-align: center;
margin: 0px 0px 0px 0px;
padding: 3px 3px 3px 3px;
border: 1px solid #CCCCCC;
right: 5px;
top: 100px;
width:195px;
}

#plurk-dashboard table, #plurk-dashboard td {
color: white !important;
text-shadow: 1px 1px 1px black;
}
#plurk-dashboard {
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border: 1px solid #CCCCCC;
background: url(http://i47.tinypic.com/mhx5d0.jpg) repeat-x;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
background-color: transparent;
}

.dash-segment {
min-height : 60px;
}

/*----- PANE PLURK ----*/
#dashboard_holder {
position: relative;
width:100% !important;
}

#toggle_tab li {
background: url(http://i47.tinypic.com/mhx5d0.jpg) repeat-x;
-moz-border-top-left-radius:8px;
-webkit-border-top-left-radius:8px;
-khtml-border-top-left-radius:8px;
-moz-border-top-right-radius:8px;
-webkit-border-top-right-radius:8px;
-khtml-border-top-right-radius:8px;
color: #cccccc;
border: 0px solid #CCCCCC;
background-color: #E0E0E0;
background-color: transparent;
}

#toggle_tab li.tt_selected {
background: url(http://i47.tinypic.com/mhx5d0.jpg) repeat-x;
-moz-border-top-left-radius:8px;
-webkit-border-top-left-radius:8px;
-khtml-border-top-left-radius:8px;
-moz-border-top-right-radius:8px;
-webkit-border-top-right-radius:8px;
-khtml-border-top-right-radius:8px;
border: 1px solid #E0E0E0;
background-color: transparent;
}

.plurkaction {
background: url(http://i47.tinypic.com/mhx5d0.jpg) repeat-x;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border: 1px solid #E0E0E0;
background-color: transparent;
}

.share_search {
position:relative;
bottom: 5px;
padding-right: 50%;
}

#reply_box {
background-image: url(http://i38.tinypic.com/dfd9wz.png);
background-repeat: repeat;
background-color: transparent;
}

/*--- FOOTER ---*/
#footer {
top: -85px;
width: 100% !important;
color: black;
padding: 3px 10px 3px 10px;
}

#languge_selector, #footer p {
padding: 3px 25px 3px 25px;
}

.day_bg .div_inner {
background: url(http://www.laymark.com/i/cz/cz04.gif) no-repeat Bottom;
width: 80px; border: none;
}
/* -------LOADING------- */

.list .loading {
position:absolute;
height:120px; /* jarak dari atas */
background:transparent url(http://www.laymark.com/i/cz/cz12.gif) no-repeat 50% 50%;
}

.loading img {
filter:alpha(opacity=0);
opacity:.0;
}

/* --------------------- */



0 Komentar
Post a Comment
Subscribe to: Post Comments ( Atom )