blogger: cybercity indonesia

Info & Sharing.. .

Buat teman-teman yang belum tahu

‘bagaimana cara merubah tampilan profil mu

dengan menggunakan code css.

Menyenangkan sekali bisa bergabung di Cyber City Indonesia, disini kita bisa mendapat tambahan Ilmu tentang belajar materi dasar menggunakan PHP dan CSS pada tampilan Website/profil pengguna akun.
dimana, pada setiap script(Code CSS) dapat kita atur/ubah jenis, ukuran, dan style nya sebagai hasil Desain kita sendiri.

Sebelum memulai, berikut ada sedikit penjelasan; tentang “Shortcut” atau tombol jalan pintas yg sering digunakan dari Keyboard utk mempermudah cara kerjanya:

[Ctrl] + [C] adalah => Copy / Mengcopy / Menyalin

[Ctrl] + [V] adalah => Paste / Menempelkan

[Ctrl] + [A] adalah => Menyeleksi / Memilih Semuanya

[Ctrl] + [Z] adalah => Tidak jadi / Urungkan / Kembali pd langkah sebelumnya

"SARAN :
>SEBAIKNYA DIBACA SAMPE SELESAI, > BARU DI EDIT ;BIAR GA' TERJADI KESALAHAN.

0k!.. langsung saja”

Berikut adalah langkah-langkah utk mengubah tampilan Profil akun mu di CyberCity :

1. Cara manual nya adalah

Pada Beranda, klik " Edit Profile Saya " di bawah Photo Profil mu.

Kemudian, klik " Gaya Profile " pada Menu Tab barisan ke-4 (empat).

... .. ATAU.. ...

"Cara cepatnya, adalah : Langsung saja Klik Link di bawah ini:

http://cybercityindonesia.com/members/edit/style/module/user

agar lebih mudah nya; buka Link di atas pd Tab baru

=> Klik Kanan Mouse => Buka Pada Tab Baru / Open Link In New Tab

2. Berikut, adalah tampilannya.

dapat di lihat, ada sebuah kolom kotak di sebelah kiri pada menu nya.

disitu tempat anda tambahkan sendiri Code CSS nya.

3. Dan Code CSS nya bisa anda dapat dari salah satu Link yg disediakan oleh Cyber City di bawah ini :

http://cybercityindonesia.com/articles/316/kode-css-untuk-background

http://cybercityindonesia.com/articles/317/kode-css-untuk-background-samp

http://cybercityindonesia.com/articles/318/kode-css-untuk-background-bela

truss, di Blog semua script / Code CSS nya { Klik kanan Mouse > pilih Copy }

=> untuk di Copy atau [Ctrl]+[C]

berikut, adalah gambarannya ;

ATAU.. .

Bisa di ambil Code CSS nya
pada tabel kolom di bawah ini :

