Cara Membuat Effect Lampu Padam Pada Blog Dengan jQuery

TheCode-X

jQuery, Tips and Tricks, Tutorial

Tuesday, 16 December 2014

3 Komentar

Sobat Skato sekalian, pada postingan ke dua ini saya akan berbagi trik bagaimana memodifikasi tampilan blog pada laman video atau tv online anda, ini bertujuan agar ketika menonton atau menyaksikan acara dilayar video atau tv, pandangan kita dapat dengan fokus tertuju pada layar yang ada.
Trik kali ini saya beri judul Cara membuat efek lampu padam pada blog dengan jQuery di halaman yang menampilkan kategori video, tv online atau yang sejenisnya, dalam kata lainnya membuat tampilan selain layar video atau tv di blog anda menjadi gelap, dengan menggunakan panel turn-on dan turn-off.
Mari kita praktekan trik nya dengan mengikuti proses yang saya jelaskan dibawah ini.

Cara membuat effect lampu padam pada blog dengan jQuery

Demo

Simak langkah² dibawah ini:
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

#nyala-padam {
    position:relative;
    z-index:102;
    }
    #tombozx {
    max-width:650px;
    text-align:left;
    position:relative;
    height:25px;
    display:block;
    margin: 25px 0 0 60px;
    }
    .tombozlampu {
    position:absolute;
    z-index:101;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFWSG4c1ZbFI-trnRYClkgMxo7Fmo6OfGzXVVY7ZZfyZETaOgD9n3nG0rkqqALPxjoGh_Oz_RPJnhnj59Pg-M5BKuMPs3jVbWZvXfksbBfDUpJsHXiYSog5pxoPS9Q6CyKJfj6_7jYjEI/s1600/lampu-nyala.png);
    background-repeat:no-repeat;
    background-position:left;
    padding: 0 0 0 20px;
    outline:none;
    text-decoration:none;
    }
    .tombozlampu:hover {text-decoration:underline;}
    .matikan {
    color:#ffff00 !important;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNbYP-PQXF9nEk2l-B-ueb_9BwnpGeX6-762q-MLBfUYnF0_sUZFL9m9mnX0YUX13bZlxrMmIepKPRi2e7x9pIG-sfA_oeP0MgbFk5bA5rOwaUhgGCAQ72WxFbY__mlXurIQMAK0Oc1ng/s1600/lampu-padam.png);
    }
    #lampupadam {
    background:#000;
    opacity:0.9;
    filter:alpha(opacity=90);
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:100;
    }

5.  Tekan Ctrl+F cari kode </head>
6.  Lalu tambahkan kode jQuery berikut ini tepat diatas kode </head>

<script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
    $("#lampupadam").css("height", $(document).height()).hide();
    $(".tombozlampu").click(function(){
    $("#lampupadam").toggle();
    if ($("#lampupadam").is(":hidden"))
    $(this).html("Padamkan Lampu").removeClass("matikan");
    else
    $(this).html("Nyalakan Lampu").addClass("matikan");
    });
    });
    //]]>
    </script>

7. Letakan kode HTML berikut ini tepat diatas kode </body>

 <div id='lampupadam'/>

8.  Save Template.
9.  Untuk memanggilnya letakan kode HTML berikut di halaman postingan

    <div id="tombozx">
    <a class="tombozlampu" href="javascript:void(0);">Padamkan Lampu</a>
    </div>
    <div id="nyala-padam">
    Kode Video atau Tv Online letakan disini....
     </div>

Keterangan:
Untuk mengatur lebar pada tampilan video atau tv cari kode CSS berikut:
max-width:650px;  ganti dengan ukuran lebar video atau tv anda.

Ganti Teks  Kode Video atau Tv Online letakan disini.... dengan kode video anda

10.  Selesai dan selamat mencoba.