Membuat Hadits Berjalan (scrolling)

Jika Anda melihat Hadits Nabi yang berjalan di sidebar bukamulut, itu sesungguhnya adalah file HTML yang di-convert menjadi .js file. Untuk konversi dari HTML ke .js file, saya menggunakan JS External File Creator yang bisa Anda download nanti. Lihat kembali Hadits Nabi. Selain scrolling, tulisan ini juga bisa berhenti jika Anda letakkan kursor di atasnya, sehingga Anda bisa membacanya dengan tenang. Begitu kursor dipindahkan, shadits akan kembali scrolling seperti semula.

 

Saya akan menjelaskannya cara membuatnya semampu saya. Sebagai persiapan, lakukan langkah-langkah berikut:

1. Download JS External File Creator (189 Kb). Software ini tidak perlu diinstall. Cukup di-extract pada folder terpisah di komputer Anda, agar mudah untuk kita gunakan nanti.
2. Download file HaditsScroll.htm di sini. Nanti Anda bisa mengeditnya sesuai keperluan dengan menggunakan HTML Editor, misalnya Microsoft Frontpage.

Sekarang ke proses pembuatannya:

• Buka file HaditsScroll.htm dengan Microsoft Frontpage atau yang sejenis itu. Kalau mau, Anda bisa melakukan modifikasi sesuai selera Anda, misalnya mengganti hadits ini dengan kata mutiara, atau yang lainnya. Demikian juga soal warna, tampilan dll. Jangan lupa juga untuk mengecek apakah fungsi-fungsinya tidak berubah setelah Anda edit? Misalnya apakah masih bisa scrolling? Atau apakah tulisannya masih bisa berhenti ketika dilewati kursor? Jika semuanya sudah sesuai dengan keinginan Anda, jangan lupa untuk menyimpannya (save).
• Buka folder tempat Anda menyimpan JS External File Creator. Klik jsFile.exe untuk mulai menggunakan software ini. Setelah di klik akan muncul tampilan seperti ini.

• Lihat di bagian bawah. Cari tulisan 'select HTML', lalu klik di situ dan arahkan ke tempat dimana Anda menyimpan file HaditsScroll.htm
• Sekarang lihat ke bagian atas. Pilih 'Create .js file' dan sesudah itu klik 'Save .js file', beri nama sesuai keinginan Anda, dan simpan dengan nama misalnya: hadits.js.
• Upload file berekstensi .js ini (hadits.js) ke tempat penyimpanan file Anda, misalnya di www.geocities.com. Catat alamatnya, karena ini yang akan kita panggil dari blog kita. Contoh: http://www.geocities.com/AccountAnda/hadits.js

Hampir selesai. Sekarang langkah terakhir, yakni memanggil HaditsScroll ini dari blog kita. 

• Login ke account Anda di Blogger.com
• Telusuri hingga Anda sampai ke Template, guna mengedit dan memasukkan script untuk memanggil HaditsScroll.
• Copy script di bawah ini, lalu paste di tempat yang Anda inginkan. Sebagai contoh, saya menyimpannya di sidebar. Ganti/isi source (SRC) dengan alamat real tempat Anda menyimpan file hadits.js di internet.

<p align="center"><<SCRIPT LANGUAGE = "JavaScript" SRC = "http://www.geocities.com/AccountAnda/hadits.js" type="text/javascript"></SCRIPT> <NOSCRIPT>Javascript must be enabled to view the contents of this page!</NOSCRIPT> </a></p>

• Klik 'Preview' untuk melihat hasilnya. Jika sudah OK, tinggal di-publish.
• Selamat, blog Anda tambah cantik dengan riasan baru!!

Note

 

Untuk yang nggak mau pusing soal 'edit mengedit', Anda hanya perlu melakukan langkah sederhana berikut ini: 

• Download file hadits.js versi saya di sini
• Upload file berekstensi .js ini (hadits.js) ke tempat penyimpanan file Anda, misalnya di www.geocities.com. Catat alamatnya, karena ini yang akan kita panggil dari blog kita. Contoh: http://www.geocities.com/AccountAnda/hadits.js
• Login ke account Anda di Blogger.com
• Telusuri hingga Anda sampai ke Template, guna mengedit dan memasukkan script untuk memanggil HaditsScroll.
• Copy script di bawah ini, lalu paste di tempat yang Anda inginkan. Sebagai contoh, saya menyimpannya di sidebar. Ganti/isi source (SRC) dengan alamat real tempat Anda menyimpan file hadits.js di internet.

<p align="center"><<SCRIPT LANGUAGE = "JavaScript" SRC = "http://www.geocities.com/AccountAnda/hadits.js" type="text/javascript"></SCRIPT> <NOSCRIPT>Javascript must be enabled to view the contents of this page!</NOSCRIPT> </a></p>

• Klik 'Preview' untuk melihat hasilnya. Jika sudah OK, tinggal di-publish. Selamat mencoba.

Tags: Blogging, Internet