Anda Berada Dalam Modus Malam
You Are In Night Mode
- 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 EffectUntuk 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
