fbpx

Menampilkan Notify

Berikut adalah script untuk menampilkan notify order pada InstanLINK. Bisa Anda gunakan seperti pada video tutorial dibawah ini.

Script Notify :

<style>
@import url(“https://fonts.googleapis.com/css?family=Open+Sans:400,600”);
.bok-notif-luar {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9999999999999 !important;
font-family: ‘Open Sans’, sans-serif;
}
.bok-notif-luar .bok-dalam {
width: 240px;
border: 0;
text-align: left;
z-index: 99999;
box-sizing: border-box;
font-weight: 400;
border-radius: 6px;
box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.2);
background-color: #fff;
position: relative;
cursor: pointer;
}
.bok-notif-luar .bok-dalam .bok-dalam-container {
display: flex !important;
align-items: center;
height: 80px;
}
.bok-notif-luar .bok-dalam .bok-dalam-container .bok-dalam-image-jd img {
max-height: 75px;
width: 90px;
overflow: hidden;
border-radius: 6px 0 0 6px;
object-fit: cover;
}
.bok-notif-luar .bok-dalam .bok-dalam-container .bok-dalam-content-jd {
margin: 0;
height: 100%;
color: gray;
padding-left: 20px;
padding-right: 20px;
border-radius: 0 6px 6px 0;
flex: 1;
display: flex !important;
flex-direction: column;
justify-content: center;
}
.bok-notif-luar .bok-dalam .bok-dalam-container .bok-dalam-content-jd .bok-dalam-content {
font-family: inherit !important;
margin: 0 !important;
padding: 0 !important;
font-size: 14px;
line-height: 16px;
}
.bok-notif-luar .bok-dalam .bok-dalam-container .bok-dalam-content-jd .bok-dalam-content small {
margin-top: 3px !important;
display: block !important;
font-size: 12px !important;
opacity: .8;
}
.bok-notif-luar .bok-dalam .custom-close {
position: absolute;
top: 8px;
right: 8px;
height: 12px;
width: 12px;
cursor: pointer;
transition: .2s ease-in-out;
transform: rotate(45deg);
opacity: 0;
}
.bok-notif-luar .bok-dalam .custom-close::before {
content: “”;
display: block;
width: 100%;
height: 2px;
background-color: gray;
position: absolute;
left: 0;
top: 5px;
}
.bok-notif-luar .bok-dalam .custom-close::after {
content: “”;
display: block;
height: 100%;
width: 2px;
background-color: gray;
position: absolute;
left: 5px;
top: 0;
}
.bok-notif-luar .bok-dalam:hover .custom-close {
opacity: 1;
}

.poweredby {
font-weight: 600;
text-decoration: none;
margin-left: 3px;
color: #3498db;
}
/* SALES */
#sales-note {
opacity:0;
transition: opacity 300ms;
}

#sales-note.on {
opacity:1;
transition: opacity 250ms cubic-bezier(0.17, 0.04, 0.03, 0.94)*/
}
</style>
<section id=”sales-note” class=”bok-notif-luar”>
<div class=”bok-dalam”>
<div class=”bok-dalam-container”>
<div class=”bok-dalam-image-jd”>
<img id=”foto” src=”https://i.ibb.co/L0343VX/Orderintanlink.png” style=”width: 50px; height: 50px”>
</div>
<div class=”bok-dalam-content-jd”>
<p class=”bok-dalam-content”>
<small><b class=”l”>Iwan</b> membeli<b> instanlink</b> paket<b class=”s”> Basic</b> </small>
<small><b class=”t”>17 menit</b> yang lalu</small>
</p>
</div>
</div>
<div class=”custom-close”></div>
</div>
</section>
<script id=”rendered-js” >
setInterval(function () {
$(“.bok-notif-luar”).
stop().
slideToggle(“slow”);
}, 2000);
$(“.custom-close”).click(function () {
$(“.bok-notif-luar”).
stop().
slideToggle(“slow”);
});
</script>
<script>
var nama = [“Scratch”, “Pulsa Reload”, “Kudoll”, “Erwin XP”, “Petra”, “Oktavia”, “Wellian”, “Dwi Muhammad”, “Ahmad”, “PMC Kids”];

var el = document.getElementById(‘sales-note’);
var t = 0;
var s = ”;

function doSalesNotes () {

t = (Math.floor(Math.random() * 10)+1);
(t%2==0) ? s=’ Reguler’ : s=’ Bussiness’;

el.querySelector(‘b.t’).textContent = t + ‘ menit’;
el.querySelector(‘b.l’).textContent = nama[Math.floor(Math.random() * 10)];
el.querySelector(‘b.s’).textContent = s;

el.classList.add(‘on’);

}

ready(setInterval(doSalesNotes, 4000));

function ready(fn) {
if (document.attachEvent ? document.readyState === “complete” : document.readyState !== “loading”){
fn();
} else {
document.addEventListener(‘DOMContentLoaded’, fn);
}
}

var toggle = function (elem) {
elem.classList.toggle(‘on’);
};
</script>