Dasar Memasang JavaScript Dengan Framework (2)
Artikel ini merupakan bagian kedua dari Dasar Memasang JavaScript Dengan Framework (Bagian 1)
Setelah kita memiliki file JavaScript library dan plugin yang akan digunakan, maka langkah selanjutnya adalah mengupload file-file tersebut. Kita bisa memanfaatkan layanan hosting file gratis seperti Google Pages untuk menyimpan filenya, tetapi lebih baik memakai hostingan yang sama dengan blog.
Langkah selanjutnya adalah melihat kode sumber dari file demonya langsung. File demo biasanya berupa file HTML statis, buka dengan Firefox dan lihat kode sumbernya atau bisa memakai text editor.
1 – Include
Menyertakan file-file js library, plugin, dan CSS. Lihat dulu kode sumber pada demo untuk mencari file apa saja yang disertakan. Masukkan baris-baris berikut antara bagian <head> dengan </head>
<link rel="stylesheet" href="http://www.domain.com/path_to/file.css" type="text/css" media="screen" /> <script src="http://www.domain.com/path_to/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="http://www.domain.com/path_to/fileplugin.js" type="text/javascript"></script>
Buat pengguna WordPress bisa menyertakan file-filenya di dalam folder tema yang dipakai dengan mengganti baris-baris di atas dengan baris-baris berikut:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/path_to/file.css" type="text/css" media="screen" />
<script src="<?php bloginfo('template_directory'); ?>/path_to/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/path_to/fileplugin.js" type="text/javascript"></script>
Jangan lupa sesuaikan url path di atas dengan url path yang anda pakai.
2 – JavaScript Codes
Biasanya kode-kode JavaScript tambahan juga diperlukan, bisa berupa opsi,parameter, atau operator yang menginisialisasi efek dan membuat efek JavaScript bekerja atau menghasilkan efek-efek yang berbeda-beda. Untuk yang ini masing-masing plugin mempunyai kode yang berbeda-beda, tetapi semuanya diawali dengan <script type="text/javascript"> dan diakhiri dengan </script>. Cari kode-kode tersebut pada file demo dan masukkan ke template pada bagian <head>.
Biasanya dalam setiap demo terdapat banyak pilihan parameter atau operator kode-kode JavaScript yang dapat kita manfaatkan sesuai keinginan atau kebutuhan kita.
3 – Markup
Langkah selanjutnya adalah menuliskan kode markup pada template yang akan kita pakai. Kode-kode markup ini kita contek dari kode sumber file demo dan kita implementasikan pada template (misalnya kita pasang di sidebar atau yang lainnya). Kode-kode markup yang digunakan berdasarkan file CSS eksternal yang sudah kita sertakan pada baris pertama langkah no. 1. Nah, kode-kode markup ini pun tergantung pada masing-masing plugin, tetapi biasanya mengandung penggunaan atribut ID dan Class yang mengacu pada CSS-nya.Berikut ini adalah salah satu contoh penulisan markup yang saya ambil dari Accordion v2.0 yang ditulis memakai Scriptaculous:
<h2 class="accordion_toggle">Title Bar</h2> <div class="accordion_content">...</div> ... ... ... <h2 class="accordion_toggle">Title Bar</h2> <div class="accordion_content">...</div>
4 – CSS Styling
Yang terakhir yang perlu dilakukan setelah JavaScript tersebut sudah bekerja dengan baik adalah penyesuaian tampilan dan warna pada file CSS-nya (yang kita sertakan pada langkah no.1 di atas) supaya tampilannya sesuai dengan layout yang kita pakai. Untuk langkah terakhir ini silakan edit sendiri kode-kode CSS-nya supaya tampilannya sesuai dengan ukuran dan konstruksi layout template yang kita pakai.
Saya harap bisa membantu. Silakan tulis komentar kalau ada yang perlu ditanyakan, dikoreksi, atau cuma mau menambahkan. 
Related Posts ↓
Blog ini cuma blog komersil yang dipakai oleh fanari buat nyari duit. Siapa fanari?? Calon "pengangguran" yang (mencoba) sukses dalam bisnis online :). 
{19 Comments so far ↓}