body {background-image:url(http://www.whitegadget.com/attachments/pc-wallpapers/16375d1223299224-abstract-wallpapers-images-photos-picture-gallery-blue-abstract-vista-wallpaper.jpg);
}
ul.feed .feed_item_generated, ul.feed .feed_item_bodytext
{
color: #87CEFA;
font-style: normal;
font-weight: bold;
font-family: segoe print;
text-decoration: none;
}
ul.feed .feed_item_date .timestamp
{
color: #FF8C00;
font-style: normal;
font-weight: bold;
font-family: segoe print;
text-decoration: none;
}
ul.feed .feed_item_date a
{
color: #DC143C;
font-style: normal;
font-weight: bold;
font-family: segoe print;
text-decoration: none;
}
ul.feed .feed_item_date a:hover
{
color: #00FFFF;
font-style: normal;
font-weight: bold;
font-family: segoe print;
text-decoration: underline;
text-decoration: none;
}
a:link, a:visited
{
color: #FFA500;
font-style: normal;
font-weight: bold;
font-family: segoe print;
text-decoration: none;
}
a:hover
{
color: #FF0000;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-family: segoe print;
text-decoration: none;
}
.generic_layout_container h3
{
color: #FF00FF;
font-style: normal;
font-size: 12px;
font-weight: bold;
font-family: segoe print;
text-decoration: none;
}

#profile_status h2
{
color: #00FFFF;
font-style: italic;
font-size: 35px;
font-weight: bold;
font-family: Georgia;
text-decoration: none;
text-shadow: 0px 0px 20px #FFFF00;
filter: dropshadow(color= #FFFF00, offx=0, offy=2);
}
.tabs_alt
{
background-color:#E6E6FA;
}
.tabs_alt > ul > li > a
{
color: rgb(177,0,190);
font-family:comic sans ms;
}
.tabs_alt > ul > li.active > a
{
border: none;
border-bottom: none;
background-color: rgb(239,130,188);
color: rgb(177,0,190);
font-family: comic sans ms;
}
.tabs_alt > ul > li > a:hover
{
border: none;
border-bottom: none;
background-color: rgb(239,130,188);
color: rgb(177,0,190);
font-family: comic sans ms;
}
.tabs_alt > ul
{
background-color:transparent;
border: none;
}
.layout_user_profile_info > ul
{
background-color: #000000;
border: none;
}
.layout_user_profile_info > ul > li
{
color:#yellow;
font-style: normal;
font-weight: normal;
font-family: comic sans ms;
text-decoration: none;
}
.layout_user_profile_info > ul > li .timestamp
{
color: #000000;
font-size:10px;
font-style: normal;
font-weight: normal;
font-family: comic sans ms;
text-decoration: none;
}
.activity-post-container
{
background-color:pink;
border: 2px double rgb(255,6,126);
}
.layout_page_footer .layout_main
{
background: transparent url(http://1024x.net/wallpapers/10p/Raindrops_Green_Background.jpg)repeat scroll top center;
border: none;
text-decoration: none;
}
.layout_page_footer .layout_main a
{
color: yellow;
font-style: italic;
font-weight: normal;
font-family: comic sans ms;
text-decoration: none;
}
.layout_page_footer .layout_main a:hover
{
color: red;
font-style: italic;
font-weight: normal;
font-family: comic sans ms;
text-decoration: underline;
}
.generic_layout_container
{
color: blue;
font-size:10px;
font-style: normal;
font-weight: normal;
font-family: comic sans ms;
}
.comments > ul > li
{
background-color:pink;
border:none;
}
.profile_fields span
{
background-color: transparent;
color: #0000FF;
font-size:12px;
font-style: normal;
font-weight: normal;
font-family: Armalite Rifle;
text-decoration: none;
}
form.activity-comment-form
{
background-color:pink;
border: 2px double rgb(255,6,126);
}
button
{
background-color: yellow;
border: 2px double rgb(255,6,126);
color: blue;
font-family: comic sans ms;
}
button:hover
{
background-color: #000000;
border:none;
color: red;
font-family: comic sans ms;
}
.layout_core_menu_main
{
background-color: #000000;
border:2px double rgb(255,6,126);
border-left: none;
border-right: none;
}
.layout_core_menu_main ul a:link, .layout_core_menu_main ul a:visited
{
color: yellow;
}
.layout_core_menu_main ul a:hover
{
color: #000000;
}
.layout_core_menu_mini #core_menu_mini_menu > ul > li > a
{
color: blue;
}
.layout_core_menu_mini #core_menu_mini_menu > ul > li > a:hover
{
background: none;
font-family: Cooper Black;
text-shadow: 0px 0px 25px #FFEFD5;, offx=0, offy=2);
filter: dropshadow(color= #FFC0CB;, offx=0, offy=5);
}
a#updates_toggle
{
background-color:none;
font-family: Cooper Black;
text-shadow: 0px 0px 25px #FFEFD5;, offx=0, offy=2);
filter: dropshadow(color= #FFC0CB;, offx=0, offy=5);
}
a:hover#updates_toggle
{
background-color:none;
font-family: Cooper Black;
text-shadow: 0px 0px 25px #FFEFD5;, offx=0, offy=2);
filter: dropshadow(color= #FFC0CB;, offx=0, offy=5);
}
#core_menu_mini_menu > ul
{
background-color:none;
font-family: Cooper Black;
text-shadow: 0px 0px 25px #FFEFD5;, offx=0, offy=2);
filter: dropshadow(color= #FFC0CB;, offx=0, offy=5);
}
.layout_page_header
{
background-color:inherit;
font-family: Cooper Black;
text-shadow: 0px 0px 25px #FFEFD5;, offx=0, offy=2);
filter: dropshadow(color= #FFC0CB;, offx=0, offy=5);
background-image: none;
}
a#updates_toggle
{
background-color: none;
font-family: Cooper Black;
text-shadow: 0px 0px 25px #FFEFD5;, offx=0, offy=2);
filter: dropshadow(color= #FFC0CB;, offx=0, offy=5);
}
ul.feed .feed_item_body
{
color: #20B2AA;
font-style:none;
font-weight: normal;
font-family: Cooper Black;
text-decoration: none;
}
ul.feed .feed_item_link_desc
{
color: #FAFAD2;
font-style:none;
font-weight: normal;
font-family: Cooper Black;
text-decoration: none;
}
.comments .comments_likes,
.comments .comments_viewall
{
color: #FF1493;
font-size:12px;
font-style: Parchment;
font-weight: normal;
font-family: comic sans ms;
text-decoration: none;
}
.profile_status_text
{
color:#7FFFD4;
font-size:10px;
font-style: segoe print;
font-weight: bold;
font-family: comic sans ms;
text-decoration: none;
text-shadow: 0px 0px 10px #8A2BE2;
filter: dropshadow(color=#8A2BE2;, offx=0, offy=3);
}
div#global_content
{
background: transparent url(http://fc02.deviantart.net/fs50/i/2009/295/5/9/Orange_wallpaper___by_xp_9.jpg)repeat scroll top center;
border: none;
}
div.generic_layout_container.layout_middle
{
background: transparent url(http://cool-iphonewallpapers.com/download/amazing-green-nature.jpg) repeat scroll top center;
border:20px groove #1E90FF;
}

nb; script / code css yg dicopy adalah ;semua yg ada di dalam kolom tabel di atas.

4. Setelah semua Code CSS nya di Copy,

Salin / Paste kan ke dalam kolom kotak Gaya Profile tadi,

{ Klik kanan Mouse > Pilih Paste }
atau shortcut nya [Ctrl] + [V].

5. Bila semua telah selesai, simpan hasil nya

dengan menekan / Klik Tombol merah “ Simpan Style ”

6. Dan untuk melihat hasil nya, Klik "Profil "pada bagian atas menu pilihan

Hasil telah selesai utk tampilan baru Profil mu.

_________________________________________________________________________________________
_________________________________________________________________________________________

Dan apabila teman-teman _ belum merasa puas dgn hasil nya”
berikut, ada sedikit tambahan keterangan tentang Code CSS yang dapat anda ubah sendiri background nya, jenis font nya, Size/ukuran besar-kecil nya, style nya, dll
pada keterangan dibawah ini :

> Pada Code CSS di atas, dapat dilihat bahwa:

Di dalam kurung (.....)
yg telah dibedakan warna nya pada Code Css di atas (dalam tabel)

(http:......) > adalah untuk mengubah gambar background paling belakang di Profile.

(http:......) > adalah untuk mengubah gambar background dibawah Info Profile.

(http:......) > adalah untuk mengubah gambar background samping Profile.

(http:......) > adalah untuk mengubah gambar background tengah Profile.

Cara nya adalah ; Copy kan Link / Alamat URL pada koleksi Photo mu (di: Picassa.com, Flickr, Photobucket.com, RedDodo.com,wallcoo.com, dll) ke dalam kurung (http:......)
yg telah dijelaskan di atas.


saran utk penggunaan Background :
> Untuk background gambar yg bergerak / animasi dgn Format (.GIF),
   : memang sangat menarik, "Tapi ..LOADING..  pada tampilan Profil mu akan lambat
     apalagi yg koneksi internet nya lelet.
Dan beda, apabila menggunakan Background dgn Format (.Bmp, .Jpg, . Jpeg, dsb).

_____________

Dan berikut, adalah keterangan yg lainnya:

Font-style: adalah gaya tulisan / font.

_Contoh; Normal, Italic, Mistral, Parchment, dll.

Font-weight: adalah karakter tulisan / font.

_Contoh; Normal, Bold, dll.

Font-family: adalah jenis tulisan / font.

_Contoh; Normal, TimesNewRowman, Arial, Calibri, Comic Sans, dll.

Font-size: adalah ukuran tulisan / font.

_ukuran; dapat anda tentukan sendiri ... px

Untuk mengubah style, karakter, jenis, dan ukuran Font / Huruf nya;

dapat di ubah dgn mengetik secara manual pada CSS nya dan dapat di contex dari Program Microsoft Office, Notepad, Wordpad, dll .

Dan untuk mengubah COLOR / WARNA,

Berikut adalah Link nya:

http://camex.wen.ru/Sampel/Warna.html

*******************************************

KET : "perhatikan (titik koma) = ; dan { . . . }
di setiap akhir code css nya, pada saat mengedit.

*******************************************

seLesai.. .

________________________________

apabila teman-teman masih belum mengerti,

dapat di tanyakan langsung ke Admin Cyber City nya
disini : > http://cybercityindonesia.com/profile/cyber+city

> http://cybercityindonesia.com/profile/admin

____ATAU_____>http://cybercityindonesia.com/profile/andi

cara penggunaan CCI dan tutorialnya bisa langsung di tanyakan langsung
lewat chating ke Chatroom – Tutorial Penggunaan Cyber City atau bisa juga ke
http://cybercityindonesia.com/forums/74/kritik-saran-amp-pertanyaan-se

_______________________________________________________
_______________________________________________________

atau bisa juga sharing dengan saya (penulis) di :

http://www.syafiuddinfikom.web.id

https://www.apvheajjah@yahoo.com

______________________________________________________

__________________________________________

______________________________

___________________

selamat mencoba.. .

keep “Spirit.. Cyber’s.

Article Tags: #http://cybercityindonesia.com/profile/profile30148 #cybercityindonesia.com/profile/profile30148

blogger

floating share

Minggu, 24 Juni 2012

cybercity indonesia

Tidak ada komentar:

Posting Komentar

Mengenai Saya

Arsip Blog