Wednesday, August 5, 2015

Kiprah Nyata BNI bagi BMI di Hong Kong

Kiprah Nyata BNI bagi BMI di Hong Kong

Bank BNI merupakan salah satu Bank terbesar yang berstatus Badan Usaha Milik Negara (BUMN) yang dimiliki oleh Negara Kesatuan Republik Indonesia. Wilayah Operasinya meliputi seluruh nusantara bahkan manca negara termasuk di Republik Hong Kong. Di Hong Kong sendiri Bank BNI adalah Bank yang memiliki kantor terbesar dengan pelayanan terbaik diatara Bank-bank dari Indonesia lainnya. Kantor Bank BNI cabang Hong Kong beralamatkan di G/F, Far East Finance Center 16 Hartcourt Road.

Seperti yang kita ketahui sekarang di Hong Kong terdapat lebih dari 150 ribu Buruh Migran Indonesia (BMI) yang bekerja disektor formal maupun non-formal. Sektor formal dengan gaji standar pemerintah Hong Kong yaitu sebesar HKD 4110 dan pekerja non-formal dengan gaji yang bervariasi, maka sudah sangat wajar jika para BMI membutuhkan kiprah bank-bank untuk memudahkan para BMI dalam bertransaksi seperti menabung, cek saldo, penarikan uang, maupun mengirim uang melalui layanan transfer antar rekening Bank dan transaksi lainnya.

Perlu diketahui bahwa di Hong Kong terdapat kurang lebih 5 bank asal Indonesia untuk memudahkan transaksi para BMI. Tapi yang saya ketahui diantara bank-bank lain hanya BNI yang mempunyai kelebihan dan kiprah nyata bagi para BMI. Salah satunya yaitu menjadi satu-satunya Bank yang bekerja sama dengan KJRI Hong Kong sebagai tempat pembayaran untuk membuat atau renew passport dan ini sangat membantu sekali bagi para BMI sehingga tidak perlu mengantri terlalu lama di KJRI karena waktu para BMI sangatlah terbatas.

BNI adalah satu-satunya Bank di Hong Kong yang dapat langsung melakukan print out pada buku tabungan ketika nasabah menabung dan tanpa dipungut biaya/gratis, hal itu berbeda dengan Bank asal Indonesia lainnya yang mengenakan biaya sebesar HK$ 30 dan harus menunggu 1 bulan setiap pencetakan buku tabungan. Maka tidaklah heran bila setiap hari di bank BNI pasti akan terlihat antrian yang panjang yang notabene adalah mbak-mbak BMI entah untuk keperluan menabung maupun melakukan transaksi lainnya.

Nasabah Bank BNI diberikan kemudahan dengan adanya fasilitas ATM (Automated Teller Machine) yang tersebar di berbagai titik strategis di wilayah Hong Kong. Dengan adanya mesin ATM di setiap sudut area yang menjadi tongkrongan para BMI, sangat memudahkan para BMI untuk melakukan transaksi seperti penarikan uang, cek saldo, transfer antar rekening sesama BNI maupun Bank lain, pembayaran tagihan listrik dll. Dan yang lebih membanggakan lagi Bank BNI adalah Bank asal Indonesia yang pertama memiliki ATM sendiri di wilayah Hong Kong.

Selain memberikan layanan kepada para nasabah, BNI juga ikut berpartisipasi dalam mengedukasi BMI yang merupakan generasi penerus bangsa dengan mengadakan seminar-seminar, menjadi sponsor kegiatan kerohanian seperti mendatangkan ustad/penceramah dalam acara siraman rohani. Hal ini merupakan kiprah BNI yang patut kita apresiasi.

Tidak hanya sekedar itu, Bank BNI juga rutin mengadakan acara tahunan untuk memeriahkan weekend BMI seperti mengadakan festival band, lomba tari dan tarik suara dimana hal ini dapat memicu kreativitas BMI dalam berkarya dalam bidang seni dan sekaligus melestarikan kebudayaan bangsa yang kita cintai.

Melihat wujud nyata layanan yang diberikan BNI bagi BMI di Hong Kong, maka kiprah BNI sudah benar-benar nyata bagi para BMI. Secara tidak langsung BNI menciptakan generasi yang gemar menabung untuk masa depan yang lebih baik. Satu lagi kiprah BNI yang selalu akan saya ingat adalah disetiap event-event besar para BMI entah itu acara kemanusiaan, konser musik dan lain-lain, BNI selalu ada untuk menjadi sponsor. Tak heran bila BNI selalu dihati para nasabah BMI di Hong Kong karena BNI memang bisa memanjakan para nasabahnya.

Selamat Ulang Tahun BNI, Terima kasih karena Anda masa depan kami jadi terencana dengan baik. #69TahunBNI

Wednesday, February 4, 2015

Cara Membuat Images Slider Tanpa Jquery

