Membuat Layout dengan foto kita sendiri

Bagaimana membuat layot dengan foto kita sendiri?

Sebelum memulai trik ini, baiknya berfikirlah tentang sebuah

permainan, jangan tegang, karna ini bukan sesuatu yang sulit. baca

perlahan langkah-langkahnya, jangan takut berfantasi di dalamnya

yakinlah dengan berfantasi kompi kamu tidak akan mengeluarkan asap

atau meleduk..hehehehehe…..spa.jpg

Ini hanya sebuah permainan, inget ini juga bukan sekedar mainan,

pelajari setiap kode-kodenya dengan fantasimu, jika begini jadi apa..?

jika begitu jadi apa..? dan dengan sendirinya kamu akan mengerti apa

itu HTML, CSS dll. Sekali lagi jangan takut salah, karna tidak akan

ada yang menghukummu.. kecuali biyaya warnet membengkak karna asiknya

lupa waktu wakakakaka…

Ingat, ini cara termudah, karna semua kode telah disediakan, kita

hanya meneruskan mengisi sesuai dengan fantasi kita..

Untuk memulai dan memperaktekannya silahkan buka terlebih dahulu

CUBANCOUNCIL lalu ikuti tetorial di bawah ini tahap demi tahap.

PAGE BACKGROUND
Dalam hal ini ada lima langkah yang harus kamu selesaikan..

Langkah awal Background Color:
Isi warna yang kamu suka untuk background kamu. kamu bisa memilih

bermacam warna tersebut dengan mengklik CHOOSE COLOR di sebelah kanan

kotak yang akan di isi.

Langkah kedua Image URL:
Cari gambar yang kamu suka, bisa foto kamu, gambar-gambar animasi

jepang, pemandangan alam yang menurut kamu bagus atau sebuah gambar

yang menunjukan karakter serta sifat kamu untuk sebuah background pada

profile friendster (PFS) kamu.

Untuk mendapatkan sebuah gambar background kamu bisa mencarinya di

yahoo atau juga google tapi sebelumnya kamu klik images atau gambar

diatas menu search, lalu masukan nama gambar yang kamu cari di kotak

searchnya, misal Donald Duck. setelah di enter maka akan banyak sekali

gambar yang namanya berbau Donald Duck.

Pilih yang kamu suka dengan mengklik gambar “usahakan ukuran gambar

1024 x 768 agar dapat tertampil penuh di monitor kamu” lalu klik view

image. Setelah gambar tertampil seutuhnya lihat alamat situs gambar

tersebut, jika diakhirannya berformat jpg, jpeg, gif copy link

tersebut lalu paste pada kotak IMAGE URL pada CUBANCOUNCIL yang kamu

jadikan tempat kamu memperaktekkannya.

Langkah Ketiga Image Repeat:
Repeat atau berulang..dalam menu ini kamu bisa isi dengan mengklik

kotak repeatnya isi dengan NO REPEAT jika ukuran gambar yang kamu

jadikan background sesuai dengan ukuran yang di sebutkan di atas, jika

ukurannya kecil kamu bisa memilih REPEAT atau bisa juga NO REPEAT

sesuai selera kamu..

Langkah Keempat Image Position:
Dalam menu ini tidak jauh beda caranya dengan menu repeat, cuma disini

adalah printah letak untuk gambar yang kamu jadikan background di

posisi mana..

Langkah Kelima Image Scroll
Jika kamu suka dengan background kamu tetap tidak bergerak pada saat

scroll kamu naikan turun, kamu bisa memilih FIXED. atau kamu mau

Background kamu terikut saat kamu naikan dan turunkan scroll, pilihlah

SCROLLABLE.

Selesai juga yach..:D sampai disini perasaan kamu bagai mana..?

tegang..wakakakakaka sebegitunya, enggak la yah, kali dah setegang

itu…

5 Langkah diatas tadi baru tahap untuk sebuah Background, masih ada

yang lainnya di bawah menanti yaitu untuk urusan warna teks dan box-

box teks tersebut.. Ayo kita main lagi..

GLOBAL TEXT
Kalo ini sih cuma tiga langkah saja, tapi punya peranan dan pengaruh

penting pada teks PFS kamu.. siap untuk mulai..?

Langkah Pertama Text Font Family
Nah disinilah tempat kamu bermain dengan teks, aku biasa menggunakan

