Saturday, January 31, 2015

Cara Memasukkan Playlist Lagu Pada Dokumen HTML

7:55 PM    No comments

Cara Memasukkan Playlist Lagu Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat Efek Hujan Salju Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Memasukkan Playlist Lagu Pada Dokumen HTML'.

Playlist Lagu adalah salah satu hal yang membuat halaman web terkesan lebih menarik, dengan lantunan lagu-lagu favorit apalagi jika lagu yang diputar sesuai dengan suasana hati pengunjung tentu saja dapat membuatnya lebih betah dalam membaca artikel pada website tersebut, karena tanpa lagu bagaikan kopi tanpa gula.. Begitu kira-kira. Hehe.

Baca juga: Cara Membuat Images Slideshow Pada Dokumen HTML

Sebelumnya saya juga pernah share cara memasukkan lagu pada dokumen HTML di sini. Jika pada cara sebelumnya hanya dapat memasukkan satu buah lagu saja, kali ini saya share bagaimana cara memasukkan lebih dari satu lagu yang disajikan dalam sebuah playlist.

Baiklah berikut ini cara membuat Playlist Lagu pada sebuah dokumen HTML.


Langkah-langkah:

Cara Memasukkan Playlist Lagu Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat playlist lagu pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Memasukkan Playlist Lagu Pada Dokumen HTML </title>
    </head>

    <body>

    <!-- Begin Sound Script -->

    <embed allowscriptaccess="never" src="player/player.swf" menu="false" quality="high" width="265" height="265" name="index" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="playList=playlist/playlist.xml" wmode="transparent"></embed>

    <!-- // End Sound Script -->

    </body>
    </html>

     

    Script Playlist:
    <?xml version="1.0" encoding="UTF-8"?>
    <player showDisplay="yes" showPlaylist="yes" autoStart="random">
    <song path="Url File Lagu" title="Judul Lagu" />
    </player>

    Screenshot:
    Keterangan
    1. Ganti player/player.swf dengan Url tempat Anda menyimpan file music player. (File sudah disertakan pada link download di bawah)
    2. Ganti playlist/playlist.xml dengan Url tempat Anda menyimpan file playlist. (File sudah disertakan pada link download di bawah)
    3. Buat file playlist.xml yang merupakan file .xml yang berfungsi untuk mengkonfigurasi music player agar dapat berfungsi sebagaimana yang dikehendaki oleh Anda.
    4. Ganti Url File Lagu dengan Url dimana Anda menyimpan file lagu, kemudian Ganti Judul Lagu dengan judul lagu tersebut.
    5. Untuk menambah daftar lagu sisipkan kode <song path="Url File Lagu" title="Judul Lagu" /> dan taruh di atas kode </player>. Silahkan Anda menyusun urutan lagu sesuai dengan yang Anda kehendaki.
    6. Simpan file playlist yang baru saja Anda buat dan beri nama file tersebut dengan 'Playlist.xml' tanpa tanda kutip, atau dengan nama apa saja yang Anda kehendaki. Sebelum menyimpan pastikan 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen '.xml' bukan dokumen text biasa.
    7. Silahkan download contoh musik player lengkap yang sudah jadi dengan cara klik link 'Download Example Here' Di bawah ini.

Nb. Apabila artikel ini bermanfaat bagi Anda, silahkan bagikan dan beri feed back pada kotak komentar di bawah. Terima Kasih!

Read More

Thursday, January 29, 2015

Cara Membuat Efek Hujan Salju Pada Dokumen HTML

6:06 AM    No comments

Cara Membuat Efek Hujan Salju Pada Dokumen HTML
Pada posting sebelumnya saya share 'Cara Membuat Spoiler (Tombol Buka Tutup) Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Efek Hujan Salju Pada Dokumen HTML'.
Efek Hujan Salju merupakan sebuah efek yang mirip dengan hujan salju yang dapat mempercantik dan memberi kesan yang berbeda pada dokumen html yang kita buat. Dengan menambahkan javascript pada dokumen html maka dokumen yang kita buat pun dapat seketika terlihat lebih menarik dengan adanya Efek Hujan Salju ini.
Baiklah berikut ini cara membuat Efek Hujan Salju pada sebuah dokumen HTML.

