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..

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