tipe teks CENTURY GOTHIC. Kalau kamu terserah mau jenis teks apa yang

menurut kamu bagus untuk tulisan di PFS kamu tinggal pilih sudah

tersedia kok. Atau kalau kamu mau teks yang beda seperti MONOTYPE

CORSIVA bisa kamu masukan tapi setelah ini semua selesai, bisa juga

teks lainnya asal tipe teks tersebut tersedia pada komputer dan dapat

dibaca oleh programnya..

Langkah Kedua Text Color
Menu ini untuk warna teks pada judul PFS kamu, misal pada tulisan

ABOUT ME, WHO I WANT TO MEET, SCHOOLS, OCCUPATION, HOBBIES AND

INTEREST dan semacamnya.. Silahkan pilih warna yang kamu suka untuk

tempat tersebut.

Langkah Ketiga Text Transform
Menu ini untuk bentuk teks kamu ada CAPITALIZE atau hurup besar,

UPPERCASE atau disebut juga teks diatas dan LOWERCASE teks di bawah

juga ada NONE tidak sama sekali.

Mudahkan..? iya mudah, aku nulisnya teler..tapi tidak apa, yang

penting bisa membantu kamu Puas puas puas.. tak sobek sobek mulut

mu..wakakakaka kaya tukul aja yah..
Ok masukin tahap selanjutnya..

GLOBAL LINKS
LINKS atau menghubungkan. Nah cuma ada dua langkah, makin ringankan..?

Langkah Pertama Link Text Color
Jelas tertulis diatas yang berarti menghubungkan warna teks, kira-kira

gitu deh.. terserah kamu menggunakan warna apa untuk teks yang

terhubung tersebut.. kalu tadi pada menu TEXT COLOR untuk judulnya,

LINK TEXT COLOR untuk isinya. Paham gak..? Gak yah..? cuape deh.. kamu

kasih aja warna yang berbeda pada setiap warna, setelah selesai, kamu

akan tau sendiri warna-warna yang kamu masukan tadi jadinya terletak

di mana.. Ok..

Langkah Kedua Link Text Decoration
Nah ini cuma tambahan, tapi berpengaruh juga atas keindahan PFS kamu..

Menu ini untuk tambahan asesoris pada teks kamu seperti UNDERLINE

pasti kamu taukan..? ya garis bawah, jika kamu pilih ini maka teks

pada PFS kamu akan tergaris bawahi. Silahkan pilih yang kamu suka, ada

garis di atas atau NONE tidak sama sekali.

GLOBAL LINKS-HOVER
Lumayan ada dua langkah doang lagi..

Langkah Pertama Link-Hover Color
Adalah efek atau warna berbeda juga model lain di balik teks PFS kamu

yang hanya bisa dilihat bila mousenya kamu dekatkan. Makanya bedakan

warna-warnanya, agar kamu lebih mudah untuk mengetahui warna tadi jadi

apa dan terletak di mana.

Langkah Kedua Link Hover Decoration
Menu ini sama pungsi dan cara kerjanya dengan LINK TEXS DECORATION di

atas.

Nah, sampai disini aku harap sudah pada paham, karna yang dibawah ini

cara kerjanya tidak jauh berbeda, tapi tetep masih berpengaruh pada

tampilan PFS kamu..

Lanjut gak ni..? atau kamu sudah bisa berfantasi sendiri..?
Aku yakin kamu sudah bisa yah.. Ok agar tidak menyesatkan aku jelaskan

saja menu-menu berikut di bawah yah, karna cara kerjanya pasti kamu

sudah paham karna sama dengan yang di atas.

MASTER BOXES
Dalam menu ini baiknya kamu tandai kotak yang bertuliskan MAKE ALL

BOXES TRANSPARENT secara otomatis menu-menu yang tersedia dibawahnya

akan transparent dan Background kamu dapat terlihat tidak di tutup

oleh box.

CONTROL PANEL
Menu ini tidak jauh beda dengan menu TEXS COLOR atau LINK-HOVER COLOR,

pilih teksnya, lalu warnai.
Catatan: jika ingin terlihat jelas Background kamu, gunakanlah

transparent pada menu BACKGROUND COLOR juga BORDER COLOR pada CONTROL

PANEL BOX jika menggunakan transparent, kamu tidak perlu lagi mengisi