Langkah-langkah:
Cara Membuat Efek Hujan Salju Pada Dokumen HTML:
  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat Hujan Salju pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Efek Hujan Salju Pada Dokumen HTML </title>

    <script src='js/snowstorm.js' type='text/javascript'></script>

    </head>

    <body>
    </body>
    </html>



    Ilustrasi Efek Hujan Salju:
    Cara Membuat Efek Hujan Salju Pada Dokumen HTML
    Keterangan
    1. Sisipkan kode '<script src='js/snowstorm.js' type='text/javascript'></script>' tepat di atas kode </head> seperti pada contoh di atas.
    2. Ganti js/snowstorm.js sesuai dengan Url javascript efek hujan salju Anda. (Sudah disertakan di dalam file download di bawah).
    3. Silahkan download contoh cara membuat Efek Hujan Salju dalam bentuk file HTML dengan cara klik Link 'Download Example Here' Di bawah ini.

Nb. Apabila artikel ini bermanfaat bagi Anda, silahkan bagikan dan beri feed back pada kotak komentar di bawah. Terima Kasih!

Read More

Wednesday, January 28, 2015

Cara Membuat Spoiler (Tombol Buka Tutup) Pada Dokumen HTML

9:22 AM    No comments

Cara Membuat Spoiler (Tombol Buka Tutup) Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat Background Tetap Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Spoiler (Tombol Buka Tutup) Pada Dokumen HTML'.

Spoiler adalah sebuah konten yang secara default disembunyikan di dalam sebuah element dengan disertakan sebuah tombol untuk membuka dan menutup element tersebut sehingga konten yang ada didalamnya dapat di lihat. Tujuan dari digunakannya spoiler sangat beragam, mulai dari untuk membuat artikel supaya tidak terlihat terlalu panjang maupun untuk tujuan lainnya.

Baiklah berikut ini cara membuat Spoiler pada sebuah dokumen HTML.


Langkah-langkah:
Cara Membuat Spoiler Pada Dokumen HTML:
  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat Spoiler pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Spoiler Pada Dokumen HTML </title>
    </head>

    <body>
    <!-- Awal Script Spoiler --> 
    <div>
    <div style="margin-bottom: 5px;">
    <span style="font-size: large; font-weight:bold;">Judul Spoiler:</span>
    <input value="Buka" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }"></div>
    <div style="margin: 0px; padding: 10px; border: 1px inset;">
    <div style="display: none;">

    Letakan Konten Di Sini..!!

    </div>
    </div>
    </div>
    <!-- Akhir Script Spoiler -->

    </body>
    </html>

     

    Contoh Spoiler:

    Spoiler adalah sebuah konten yang secara default disembunyikan di dalam sebuah element dengan disertakan sebuah tombol untuk membuka dan menutup element tersebut sehingga konten yang ada didalamnya dapat di lihat. Tujuan dari digunakannya spoiler sangat beragam, mulai dari untuk membuat artikel supaya tidak terlihat terlalu panjang maupun untuk tujuan lainnya.

    Keterangan
    1. Ganti Judul Spoiler: sesuai dengan judul yang Anda kehendaki.
    2. Letakan konten yang akan dimasukkan di dalam spoiler seperti sebuah paragraf maupun file gambar tepat pada kata Letakan Konten Di Sini..!!.
    3. Silahkan download contoh cara membuat spoiler (Tombol Buka Tutup) dalam bentuk file HTML pada Link Di bawah ini.

Nb. Apabila artikel ini bermanfaat bagi Anda, silahkan bagikan dan beri feed back pada kotak komentar di bawah. Terima Kasih!

Read More
Subscribe to: Posts (Atom)