sobat Berada Dalam Modus Malam
You Are In Night Mode
You Are In Night Mode
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 sobat 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 sobat. Tertarik?
- Masuk ke dashboar blog sobat
- 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 sobat 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 sobat. 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">
sobat 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>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 sobat memiliki efek modus malam, maka hal itu akan berakibat buruk pada blog sobat, terumata dari segi kenyamanan pengunjung blog
Bagaimana tertarik untuk menggunakan tampilan modus malam dengan efek lampu senter di blog sobat?
Referensi http://www.zachstronaut.com/posts/2015/01/17/stop-sopa-protest-template.html
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@