BORDER SIZE juga BORDER STYLE.

Tahap berikutnya yaitu USER PHOTO, DATA/STATS LABELS, DATA/STATS TEXT,

DATA/STATS LINKS, MORE ABOUT ME’-LINK, CONTROL PANEL BUTTONS, CONTROL

PANEL BUTTONS (ON HOVER), perlakukanlah sama seperti pada menu GLOBAL

TEXT dan pada menu FONT FAMILY, COLOR, TRANSFORM, LINK FONT FAMILY,

LINK COLOR, LINK TRANSFORM, LINK DECORATION juga HOVER FONT FAMILY,

HOVER COLOR, HOVER DECORATION. Nah untuk yang berbau BACKGROUND COLOR

juga BORDER COLOR cukup diberikan transparent aja dulu dan selanjutnya

terserah kamu untuk mencari taunya.

INDIVIDUAL BOXES
baiknya biarkan saja jangan di ganggu gugat

MISC
Bagian ini untuk tampilan testimonial di PFS kamu, pilih USE CUSTOM

VALUES, setelah terbuka, perlakukan sama seperti GLOBAL TEXT pada FONT

FAMILY, COLOR, TRANSFORM, LINK FONT FAMILY, LINK COLOR, LINK

TRANSFORM. Sedangkan BACKGROUND COLOR juga BORDER COLOR cukup

diberikan transparent.

CUSTOM CURSOR
Pilih USE CUSTOM VALUES dan pilih CURSOR yang kamu suka..

Setelah semua selesai, berikut yang harus kamu lakukan, lihat kebawah

ada kotak kosong:
Klik tombol Generate Code untuk melihat kode CSS sesuai pengaturan

yang telah kamu buat
Klik tombol Preview Code untuk melihat contoh tampilan PFS yang sudah

kamu buat tadi.
Setelah melihat priview, kamu bisa coba-coba lagi menggantinya dan

Generate lalu priview sampe kamu puas dgn hasilnya.
Setelah kamu srek dengan hasil karyamu, pilih semua kode yang terdapat

di dalam kotak kode CSS dengan memblognya dari atas sampe bawah dan

jangan ada yang tertinggal lalu klik kanan pada kode yang sudah

terblog dan copy.
Buka PFS kamu, klik EDIT PROFILE, lalu klik CUSTOMIZE kemudian liat

kebawah ada dua kotak PASTE kode yang kamu COPY tadi di kotak bagian

atas lalu turun kebawah lagi liat tombol SAVE klik.
Setelah terSAVE klik tulisan VIEW PROFILE.. jika belum berubah,

REFRESH beberapa kali dan lihat hasilnya..

