Membuat Spot Modus Malam Efek Lampu Senter di Blog

Membuat Spot Modus Malam Efek Lampu Senter di Blog - Membicarakan malam tentunya identik dengan suasana gelap, untuk melihat disuatu kegelapan diperlukan sebuah cahaya. Pada artikel kali ini saya akan membuat suasana pada Blog seperti malam hari dengan sebuah penerangan lampu senter.

Menciptakan modus malam ini menggunakan tiga kode yang digunakan yaitu CSS, Javascript dan HTML. Modus malam seperti pada ulasan Artikel saya sebelumnya yaitu membuat efek kaca pembesar, memiliki kesamaan pada penyorotan dalam satu titik. Untuk demo-nya Anda bisa melihat screnshotnya diatas :
Berikut ini caranya :

L1-Pemasangan CSS
pada pemasangan CSS, silahakan Anda buka Editor Template kemudian cari kode  ]]></b:skin> , lalu copy kode berikut dan pastekan di bawahnya :

CSS

<style type="text/css">
#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]-->
</style>

L2-Pemasangan Javascript
Pada pemasangan Javascript, anda cari kode </body> , kemduian Anda copy kode dibawah ini dan pastekan sebelumnya :

Javascript

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

L3-Pemasangan HTML
Pada pemasangan HTML, Anda buka Entri baru kemudian masuk ke Mode HTML dan pastekan kedalamnya

HTML

<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>
<div id="ptb-text">
</div>
<div id="ptb-layar">
<div id="ptb-ie">
</div>
</div>
<div id="ptb-spot">
</div>
</div>

Note :
>> Dalam pemasangan HTML pada Artikel anda terapkan kode HTML sesudah pembuatan Artikel
>> Jika Anda ingin keseluruhan Blog modus malam, ada terapkan kode HTML sebelum kode
>> Perlu Anda ketahui dengan membuat Blog dengan keseluruhan modus malam kurang efektif untuk pengunjung karena dapat menggangu kenyaman pengunjung saat membaca artikel Anda

Demo Spot Modus Malam

Demo

Selamat mencoba!

Subscribe to receive free email updates: