Selasa, 13 Mei 2014

Spot Modus Malam Efek Lampu Senter di Blog

Anda Berada Dalam Modus Malam
You Are In Night Mode

Spot Modus Malam Efek Lampu Senter di Blog - Entah apa yang pas untuk judul artikel blog ini, sebuah efek yang mungkin jarang digunakan di beberapa blog, sebuah yang sangat menarik sekali yaitu efek modus malam. Judul artikelnya kurang baku, ada beberapa pilihan saat saya membuat judul artikel ini, yaitu efek lampu senter, efek gelap terang, efek modus malam, night mode effect, dan modus malam dengan efek senter di blog. Sedang spot sendiri menunjukkan pada satu titik yang dijadikan objek..

Spot Modus Malam Efek Lampu Senter di Blog

Entahlah apapun judulnya, pada intinya kita akan memberikan sebuah efek yang sangat menarik pada tampilan blog yaitu dengan efek modus malam dengan efek lampu senter. Dan uniknya lagi, efek ini bisa diterapkan pada satu tampilan halaman blog, misalnya halaman artikel seperti yang telah Anda lihat pada artikel ini. Artikel ini memiliki night mode effect atau efek modus malam yang tidak dimiliki oleh halaman artikel lainnya yang ada di blog ini

Ingat DEMO untuk Spot Modus Malam Efek Lampu Senter di Blog adalah halaman artikel ini

Bagaimana cara membuat efek modus malam dengan lampu senter seperti yang ada di artikel ini?
Untuk membuatnya diperlukan beberapa kode css yang cukup banyak dan juga javascript yang juga harus dipasang kedalam template blog Anda. Tertarik?
  • Masuk ke dashboar blog Anda
  • Pilih menu Template >> Edit HTML
  • Cari kode ]]></b:skin> dan salin kode CSS berikut sebelum kode ]]></b:skin>
    #night-mode-effect {
    position: fixed;
    margin:0 auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    overflow: hidden;
    background:transparent;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    z-index:0.1;
    }
    #night-mode-effect #layer-txt {
    background:#ff8200;
    color:#fff;
    font-family: Helvetica, Arial, sans-serif;
    position:absolute;
    top:5px;
    right:11px;
    margin:20px;
    padding:5px;
    z-index:9999;
    }
    #night-mode-effect #ptb-text,
    #night-mode-effect #ptb-link {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 1em;
    margin: -0.77em 0 0 0;
    font-size: 20px;
    line-height: 1em;
    font-weight: bold;
    text-align: center;
    }
    #night-mode-effect #ptb-text {
    font-size: 20px;
    color: transparent;
    text-shadow: none; 
    }
    #night-mode-effect #ptb-link a {
    color: #999;
    text-decoration: none;
    }
    #night-mode-effect #ptb-box,
    #night-mode-effect #ptb-wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    }
    #night-mode-effect #ptb-box {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }
    #night-mode-effect #ptb-wall {
    background: transparent;
    }
    #night-mode-effect #ptb-wall p {
    position: relative;
    font-size: 18px;
    line-height: 1.5em;
    text-align: justify;
    color: #222;
    width: 550px;
    margin: 1.5em auto;
    cursor: default;
    }
    #night-mode-effect #ptb-wall p a {
    color: #fff;
    }
    #night-mode-effect #ptb-wall p a:hover {
    text-decoration: none;
    color: #000;
    background: #fff;
    }
    #ptb-spot {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    background: -webkit-gradient(radial, center center, 0, center center, 450, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 450px);
    background: -o-radial-gradient(center, circle closest-side, transparent 0, black 450px);
    }
    <!--[if IE]>
    #ptb-spot {
    display: none;
    }
    #ptb-ie {
    position: absolute;
    top: -90%;
    left: -50%;
    width: 200%;
    height: 334%;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI3NCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    }
    <![endif]-->
  • Jika didalam template blog Anda menggunakan fungsi <style> maka caranya adalah salin kode css diatas diantara kode <style>
    <style type='text/css'>
    Masukkan Kode CS Disini
    </style>
  • Simpan template
  • Selanjutnya salin kode script berikut kedalam template blog Anda. Cari kode </body> dan salin sebelum kode </body> tersebut
    <script type='text/javascript'>
    // <![CDATA[
    var spot = null,box = null,boxProperty = '';
    init();
    
    function init() {
        text = document.getElementById('ptb-text');
        spot = document.getElementById('ptb-spot');
        box = document.getElementById('ptb-box');
        
        if (typeof box.style.webkitBoxShadow == 'string') {
            boxProperty = 'webkitBoxShadow';
        } else if (typeof box.style.MozBoxShadow == 'string') {
            boxProperty = 'MozBoxShadow';
        } else if (typeof box.style.boxShadow == 'string') {
            boxProperty = 'boxShadow';
        }
    
        if (text && spot && box) {
            document.getElementById('night-mode-effect').onmousemove = onMouseMove;
            document.getElementById('night-mode-effect').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
        }
    }
    
    function onMouseMove(e) {
        if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
            return;
        }
        
        var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4,
            ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4,
            d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
        
        text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
        
        if (boxProperty) {
            box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
        }
        
        xm = e.clientX - Math.floor(window.innerWidth / 2);
        ym = e.clientY - Math.floor(window.innerHeight / 2);
        spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
    }
    // ]]>
    </script>
  • Simpan temlapte

Cara Menggunakan Efek Modus Malam - Night Mode Effect
Untuk menggunakan tampilan modus malam dengan efek lampu senter ini sebelumnya harus mengikuti langkah-langkah diatas yaitu menyalin kode css dan script. Selanjutnya silahkan gunakan kode berikut ini dan pasang sebelum atau sesudah objek yang ingin digunakan

<div id="night-mode-effect">
<div id="layer-text">
Anda Berada Dalam Modus Malam
You Are In Night Mode</div>
<div id="ptb-box">
</div>
<p id="ptb-text">
</p>
<div id="ptb-layar">
<div id="ptb-ie">
</div>
</div>
<div id="ptb-spot">
</div>
</div>
Diantara kode diatas masih bisa diselipkan beberapa teks dan link

Contoh:
Jika ingin menampilkan modus malam pada artikel blog atau seperti yang ada di artikel ini, masukkan atau salin terlebih dahulu kode html diatas sebelum menulis artikel

Format Penulisan:
--> Kode HTML Modus Malam <---
Artikel blog...................................

atau
Artikel blog...................................
--> Kode HTML Modus Malam <---

Begitu juga jika hanya ingin menampilkan efek modus malam dibagian sidebar, pemasangannya sama seperti yang telah saya tulis diatas.
Bagaimana jika ingin menampilkan efek modus malam dengan lampu senter ini di seluruh atau di semua halaman blog atau seluruh tampilan blog memiliki efek modus malam? Agar seluruh tampilan blog memiliki efek modus malam, maka seluruh kode html yang ada dibagian <body> harus ditutup dengan kode html efek modus malam ini. Dan pada artikel ini saya tidak akan menjelaskan cara penggunaannya karena jika seluruh tampilan blog Anda memiliki efek modus malam, maka hal itu akan berakibat buruk pada blog Anda, terumata dari segi kenyamanan pengunjung blog

Bagaimana tertarik untuk menggunakan tampilan modus malam dengan efek lampu senter di blog Anda?

Referensi http://www.zachstronaut.com/posts/2012/01/17/stop-sopa-protest-template.html

Spot Modus Malam Efek Lampu Senter di Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

16 komentar:

  1. keren nih efek modus centernya :)

    BalasHapus
  2. silahkan kalau mau dicoba mas :)

    BalasHapus
    Balasan
    1. Keren banget mbak efeknya,serasa ditempat gelap di halaman ini.hehehee

      Hapus
    2. heheee lagi mati lampu mas..

      Hapus
  3. owalahhhhhh, keren efeknya mbakkk... sipsssssssss.... :)

    BalasHapus
    Balasan
    1. :) silahkan kalau ingin digunakan mas

      Hapus
  4. wah keren, kreatif mbak.. saya kira blognya mati lampu :D

    BalasHapus
    Balasan
    1. heheee iya nich mbak, masih mati lampu gara-gara belum bayar tagihan listrik heheee... makasih ya mbak atas kunjungannya

      Hapus
  5. keren bngt gan :D
    asli salut ane :D

    Cerita Dewasa

    BalasHapus
  6. Balasan
    1. :) sama-sama, makasih mbak Indi..

      Hapus
  7. Ikutan meramaikan tutorialnya mbak, mau saya pasang diblog saya takut mbak, soalnya diblog saya banyak gambar yang serem-serem hehehe..nanti pengunjungnya gaget :) jadi lari deeh....hihihihii/..?

    BalasHapus
    Balasan
    1. Terimakasih kang Ipung telah berkunjung lagi ke blog ini :)
      heheee serem tapi banyak manfaatnya disana kang..

      Hapus
  8. seperti dunia nyata mbak, blog juga bisa seperti lagi mati lampu :D ,untung mbak ana nyedia'in senter :)

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia