Tampilkan postingan dengan label layout. Tampilkan semua postingan
Tampilkan postingan dengan label layout. Tampilkan semua postingan

Minggu, Januari 16, 2011

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/AVvXsEiX6T-T6G6yF50dV3B3LLBa1iIrFX-zieA6CrFrKagkh-Rfs87E6IcZxHu6DAv_eky_iXU5cYvFKW13nME2o_Shs05RXeaa1TWDLGCZ5qqlRemUEE3Cy_axj2wgoWdBk3ETY6R-1mRIc4o/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;
}

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



Rabu, April 14, 2010

How to Use Your Own Pictures or Photos as Plurk's Layout Background

Bagaimana cara mengganti layout Plurk memakai foto sendiri?

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


Pertama-tama, siapkan dua file foto atau gambar Anda.

Satu untuk gambar di bagian timeline.

Satu lagi untuk bagian main body dan background.

Kemudian, unggah atau upload file foto tadi ke situs hosting gambar seperti ImageShack, Flickr, Photobucket, TinyPic, RockYou, dan yang sejenisnya.

Di ImageShack, Anda bisa upload foto tanpa harus menjadi anggota dan tanpa harus memiliki akun (account). 

Anda akan mendapatkan URL Direct Link yang akan digunakan sebagai foto background layout Plurk.

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

URL direct link itu bisa berbentuk seperti berikut:

http://img260.imageshack.us/img260/1781/wolverineofmine.jpg

Paste URL untuk bagian Main Body and Background of Body, di antara kurung buka tutup seperti ini ( ) di bagian: background:, sesudah color: dan sebelum background-repeat:

Kode yang dimaksud bisa terlihat seperti ini:

/* Main Body and Background of Body */
body, html {
    color: #000000;
  background: #000000 url(http://img260.imageshack.us/img260/1781/wolverineofmine.jpg);
background-repeat: no-repeat;
margin-top: -1px;
}

Sedangkan untuk background timeline, paste pada bagian background:, setelah #timeline_holder {, dan sebelum background-repeat:

Kode yang dimaksud bisa terlihat seperti ini:

/* Timeline Holder Background */
#timeline_holder {
  background: url(http://img94.imageshack.us/img94/6076/wolverineofminetimeline.jpg);
background-repeat: repeat;
}

Untuk dapat mengopi dan paste kode URL gambar, klik edit untuk mengedit Profile di kotak Profile Settings.


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


Kemudian klik tab Costumize Profile.


Kemudian browse ke bawah dan temukan bagian seperti berikut, dan paste kode untuk bagian Main Body and Background of Body.

Sedikit bergeser ke bawah lagi dan akan ada kode mirip seperti berikut ini, dan paste kode untuk bagian Timeline Holder Background.

Posting ini bisa juga Anda baca di www.mukadimah.com. Klik di sini untuk berkunjung ke www.mukadimah.com.


Kemudian jangan lupa untuk klik tombol Save and Update di bagian bawah kotak untuk menyimpan perubahan yang dibuat.

Dan akhirnya, foto Anda pun kini menjadi background layout Plurk.

Klik di sini untuk melihat contoh halaman Plurk yang memakai foto atau gambar sendiri sebagai background.

Have a nice day...

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

Bookmark and Share

ARTIKEL REKOMENDASI:

- Tips dan Trik Twitter

- Amazon Associates: Affiliate Program di Blogspot

- Membuat Facebook & MySpace Sendiri

- Gadget Product Finder dari Amazon Associates di Blogger

- Respon Glittery Teks di Plurk

- Ketahui IP Address Spammer: Gunakan StatCounter.Com

- Block Komen Spam Dengan Toolator.Com

- ngePlurk Pake Emoticons Extra Set Tapi Karma Minim

- Emoticons Buat Ngeplurk di HP: Daftar Smileys Plurk

- Kode Script HTML Untuk Ubah Ukuran Huruf Blog

- Cara Mengetahui Unfollower di Twitter

Klik di sini membawa Anda ke AndresTutorialBlog.wordpress.com

Klik di sini untuk ke DownloadMyFreeMP3.blogspot.com

--------------------------------------------------------------------

Enter your email address:

Delivered by FeedBurner

--------------------------------------------------------------------

--------------------------------------------------------------------

--------------------------------------------------------------------