Wednesday, April 27, 2016

Cara Membuat Turn On/Off Lights Video di Blog


Prodeku - Mungkin anda pernah membuka sebuah website dengan konten berupa video, baik itu Film ataupun Anime yang dapat di tonton secara langsung (streaming). Saat anda akan melakukan streaming pada website tersebut, biasanya anda akan dijumpai sebuah tombol yang diberi nama "Turn Off the Lights" atau "Turn Off" saja.

Baca juga: Cara Membuat Show Hide Contact Form di Sudut Blog

Apa sih fungsi tombol tersebut?

Fungsi dari tombol "Turn Off the Lights" yaitu apabila anda mengklik tombol tersebut, nantinya seluruh background website tersebut akan berubah menjadi gelap kecuali pada video yang sedang anda tonton. Jadi, mata anda dapat lebih terfokus pada video yang sedang di putar karena hanya cahaya di video yang terlihat terang.

Lalu, apa yang terjadi pada tombol tadi? 

Setelah background website menjadi gelap, tulisan pada tombol tersebut akan berubah menjadi "Turn On the Lights" yang artinya hidupkan cahaya. Apabila tombol tersebut anda tekan lagi, maka background akan kembali seperti semula.

Bagaimana, menarik bukan? bila anda ingin mencobanya, silahkan ikuti tutorial berikut ini.

Tutorial Turn On/Off Light Video

  1. Buka akun blogger
  2. Pilih menu Template > Edit HTML
  3. Cari kode </head>, tambahkan kode berikut ini sebelum kode </head>

    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
    $("#plo").css("height", $(document).height()).hide();
    $(".pls").click(function(){
    $("#plo").toggle();
    if ($("#plo").is(":hidden"))
    $(this).html("Turn Off").removeClass("pto");
    else
    $(this).html("Turn On").addClass("pto");
    });
    });
    //]]>
    </script>
  4. Cari kode ]]></b:skin>, tambahkan kode berikut ini sebelum kode ]]><b:skin>

    /* Turn On Off the Lights by Prodeku.web.id */
    #plv {
    position:relative;
    z-index:999;
    }
    .pls {
    z-index:998;
    float: right;
    background: #dd4b39;
    display: inline-block;
    color: #fff;
    border-radius: 3px;
    margin: 3px;
    padding: 5px 8px;
    }
    .pls:hover {
    color: #fff;
    background-color: #C74433;
    }
    .pto {
    float: right;
    position:relative;
    background: #C74433;
    display: inline-block;
    color: #fff;
    border-radius: 3px;
    margin: 3px;
    padding: 5px 8px;
    }
    .pto:hover {
    color: #fff;
    background-color: #dd4b39;
    }
    #plo {
    background:#000;
    opacity:0.9;
    filter:alpha(opacity=90);
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:997;
    }
  5. Cari kode </body>, salin kode berikut ini sebelum kode </body>

    <div id='plo'/>
  6. Simpan Template.
Apabila langkah-langkah diatas sudah dilakukan semua, sekarang anda tinggal menerapkannya pada postingan video di blogger anda. Caranya sangat mudah, silahkan salin kode berikut ini pada postingan anda.

<a class="pls" href="javascript:void(0);">Turn Off</a>
<div id="plv">
--- TAMBAHKAN VIDEO DISINI ---
</div>
Keterangan: Pada tulisan yang telah saya beri warna pink, silahkan anda ganti dengan embed code dari video yang ingin anda tampilkan.

Apabila ada yang perlu ditanyakan, silahkan bertanya pada kolom komentar dibawah ini.

Demiikian artikel tentang cara membuat tombol turn on/off lights video yang dapat digunakan pada blog dengan konten film atapun anime di blogger milik anda. Selamat mencoba ... 

Tags

15 komentar

keren nih gann :3
ngomong-ngomong ada demonya ngga XD

demonya bisa cek disini gan :D http://www.kumpulmovieindo.net

fail gimana gan? sudah sesuai prosedurnya belum?

untuk wordpress biasanya menggunakan plugin streaming gan

Sudah di lakukan sesuai prosedur gan? jangan lupa sebelum /body tambahkan div id='plo' untuk menghitamkan background

This topic is very important for everyone who is engaged or just planning to become a blogger, as this will bring many benefits.

By blurring the blog's background, you can easily concentrate your eyes on the information you are reading.

After completing all the steps described, you can easily apply them to your blog and get the result you expected.

Tinggalkan komentar walaupun hanya sepatah kata
EmoticonEmoticon