Sabtu, Maret 28, 2009

{TUTORIAL} EDITING FS - CSS Eksternal File

7:22:00 AM | Posted by Unknown | | Edit Entri
SS = Cascading Style Sheet .
Quote dari web--Sebuah dokument yang digunakan untuk mendesain atau mengatur tampilan tata letak sebuah halaman web, CSS ini bersifat embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML. Sebagai Contoh embeded seperti di bawah ini

Pengantar

.
Dengan CSS ini, kita bisa mengontrol/mengatur seluruh tampilan halaman web dengan hanya sebuah dokument CSS, biasanya ekstensi untuk file CSS adalah .css (dot css).
Jadi pada dasarnya CSS itu untuk desain tampilan layout profile kamu.
Misalnya : BackGround (BG) image, warna font, jenis font, warna border, dll.




Eksternal File adalah file eksternal yg disimpan di luar friendster.com , yg akan meng-override/nimpa seting tampilan FS asli ; dengan me-link eksternal file tsb ke FS.

Setelah ngoceh panjang lebar, sekarang waktunya ke TKP 011 011 011 ......
Sebelum kita harus punya account hostweb contohnya : strompages.com , ripway.com , fileave.com , Dll. .
sebagai contoh saya gunakan ripway

1. Membuat Account di Host Site dan Membuat File Eksternal secara Online

Untuk membuat account baru di ripway.com, klik --> http://ripway.com/
Click Sign Up.
Setelah regis :

--> Login ke account ripway.com baru tersebut dan kemudian pilih My Files di menu utama
[Image: pilih_myfiles.png]

--> Pada halaman selanjutnya , lihat di sebelah kanan atas, dan dapat dipilih Create Text File , untuk memulai membuat file eksternal.
[Image: create_textfile.png]
yg mana akan didapatkan , semacam notepad online spt gambar berikut ; dimana kode-kode untuk memodifikasi FS akan dimasukan disini :
[Image: online_notepad.png]

2. Memasukan kode CSS dan membuat file eksternal CSS.

Untuk kode dasar CSS.
Kamu bisa ke profile editor di bawah ini :
--> http://www.editfriendster.com/
--> http://friendster-tweakers.com/tools/friendster-editor/

Setelah digenerate masukan (copy-paste) code-code tadi kedalam notepad online tadi.
Setelah itu beri nama file dengan ekstensi CSS ekstensi CSS berarti dibelakang nama harus dikasih .CSS), misalnya beri nama file dengan nama kode_css.CSS.
Lalu click Save File pada bagian bawah notepad.

Page akan berubah kembali ke tampilan MyFiles, dg tambahan 1 file CSS yg baru kita save.
[Image: url_myfile.png]
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Bagian-bagian yg mungkin perlu diketahui, pada file yg telah dibuat :
[Image: bagian2.png]

Link Edit : akan diperlukan ketika akan modifikasi kode yg telah ada dlm file ybs.
- URL File : letak file di host site, yg akan dipakai ketika file ini mulai di link dg file lain
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Sampai dengan ini , udah dipunyai 1 file CSS.

Langkah terakhir adalah - ngelink file CSS Eksternal yg baru dibuat ke Friendster kita.



4. Ngelink File Eksternal ke profile Friendster dg JS linker
Misal tadi nama file css adalah kode_jsna.css
dan url na adalah --> http://h1.ripway.com/FiendsterTalkIndon/kode_jsna.css

masukin URL tadi kedalam generator linker yang bisa diperoleh disini --> http://jsesbreno.googlepages.com/Darylldelfin.htm
Setelah memasukan URL css file, click Generate.

Sekarang login ke friendster , dan buka halaman Edit Profile --> http://friendster.com/editprofile.php
Masukan hasil generate tadi kedalam box " who i want to meet " atau " about me ".
Click save.lihat perubahannya. .



________________________________________________________________________________ ________________________________________________



Berikut ini saya sertakan beberapa Magic Code Untuk CSS Extension

1. membuat logo sendiri

Code:
/* FriendsterMagic - personalize logo */
#navigation {
background: #000000;
border: 5px solid #ce4424;
margin:10px 0 30px 0;
padding:260px 0 0 0;
background-image: url(URL GAMBAR);
background-attachment:scroll;
background-repeat: no-repeat;
background-position: center center;
}

Edit URL GAMBAR dengan ULR gambar yang diinginkan.

2. menghilangkan "more about me" link pada control panel box

Code:
/* FriendsterMagic - remove more about me link */
.controlpanel a.more {display:none;}

