CSS Dan Javascript Dalam satu Linker

Pada pembahasan ini, kita akan menggabungkan css script dan javascript dalam satu file script external, tentu saja membutuhkan linker sebagai penghubung ke profile Fs kita.


Sebagaimana yang telah kita ketahui sebelumnya, untuk modifikasi tampilan profile Fs umumnya menggunakan dua script, yaitu CSS script dan JavaScript. Kebanyakan dari user untuk mengganti "kulit" profile fs nya menggunakan CSS script sedangkan untuk menambahkan fitur-fiturnya menggunakan Javascript. Dsini kita akan menggabungkan keduanya ke dalam satu linker dengan dua file yang berbeda dan terpisah (*.css dan *.js). Tentu saja kita membutuhkan hosting sebagai tempat meletakkan file-file script kita tersebut. Bagi yang belum memahami tentang Pembuatan Linker dan Hosting, silahkan baca terlebih dahulu "Membuat Linker Untuk Friendster (Javascript)".

Pertama, kita akan membuat file script "CSS", buka teks editor mu kemudian copy-pastekan source code berikut ini :

.blogs, #googleAdPlacement, #surfer, #mainnav div div, #content_15, #subnav, #content_14, #logo, #footer_container, #marketing, #marketing_bg, #mainnav .mainfoldericon, #search form, .user_tracker, #navLang, #content_18 .data img, #content_18 .data embed, .commonbox .viewall, .banner_ad_fix, .meettrail, .fanof, .ads, .scrapbook, .photos, .reviews, #navdivider, .secondary_links, .friends, .groups, .controlpanel p {display:none!important;}

"ditulis dalam satu baris"

Source code tersebut diatas berguna untuk menghilangkan beberapa tampilan yang berada di profile fs mu.

Kemudian simpanlah source code tersebut dengan nama "file1.css", tentu saja kamu bisa mengganti namanya sesuai dengan keinginanmu.

Kemudian kita akan membuat external "Javascript", buka teks editor mu kemudian copy-pastekan source code berikut ini :
alert("Halo "+pageViewerFName+"!" + '\n' + "tengkyu ya udah mau mampir" + '\n' + "Salam untuk emak dirumah ^^");
"Ditulis dalam satu baris"

Source code tersebut diatas berguna untuk menampilkan alert message box ketika profile Fs mu dibuka.

Kemudian simpanlah source code tersebut dengan nama "file2.js", tentu saja kamu bisa mengganti namanya sesuai dengan keinginanmu.

Sekarang kita telah memiliki dua file yang berbeda, satu file untuk css dan satu file nya lagi untuk java. Bagaimana caranya kita bisa menghubungkan keduanya?, kita bisa menghubungkan kedua file tersebut dengan bantuan satu file lagi yang bisa berhubungan langsung ke profile Fs mu (file external script direct).

Sekarang kita akan membuat file yang ketiga, yang berfungsi sebagai "terminal" direct dari kedua file yang telah kita tulis sebelumnya. File yang ketiga ini juga bisa digunakan sebagai external script java untuk profile Fs mu, namun pada kesempatan ini kita akan menggunakannya sebagai penghubung antara dua file tersebut diatas yang berlainan type.

Buka teks editormu, kemudian copy-pastekan source code berikut ini :
var css = document.createElement("link");
css.setAttribute("rel","stylesheet");
css.setAttribute("href","http://PATH-HOSTING-KAMU/file1.css");
document.getElementsByTagName("head")[0].appendChild(css);

var myjs = document.createElement("script");
myjs.type = "text/javascript";
myjs.src = "http://PATH-HOSTING-KAMU/file2.js";
document.getElementsByTagName("head")[0].appendChild(myjs);

Ganti tulisan yang berwarna hijau tersebut diatas dengan path hosting kamu, contoh:

"http://geocities.com/matcode_te/file2.js"
atau

"http://h1.ripway.com/matcode_te/file1.css"

Kemudian simpan dengan nama "terminal.js", nama ini bisa kamu ganti sendiri.

Jika telah selesai membuat file tersebut, upload ketiga file tersebut ke hostingan mu yang sesuai dengan path hosting tersebut diatas. Dan selanjutnya kamu harus mengingat path link "terminal.js" dimana file tersebut kamu letakkan. Kita anggap saja hostinganmu ada di "http://geocities.com" dengan account "codet" dan file "terminal.js" tersebut diletakkan dalam folder "fs". Sehingga path file tersebut menjadi :
"http://geocities.com/codet/fs/terminal.js"

Path link tersebut diatas hanya sebagai contoh, kamu harus mengingat sendiri dimana file yang kamu upload tersebut diatas diletakkan. Untuk menguji apakah path link yang kamu ingat tersebut benar atau tidak, silahkan copy-pastekan di address bar browser kamu, jika tidak menampilkan tulisan seperti isi dari "terminal.js", maka link tersebut salah dan kamu harus memperbaiki link tersebut.

Selanjutnya kita akan memasang linker kedalam "badan" profile Fs kita agar bisa berhubungan dengan script external yang telah kita upload tadi.

Login terlebih dahulu ke FS kita, kemudian masuk ke dalam menu "edit profile". Pada kolom "About Me: (Describe Yourself)" isikan source berikut ini :
<script src=" http://LINK-PATH-HOSTING-KAMU/terminal.js"></script>

Sampai sebatas ini jika tidak ada masalah, linker telah terpasang ke badan profile fs mu dengan script yang berada di hostinganmu. untuk melihat hasilnya, silahkan buka halaman depan profile Fs mu.

Selamat mencoba
[0] Referensi : http://friendstertalk.com

10 comments:

  1. Mas mau tanya nich cara menggabungkan 2(dua) text/javascript diatas head. Terimakasih

    ReplyDelete
  2. kunjungan ni sobat.. kunjungan balik ya

    ReplyDelete
  3. ijin praktek gan, terimakasih sudah berbagi ilmu.

    ReplyDelete
  4. File css berpengaruh dari pemilihan theme gak ya gan, maaf masih belajar, terima kasih.

    ReplyDelete
  5. makasih kak atas informasinya ini sangat membantu saya dalam menggunakan form dengan javascript terus semangat ya kak ditunggu di artikel kak selanjutnya perkenalkan nama saya rida anggraini dan ini link website kampus kami https://www.atmaluhur.ac.id

    ReplyDelete
  6. Wah, Artikel yang bagus kakak. Dengan ini saya bisa membuat website dengan benar. Perkenalkan nama saya Muhamad Asfarezhan, Nim 1922500056 dari Kampus STMIK Atmaluhur. Jika berkenan atau ingin melihat - lihat. Silahkan kunjungi > www.atmaluhur.ac.id

    ReplyDelete
    Replies
    1. ngape nya ikak nye-pam website ikak di blog sini, ikak urang bangke ukan? atmaluhur ya deket selindung

      Delete