Cara Membuat Images Slider Tanpa Jquery

Pada posting sebelumnya saya share 'Cara Memasukkan Playlist Lagu Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Images Slider Tanpa Jquery'.

CSS3 Slider adalah sebuah images slideshow yang dibuat menggunakan CSS3 (Cascading Style Sheets) tanpa melibatkan jquery. Dengan tidak digunakannya jquery pada slider ini maka otomatis akan membuat script semakin ringan dan website pun dapat diakses dengan lebih cepat, namun bukan berarti CSS3 Slider lebih baik dari slider yang berbasis jquery karena keduanya mempunyai kekurangan dan kelebihan masing-masing. Salah satu kelebihan slider yang berbasis jquery kita dapat menambahkan jumlah image (file gambar) dengan mudah tanpa mengotak-atik lagi Css dan jquery'nya. Hal ini berbeda apabila menggunakan CSS3 Slider, setiap kali menambahkan jumlah file image (gambar) kita harus meng'edit CSS'nya agar slider dapat bekerja dengan semestinya. Untuk mengatasi hal tersebut kabar baiknya adalah Saya menyertakan contoh CSS3 Slider ini dalam beberapa jumlah gambar yang berbeda mulai dari yang berjumlah 4 s/d 20 gambar yang dapat Anda download pada akhir artikel ini.

Artikel terkait: Cara Membuat Images Slideshow Menggunakan Jquery