28 Tanggapan sejauh ini »

  1. 1

    ocha berkata,

    mbak/mas.
    mav,,saya mau mnta toling.
    tlong buatin saya lay-out dgn foto saya. nanti fotonya bs di liat di FS saya namanya. 999_ochaqueen@yahoo.co.id (111111)
    saya mhon…………………………….

  2. 2

    wongthai berkata,

    ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄
    ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄
    ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄
    ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄
    SITUS YANG KEREN PALING SEKALI
    SITUS YANG KEREN PALING SEKALI
    SITUS YANG KEREN PALING SEKALI
    SITUS YANG KEREN PALING SEKALI

    MARI SIMPAN GAMBAR KAMU DI DALAM “GAMBAR JAMBAN”
    MARI SIMPAN GAMBAR KAMU DI DALAM “GAMBAR JAMBAN”
    MARI SIMPAN GAMBAR KAMU DI DALAM “GAMBAR JAMBAN”
    MARI SIMPAN GAMBAR KAMU DI DALAM “GAMBAR JAMBAN”

    HAHAHAHAHAHAHAHAHAHAHAHAHAHA= http://gambarjamban.notlong.com/

    SITUS YANG KEREN PALING SEKALI
    SITUS YANG KEREN PALING SEKALI
    SITUS YANG KEREN PALING SEKALI
    SITUS YANG KEREN PALING SEKALI

    BARU MAKNYUSS!!
    ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄
    ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄
    ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄

  3. 3

    asuna17 berkata,

    Tulisan artikel di blog Anda bagus-bagus. Agar lebih bermanfaat lagi, Anda bisa lebih mempromosikan dan mempopulerkan artikel Anda di http://www.infoGue.com ke semua pembaca di seluruh Indonesia. Salam Blogger!

  4. 4

    kenapa foto layoutnya gak ada apakah pengaruh dari aplikasi

  5. 5

    knpa laout fs saya gak keliatan atau timbul di Fs

  6. 6

    aiub93 berkata,

    jika gambar/ foto anda gg muncul… coba anda priksa lg…

    mungkin pada saat anda mmasukkan url foto, anda mlupakan status gmbarnya… sperti .jpg

    ….

  7. 7

    lincung berkata,

    hwahahahahahaha. .

    koya tenan.
    mak nyoz mas !
    tengs ilmunya. .

  8. 8

    ihsan berkata,

    bgaiman mmbuat LayouT Peterpan..
    Tlong ya…
    Sy Fans brat Peterpan….

  9. 9

    nana berkata,

    buka CUBANCOUNCIL itu dimna ????????

    nana g tau
    mohon bantuannya do0ng
    kirim emaiL di ngowos_chiput@plasa.com
    nana tunggu yaaaaaaaaa

  10. 10

    putra berkata,

    MAS SAYA MINTA TOLONG AMA MAS
    TOLONG LAYOUTS SAYA DIJADIKAN FOTO SAYA MAS.FOTO NYA SEPRTI TAMPILAN FOTO SAYA…
    INI FS SAYA MAS..
    putra_whiteboy@plaza.com(281088)
    tolong saya y mas.
    saya dah ngikutin pentunjuk mas,tapi saya tidak bisa”mas
    saya mohon mas

  11. 11

    nadia berkata,

    tapi,kenapa fotonya belum mucul juga?

  12. 12

    BELA berkata,

    tapi kenapa fotonya gak muncul?

  13. 13

    BELA berkata,

    maz tolong betulkan layout q. cz bingung bangetz nih

  14. 14

    BELA berkata,

    kak kalo layout blog foto kita sendiri bisa gak kirim di zahrinanabilah@yahoo.co.id

  15. 15

    MOLDY berkata,

    KNPA BEGROUND GUWE GK BISA TERGANTIIIIII??

  16. 16

    juli berkata,

    weiz mksh bwt jurus2ny boz

    berkt lu gw bsa pamer,g malu d ledekin lg

  17. 17

    amelia berkata,

    ksh tau w dung cra bkin layout pke pto sndr?…

  18. 18

    puzzle_ berkata,

    mana fotonya mas,
    kok ga ada..

  19. 19

    aChii berkata,

    .wUuiizz.
    .mAntAff.
    .b’haSill reek.
    .hmmm.

  20. 20

    setiawan berkata,

    basi loch

  21. 21

    wiwi berkata,

    cakep juga lu

  22. 22

    musawwir berkata,

    klw gua pengen nanya tp bkn mslah nge buat layout tp cara masang tempelate blogger dgn menyertakan foto seprti pd blog ini,,, lihat bagian atas!!!!!!!!!! plese gua akan sngat berterima kasih jika anda sudi membantu aku..
    bls caranya d emailku: musawwir@rocketmail.com

  23. 23

    Theta berkata,

    Kk’ bLeh mnTk tlg gX????

    aqo udh nyoBa, tP gx bza.!!!!!!
    tLg bwTin dunK, fotona ambil d fs aqo aja, di thembhem_girl@4ever.com………..
    Please kak ea……..

    klo dh bza comment za y……..

  24. 24

    dinita berkata,

    mas mas……pye si binun qu umpama bsok mas bt nya agk simpel bs ng…….
    jd pembaca tinggal copy gt……………
    hehehe
    kak buatin dunk………..
    fs q dini_brigif6@yhaoo.co.id

  25. 25

    emqie berkata,

    kalo buat di blogspot bisa ga?????????
    plzzz……..langsung bales ke email ku

  26. 26

    darrk berkata,

    ha,,,ha,,,,
    kyo”e penipuan hi….

    gmbarnya ga muncul….plis helpme…!!!(T_T)
    kirim…cara-caranya dk Ibenk_undershock@yahoo.com

  27. 27

    darrk berkata,

    yang bner lho……bwat blomba…!!!

  28. 28

    ncepboink berkata,

    bagus gt bisa sharing” tuh….?


RSS Komentar · URI Lacak Balik

Ungkapkan pendapat Anda