3. transparan "shout out"

Code:
/*Transparent Shoutout*/

{transparent shoutout}
.controlpanel .so { margin: 0 -20px 10px 0; width: 257px; position: relative; background:url() repeat-y top left; color: #ce4424; font-weight: bold; }
.controlpanel .so a { color: #ce4424; }
.controlpanel .so div#cpShoutoutBox, .controlpanel .so div#cpShoutoutEditBox { padding: 7px 7px 5px 7px; margin: 0; }
.controlpanel .so div#cpShoutoutEditBox { display: none; }
.controlpanel .sol { position: absolute; left: -5px; top: 8px; width: 6px; height: 11px; background:url() no-repeat; }
.controlpanel .sob { width: 257px; height: 2px; background:url() no-repeat; line-height: 0; font-size: 0; }

4. border untuk page kmu

Code:
/* FLOATING PAGE EFFECT - FRIENDSTER-TWEAKERS.COM */body {border-style: groove; border-top-color: #ce4424;border-bottom-color: #ce4424; border-left-color: #ce4424;border-right-color: #ce4424; border-top-width: 25px;border-bottom-width: 25px; border-left-width: 25px;border-right-width: 25px;}


5. center profil, text, serta content

Code:
/* CENTER PROFILE TEXT AND CONTENTS */
body,td,tr,div,p {
text-align: center;
}


6. scrolling box

Code:
/* SCROLLING MORE ABOUT ME BOX */
.content_moreabout_1_5 {
padding: 2px 2px 2px 2px;
overflow: auto;
width: 510PX;
height: 250px;
background-image: url();
background-attachment: fixed;
background-position: center;
background-repeat:repeat;
}

comment box:

Code:
/* SCROLLING PUBLICCOMMENTS BOX */
#content_18 {
padding: 2px 2px 2px 2px;
overflow: auto;
width: 510px;
height: 250px;
background-image: url();
background-attachment: fixed;
background-position: center;
background-repeat:repeat;
background-color: transparent;
}

scrolling testimonial (text comment yang dikirim teman)

Code:
/* PUBLICCOMMENTS CONTENT SCROLLINGBOX */
.publiccomments div div .dtd {
width: 100%;
}
.publiccomments div div .dtd ul {
padding: 2px 2px 2px 2px;
overflow: auto;
border: 2px dashed #ce4424;
width:380px;
height: 100px;
background-color:transparent;
background-image: url();
background-position: center;
background-repeat: repeat;
}

kmu bisa pakai keduanya klo mau, biar lebih hemat tempat di page kmu,so tidak terlalu panjang ke bawah dia.. 011
--> media box

Code:
/* SCROLLING SCRAPBOOK BOX */
#content_10 {
padding: 2px 2px 2px 2px;
overflow: auto;
width: 100%;
height: 250px;
background-image: url();
background-attachment: fixed;
background-position: center;
background-repeat:repeat;
}

friends box

Code:
/* SCROLLING FRIENDS BOX */
#content_2 {
padding: 2px 2px 2px 2px;
overflow: auto;
width: 100%;
height: 250px;
background-image: url();
background-attachment: fixed;
background-position: center;
background-repeat:repeat;
}

8. Customize main navigation:

Code:
/* FriendsterMagic - main navigation*/
#mainnav {
margin:0 0 10px 0;
padding:0 0 2px 0;
width:100%;
font-size:9px;
font-weight:bold;
background: url(URL_OF_IMAGE) fixed no-repeat center; #000000;}

Edit URL_OF_IMAGE dengan ULR gambar yang diinginkan.


Code:
/* FriendsteMagic - one column friends list */
.friends div.boxcontent{width:100%;text-align:center;}
.friends.flogrid75{text-align:center;width:75px;}
.friends div.viewall a{text-align:center;width:100%;padding-left:20px;}


9. fiend list dibuat satu colom:

Code:
/* FriendsteMagic - one column friends list */
.friends div.boxcontent{width:100%;text-align:center;}
.friends.flogrid75{text-align:center;width:75px;}
.friends div.viewall a{text-align:center;width:100%;padding-left:20px;}

10. background di master headers

Code:
.commonbox h1, .commonbox h2 {
background-color: transparent;
background-image: url(IMG URL HERE);
background-attachment: fixed;
background-position:center;
background-position: center center;
background-repeat: repeat;
text-align:center;}
Labels: , , , , , , , , , , , , , , ,

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)

Translate

followers

facebook

Blogger Template created with .:Selalu Berusaha:. by YOGA SAPUTRA.