Baiklah berikut ini cara membuat CSS3 Slider pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Images Slider Tanpa Jquery:

  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 CSS3 Slider pada dokumen HTML seperti pada kotak di bawah ini.

  4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Images Slider Tanpa Jquery </title>

    <link rel="stylesheet" type="text/css" href="Url File CSS" />

    </head>

    <body>

    <!-- Begin Slider -->

     Copy dan Paste Script HTML Di Sini 

    <!-- // End Slider -->

    </body>
    </html>

    Keterangan:

    1. Ganti 'Url File CSS' dengan Url tempat Anda menyimpan file CSS. Silahkan lihat script CSS'nya di bawah.
    2. Copy dan Pasti script HTML tepat sesuai instruksi di atas. (Scriptnya sudah disertakan di bawah).

     
    HTML Script:
    <div class="slider">
    <ul>
         <li>
             <a href="Url-Target" target="_blank">
             <img alt="Images 1" src="Url-images-1" />
             </a>

             <div>
                 <h3>Title #1</h3>
                 <p>Content Text...</p>
             </div>
         </li>

         <li>
             <a href="Url-Target" target="_blank">
             <img alt="Images 2" src="Url-images-2" />
             </a>

             <div>
                 <h3>Title #2</h3>
                 <p>Content Text...</p>
             </div>
         </li>

         <li>
             <a href="Url-Target" target="_blank">
             <img alt="Images 3" src="Url-images-3" />
             </a>
             <div>
                 <h3>Title #3</h3>
                 <p>Content Text...</p>
             </div>
         </li>

         <li>
             <a href="Url-Target" target="_blank">
             <img alt="Images 4" src="Url-images-4" />
             </a>
             <div>
                 <h3>Title #4</h3>
                 <p>Content Text...</p>
             </div>
         </li>
    </ul>
    </div>

    Keterangan:

    1. Ganti Url-Target sesuai dengan target halaman web yang Anda kehendaki.
    2. Ganti Url-images sesuai dengan Url tempat Anda menyimpan file gambar.
    3. Ganti Title dengan Title yang Anda kehendaki.
    4. Ganti Content Text... sesuai dengan yang Anda kehendaki.

     
    CSS Script:
    /*---------------------------- Images Slider------------------------------ */

    * {
         margin: 0 auto;
         padding: 0;
    }

    .slider {
         width: 500px; /* important to be same as image width */
         height: 300px; /* important to be same as image height */
         position: relative; /* important */
         overflow: hidden; /* important */
    }

    .slider ul {
         list-style: none;
    }

    /* keyframes #anim_slider */
    @-webkit-keyframes anim_slider {
         0% {
                 opacity: 0;
         }
         6% {
                 opacity: 1;
         }
         24% {
                 opacity: 1;
         }
         30% {
                 opacity: 0;
         }
         100% {
                 opacity: 0;
         }
    }

    @-moz-keyframes anim_slider {
         0% {
                 opacity: 0;
         }
         6% {
                 opacity: 1;
         }
         24% {
                 opacity: 1;
         }
         30% {
                 opacity: 0;
         }
         100% {
                 opacity: 0;
         }
    }

    /* animation */
    .slider ul li {
         position: absolute;
         opacity: 0;
         top: 0;

         -webkit-animation-name: anim_slider;
         -webkit-animation-duration: 24.0s;
         -webkit-animation-timing-function: linear;
         -webkit-animation-iteration-count: infinite;
         -webkit-animation-direction: normal;
         -webkit-animation-delay: 0;
         -webkit-animation-play-state: running;
         -webkit-animation-fill-mode: forwards;

         -moz-animation-name: anim_slider;
         -moz-animation-duration: 24.0s;
         -moz-animation-timing-function: linear;
         -moz-animation-iteration-count: infinite;
         -moz-animation-direction: normal;
         -moz-animation-delay: 0;
         -moz-animation-play-state: running;
         -moz-animation-fill-mode: forwards;
    }

    /* animation delays */
    .slider ul li:nth-child(2), .slider ul li:nth-child(2) div {
         -webkit-animation-delay: 6.0s;
         -moz-animation-delay: 6.0s;
    }
    .slider ul li:nth-child(3), .slider ul li:nth-child(3) div {
         -webkit-animation-delay: 12.0s;
         -moz-animation-delay: 12.0s;
    }
    .slider ul li:nth-child(4), .slider ul li:nth-child(4) div {
         -webkit-animation-delay: 18.0s;
         -moz-animation-delay: 18.0s;
    }

    .slider ul li a {
         text-decoration: none;
         color: #fff;
    }

    .slider ul li p {
         color: #fff;
         font-size: 12px;
         margin-top: -5px;
         padding: 10px 15px;
         filter: alpha(opacity=80);
         -moz-opacity: 0.8;
         -khtml-opacity: 0.8;
         opacity: 0.8;
    } .slider ul li img a {
         display: block;
         float: left;
         width: 100%;
    }

    /* keyframes #captions */
    @-webkit-keyframes captions {
         0% {
                 top: 100%;
                 opacity: 0;
         }
         5% {
                 top: 80%;
                 opacity: 1;
         }
         20% {
                 top: 80%;
                 opacity: 1;
         }
         25% {
                 top: 100%;
                 opacity: 0;
         }
         100% {
                 top: 100%;
                 opacity: 0;
         }
    }

    @-moz-keyframes captions {
         0% {
                 top: 100%;
                 opacity: 0;
         }
         5% {
                 top: 80%;
                 opacity: 1;
         }
         20% {
                 top: 80%;
                 opacity: 1;
         }
         25% {
                 top: 100%;
                 opacity: 0;
         }
         100% {
                 top: 100%;
                 opacity: 0;
         }
    }

    .slider h3 {
         text-transform: uppercase;
         color: #fff;
         font-size: 14px;
         line-height: 14px;
         padding: 10px 15px 0;
         filter: alpha(opacity=80);
         -moz-opacity: 0.8;
         -khtml-opacity: 0.8;
         opacity: 0.8;
    }

    .slider ul li div {
         text-align: center;
         color: #fff;
         background-color: rgba(45, 44, 44, 0.7);
         background: rgba(45, 44, 44, 0.7);
         margin: 0;
         padding: 0;
         position: absolute;
         bottom: 0;
         width: 500px; /* important to be same as image width */
         z-index :999;

    /* css3 animation */
         -webkit-animation-name: captions;
         -webkit-animation-duration: 24.0s;
         -webkit-animation-timing-function: linear;
         -webkit-animation-iteration-count: infinite;
         -webkit-animation-direction: normal;
         -webkit-animation-delay: 0;
         -webkit-animation-play-state: running;
         -webkit-animation-fill-mode: forwards;

         -moz-animation-name: captions;
         -moz-animation-duration: 24.0s;
         -moz-animation-timing-function: linear;
         -moz-animation-iteration-count: infinite;
         -moz-animation-direction: normal;
         -moz-animation-delay: 0;
         -moz-animation-play-state: running;
         -moz-animation-fill-mode: forwards;
    }

    Keterangan:

    1. Ganti value yang berwarna merah width (lebar) dan height (tinggi) sesuai dengan panjang dan lebar gambar Anda.
    2. Copy dan Paste script CSS di atas pada notepad dan simpan dengan nama slider.css, pastikan pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen CSS bukan dokumen text biasa.

     

    Baca juga: Cara Memasukkan Playlist Lagu Pada Dokumen HTML


    Example:
    • Cara Membuat Images Slider Tanpa Jquery

      Title #1

      Content Text...

    • Cara Membuat Images Slider Tanpa Jquery

      Title #2

      Content Text...

    • Cara Membuat Images Slider Tanpa Jquery

      Title #3

      Content Text...

    • Cara Membuat Images Slider Tanpa Jquery

      Title #4

      Content Text...



     

    Silahkan Download Slidernya 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!

Saturday, January 31, 2015

Cara Memasukkan Playlist Lagu Pada Dokumen HTML

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!

Thursday, January 29, 2015

Cara Membuat Efek Hujan Salju Pada Dokumen HTML

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!

Wednesday, January 28, 2015

Cara Membuat Spoiler (Tombol Buka Tutup) Pada Dokumen HTML

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!