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

Wednesday, March 27, 2013

Cara Membuat Background Tetap Pada Dokumen HTML

8:22 AM    1 comment

Cara Membuat Background Tetap Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Memasang Cursor Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Background Tetap Pada Dokumen HTML'.

Background adalah sebuah latar belakang dari sebuah halaman. Jika dikaitkan dengan konteks HTML maka background merupakan latar dari sebuah halaman HTML. Tujuan dari pemasangan sebuah background tentu saja untuk mempercantik tampilan dari dokumen HTML yang kita buat. Lalu apa yang dimaksud dengan Background Tetap (Fixed Background)? Background Tetap yang dimaksud di sini adalah sebuah image background yang posisinya selalu tetap pada screen atau layar (tidak bergerak) meskipun halaman tersebut kita scroll kebawah maupun sebaliknya.

Baca juga: Cara Membuat Images Slideshow Pada Dokumen HTML

Baiklah berikut ini cara membuat Background Tetap pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Background Tetap 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 Background Tetap pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Background Tetap Pada Dokumen HTML </title>

    <style type="text/css">
    body {
    background: url('images/background.jpg') no-repeat #2D5594;
    background-attachment: fixed;
    }
    </style>

    </head>

    <body>

    </body>
    </html>

    Keterangan

    1. Sisipkan sebuah style code untuk memasang cursor di atas tag </head> seperti pada contoh di atas, ganti 'images/background.jpg' dengan url tempat Anda menyimpan file images/gambar yang akan dijadikan sebagai background.
    2. Bagian terpenting agar background menjadi tetap pada tempatnya (fixed) yaitu pada script background-attachment: fixed;.
    3. Silahkan download contoh cara membuat background tetap (fixed) dalam bentuk file HTML pada Link Di bawah ini.

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More

Tuesday, March 19, 2013

Cara Memasang Cursor Pada Dokumen HTML

8:45 PM    No comments

Cara Memasang Cursor Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Memasang Favicon Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Memasang Cursor Pada Dokumen HTML'.

Cursor adalah sebuah indicator yang digunakan untuk menunjukan posisi pada sebuah monitor/layar komputer. Diantara fungsi dari cursor yaitu untuk mengeksekusi sebuah content sebagai contoh sebuah tombol atau menu yang ditampilkan di dalam layar/monitor sebuah komputer. Cursor pada umumnya memiliki bentuk default sebuah panah kecil berwarna putih, yang mungkin terlihat kurang begitu menarik. Untuk membuatnya terlihat lebih cantik, kita dapat mengganti dengan icon cursor yang kita kehendaki.

Baiklah berikut ini cara memasang Cursor pada sebuah dokumen HTML.


Langkah-langkah:

Cara Memasang Cursor 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 memasang Cursor pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Memasang Cursor Pada Dokumen HTML </title>

    <style type="text/css">
    body {
    cursor: url('images/cur.cur'), default;
    }
    </style>

    </head>

    <body>

    </body>
    </html>

    Keterangan

    1. Sisipkan sebuah style code untuk memasang cursor di atas tag </head> seperti pada contoh di atas, ganti 'images/cur.cur' dengan url tempat Anda menyimpan file icon cursor yang akan dijadikan sebagai default cursor.
    2. Anda dapat mendownload icon cursor di sini.
    3. Silahkan download contoh cara memasang icon cursor dalam bentuk file HTML pada Link Di bawah ini.

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More

Cara Memasang Favicon Pada Dokumen HTML

6:16 AM    2 comments

Cara Memasang Favicon Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat Running Title Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Memasang Favicon Pada Dokumen HTML'.

Favicon adalah sebuah image atau gambar (icon) yang ditampilkan pada address bar dan tab sebuah browser internet yang biasanya merupakan logo dari sebuah website. Keberadaan sebuah Favicon ini sangat penting khususnya untuk membedakan sebuah website dengan website lainnya. Favicon biasanya menggunakan file image berekstensi 'ICO, GIF & PNG' namun lebih disarankan untuk menggunakan file '.ICO' karena lebih compatible dengan semua browser internet.

Baiklah berikut ini cara memasang Favicon pada sebuah dokumen HTML.


Langkah-langkah:

Cara Memasang Favicon 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 memasang Favicon pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Memasang Favicon Pada Dokumen HTML </title>

    <link href="favicon.ico" rel="shortcut icon" />

    </head>

    <body>

    </body>
    </html>

    Keterangan

    1. Sisipkan sebuah code untuk memasang favicon di atas tag </head> seperti pada contoh di atas, ganti 'favicon.ico' dengan url tempat Anda menyimpan file images yang akan dijadikan sebagai favicon.
    2. Disarankan ukuran file images (icon) yang akan dijadikan sebagai favicon 16x16px.
    3. Silahkan download contoh cara memasang favicon dalam bentuk file HTML pada Link Di bawah ini.

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!

Read More
Subscribe to: Posts (Atom)