Cara Membuat Inside PopUp Box Super Premium

---

Kesempatan pertama begitu menggoda, sebuah kiasan yang sekiranya perlu difikirkan sebagai sebuah strategi marketing dalam melakukan promosi situs/blog yang kita miliki. Memberikan kesan pertama kalinya yang menggoda terhadap situs/blog kepada pengunjung blog yang baru pertama kalinya mengunjungi blog kita bisa menggunakan inside PopUp box untuk sambutan atau info penting lainnya.

Membuat impresi yang baik pada kesempatan pertama merupakan momen berharga yang sebaiknya dimanfaatkan secara maksimal. Kesempatan pertama ini akan menentukan probabilitas terhadap persentase kunjungan balik pengunjung. Jika kesan pertama begitu menggoda maka diharapkan pengunjung bisa terkesima sehingga akan hafal dengan alamat blog kita dan mau berkunjung kembali di lain waktu.

QUOTES

---

“You never get a second chance to make a great first impression.” – Will Rogers

With no second chances, you wouldn’t want to start a new journey on the wrong foot just because you did not pick the right words. Would you ?

Gimana sih cara membuat kesan menggoda untuk blog ?
"Banyak jalan menuju Roma", begitu kata kutipan sederhana yang terkenal. Ada bermacam cara untuk bisa mendapatkan kesan yang menggoda, salah satunya seperti yang sudah disebutkan di atas, yaitu dengan memasang inside PopUp box untuk sambutan atau info penting pada halaman situs/blog kita.

Apa itu Inside PopUp Box ?
Inside PopUp Box adalah kotak (box) notifikasi yang muncul secara tiba-tiba biasanya ada di tengah layar bisa berupa gambar yang berisi kata sambutan atau info penting menarik lainnya guna mendapatkan perhatian atau fokus pengunjung terhadap informasi yang ingin disampaikan. Kotak PopUp bisa juga dibuat untuk menampilkan iklan premium (iklan yang bukan dari jasa pengiklan seperti adsense, MGID, adhits dan sebagainya) dari sponsor sebuah situs/blog. Inside PopUp Box menggunakan elemen HTML di dalam halaman (inside) situs/blog tanpa perlu membuka jendela browser baru.

Manfaat beserta kegunaan dari inside PopUp box ini sangat luas jadi bisa kamu gunakan untuk berbagai kebutuhan. Inside PopUp Box buatan codeflare blogspot ini seperti biasa memiliki cita rasa premium sehingga berbeda dengan inside PopUp Box lainnya. Selain itu inside PopUp Box buatan codeflare sudah dioptimasikan fungsinya untuk berbagai penggunaan pada halaman situs/blog. Jadi sering-sering mampir yaa ke blog codeflare untuk mendapatkan info unik dan menarik seputar dunia blogging.

Kelebihan Inside PopUp Box buatan CodeFlare
Blog CodeFlare bukan blog biasa sehingga konten artikel yang dibuat sudah disesuaikan untuk mengoptimalkan penggunaan blog agar bisa memberikan manfaat dan kegunaan yang lebih optimal. Inside PopUp Box buatan CodeFlare pastinya dibuat dengan level premium sehingga memiliki banyak kelebihan jika dibandingkan dengan inside PopUp Box lainnya. Sebagai contoh bisa dilihat pada inside PopUp Box ucapan selamat datang yang tampil pada halaman artikel ini.

Berikut beberapa kelebihan penggunaan inside PopUp Box codeflare :

1. Sudah dioptimalkan untuk penggunaan situs atau blog.
2. Mudah untuk dimodifikasi dan dipasang pada blog.
3. Bisa dipadukan sebagai PopUnder shortlink guna memaksimalkan earning tambahan.
4. Penggunaan script Inside PopUp Box diberi keterangan dan mudah dipelajari.
5. Bisa digunakan tanpa masalah pada berbagai template blogspot premium.
6. Penggunaan animasi CSS sebagai animasi pembuka dan penutup.

Inside PopUp Box sudah dintegrasikan dengan script local storage sebagai penanda dan penggunaan timer penutup ketika menggunakan tombol penutup sebagai shortlink, jadi pengunjung tidak akan merasa terganggu dengan adanya inside PopUp box ini. Script local storage digunakan sebagai penanda untuk mengetahui apakah pengunjung yang datang baru pertama kali atau pengunjung yang sudah pernah mengunjungi blog.

Inside PopUp Box hanya akan muncul sekali jadi apabila pengunjung beralih ke halaman artikel blog lainnya inside PopUp box ini tidak akan muncul lagi. Kecuali cache browser yang digunakan pengunjung dibersihkan atau pengunjung menggunakan mode private browsing maka inside PopUp box akan selalu muncul pada setiap halaman artikel lain yang dikunjunginya.

Oke, saya kira cukup sekilas info mengenai inside PopUp box codeflare ini, buat kamu yang ingin mempelajari cara membuatnya ataupun ingin menggunakannya, monggo silakan disimak tutorialnya di bawah ini.

Informasi Singkat

---

Promotion (marketing)
Dalam pemasaran, promosi mengacu pada semua jenis komunikasi pemasaran yang digunakan untuk menginformasikan khalayak sasaran tentang manfaat relatif dari suatu produk, layanan, merek atau masalah, sebagian besar waktu bersifat persuasif. Ini membantu pemasar untuk menciptakan tempat khusus di benak pelanggan, itu bisa berupa rute kognitif atau emosional. Tujuan promosi adalah untuk meningkatkan kesadaran, menciptakan minat, menghasilkan penjualan atau menciptakan loyalitas merek. Ini adalah salah satu elemen dasar dari bauran pasar, yang mencakup empat prinsip, yaitu produk, harga, tempat, dan promosi.

Promosi juga merupakan salah satu unsur dalam bauran promosi atau promotion plan. Ini adalah penjualan pribadi, periklanan, promosi penjualan, publisitas pemasaran langsung, dari mulut ke mulut dan mungkin juga termasuk pemasaran acara, pameran dan pameran dagang. Rencana promosi menentukan seberapa besar perhatian yang harus diberikan kepada setiap elemen dalam bauran promosi, dan berapa proporsi anggaran yang harus dialokasikan untuk setiap elemen.

Promosi mencakup metode komunikasi yang digunakan pemasar untuk memberikan informasi tentang produknya. Informasi dapat berupa verbal dan visual.

---

Sumber : Wikipedia

DAFTAR ISI

1. Cara Pemasangan Widget Pada Blogger
2. Inside PopUp Box Tipe Dua
3. Inside PopUp Box Tipe Tiga

#1 Cara Pemasangan Inside PopUp Box Pada Blogger

Cinta datang dan pergi begitu pula dengan pengunjung blog mereka datang dan pergi sesuka hati tanpa beban tanpa berbekas, datang tak diundang pulangpun tak diantar, sekejap datang sekejap kemudian menghilang. Ntah ke halaman artikel mana mereka berkunjung dan apakah ini kunjungan pertama yang berkesan ataukah kunjungan tanpa kesan. Semoga saja sebuah kunjungan yang bermakna dan penuh dengan kesan terindah yang mampu disampaikan ke lubuk hati yang paling dalam.

Bukan sebuah rahasia jika inside PopUp box cukup ampuh digunakan untuk menghipnotis pengunjung blog ketika pertama kali berkunjung jika digunakan secara bijak dan benar. Segala sesuatunya akan terlihat mudah jika tahu caranya. Berikut kode script html untuk membuat Inside PopUp Box Super Premium CodeFlare beserta cara pemasangannya pada blog.

Perhatian !!! pastikan kamu sudah memasang plugin jQuery, jQuery-UI dan FontAwesome ke dalam template halaman blog.

<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

• Silakan login dahulu ke blog Anda.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode dibawah ini tepat diatas kode </body>.
  
  
  
  
  
  <!-- Inside PopUp Box CodeFlare -->
  <div class='window-card-box' style='display:none;'>
  <div class='card-box'><div class='card'>
  <img class='bgcardimage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPnegs9Mt4w06ZtoI91t1VOw6A5VGyvjV_hGHKP10b-MydhaNrykrJDBZJIk0VYl7t1sbXVv8VftoMWk_Ec7EgnuruWsMxcXXPB6NE8iHFJ03aMWquolysYB1p3P6c_m_lhi7JVjupH8/s0/welcome+codeflare.png' onclick="showLinkPage()" style='margin-bottom:20px;' title="click to close !"/>
  </div></div></div>
  <style>
  .window-card-box{width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999;}
  .card-box{display:inline-block;position:absolute;top:calc(50% - 150px);left:calc(50% - 150px);user-select:none;}
  .card-box .card{width:300px;height:300px;margin:0;padding:5px;position:relative;transition:0.5s;}
  .card-box .card img{cursor:pointer;}
  </style>
  <script>
  //<![CDATA[
  $(".window-card-box").appendTo("body");
  var cflblchk = localStorage.getItem("cflblnotif");
  if(cflblchk==""||cflblchk==null||cflblchk=="undefined"){
  $(".window-card-box").slideDown();}
  else{$(".window-card-box").remove();}
  function showLinkPage(){
  sessionStorage.setItem("cflblnotif","1");
  $(".window-card-box").slideUp();
  setTimeout(function(){window.open("https://your-shortlink","blank");},3000);}
  //]]>
  </script>
  <!-- Inside PopUp Box CodeFlare -->
  
  
  KETERANGAN
  Pada Kode :
  

  <img class='bgcardimage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPnegs9Mt4w06ZtoI91t1VOw6A5VGyvjV_hGHKP10b-MydhaNrykrJDBZJIk0VYl7t1sbXVv8VftoMWk_Ec7EgnuruWsMxcXXPB6NE8iHFJ03aMWquolysYB1p3P6c_m_lhi7JVjupH8/s0/welcome+codeflare.png' onclick="showLinkPage()" style='margin-bottom:20px;' title="click to close !"/>

  
  Kode yang berwarna biru seperti contoh di atas yang merupakan kode untuk URL gambar welcome. Silakan kamu ganti kode URL tersebut dengan URL gambar welcome yang ingin kamu gunakan.
  
  Pada Kode :
  

  .card-box .card{width:300px;height:300px;margin:0;padding:5px;position:relative;transition:0.5s;}

  
  Secara default ukuran gambar diset sebesar 300px x 300px agar bisa tampil dengan responsive apabila pengunjung blog berkunjung menggunakan browser mobile. Namun jika kamu ingin menggunakan ukuran dimensi gambar yang lain pastikan untuk merubah kode CSS image agar menyesuaikan dengan ukuran dimensi gambar yang digunakan.
  
  Pada Kode :
  

  setTimeout(function(){window.open("https://your-shortlink","blank");},3000);

  
  Jika ingin menggunakan tombol penutup sebagai pembuka untuk shortlink berbayar maka silakan kamu rubah kode https://your-shortlink dengan URL shortlink yang ingin kamu gunakan.
  
  Apabila hanya ingin digunakan sebagai tombol penutup saja maka kamu hanya perlu menghapus keseluruhan kode tersebut (setTimeout....3000);).

#2 Inside PopUp Box Tipe Dua

Jika dalam keramaian blog kamu masih terasa sepi mungkin ada baiknya menggunakan inside PopUp box tipe dua yang tidak kalah menggodanya. Dengan tampilan hijau menyala bak lampu bangjo (abang-ijo) yang ada di perempatan kota, dengan sabar menunggu lampu abang berganti ijo, di-iringi lantunan lagu pengamen jalanan, dibawah teriknya matahari yang panas seakan membuat hijaunya es cendol terlihat semakin begitu menggoda.

Oke kalo mau lihat previewnya tinggal diklik tombol previewnya kalo mau dipasang tinggal comot aja kodenya dan langsung pasang ke bloknya pake gas sampai ngepol (gas-pol guys).

<!-- Inside PopUp Box CodeFlare -->
<div class='window-card-box' style='display:none;'>
<div class='card-box'><div class='card'>
<span></span>
<div class='card-content'>
<div class='card-title'>SELAMAT DATANG</div>
<div class='card-subtitle'>Sobat Blogger</div>
<p><img class='bgcardimage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg97dm5frs0OGGEgHCFE-APEYgl_HuZWDwfiF_nT7Ygyf7vU0Ji5OD0liIWAKo7d9QaaRwD8vsIadANmGGOnHI1JiPNqO-LmfLuhOfPzmAQ1onyYMcmFFi66d1mrwzUP7w6T66OY6Zk5fw/s80/logo-codeflare-512px.png' style='margin-bottom:20px;'/><br/>
Dari <b style='color:#f9a100;'>Blogger</b> Untuk <b style='color:#0083da;'>Blogger</b></p>
<a href='#' onclick='showLinkPage()'>Tutup</a>
</div></div></div></div>
<style>
.card-box{display:inline-block;position:absolute;top:calc(50% - 150px);left:calc(50% - 150px);z-index:+9999999999999;font-family:Raleway;user-select:none;}.card-box .card{width:300px;height:300px;background:linear-gradient(45deg,#ffcc00 0%,#ff0058 100%);margin:0;padding:5px;position:relative;transition:0.5s;}.card-box .card::before{content:"";width:100%;height:100%;position:absolute;background:inherit;top:0;left:0;filter:blur(30px);}.card-box .card:before,.card-box .card{background:linear-gradient(315deg,#4dff03 0%,#00d0ff 100%);}.card-box .card span{position:absolute;top:5px;left:5px;right:5px;bottom:5px;background:rgba(0,0,0,0.5);pointer-events:none;}.card-box .card-content{background:linear-gradient(90deg,rgba(255,255,255,0.1) 50%,rgba(0,0,0,0.05) 50%);width:100%;height:100%;position:relative;z-index:2;color:#fff;padding:15px 5px 0 5px;text-align:center;box-sizing:border-box;}.card-box .card-content h2{font-size:20px;margin-bottom:20px;}.card-box .card-content p{margin-bottom:20px;font-size: 18px;}.card-box .card-content a{display:inline-block;text-decoration:none;text-align:center;background:linear-gradient(45deg, #ffcc00 0%, #ff0058 100%);color:#121214;padding:10px 20px;font-size:20px;font-weight:600;border-radius:10px;transition:background .5s ease,color .5s ease;}.card-box .card-content a:hover{background:#0083da;color:#fff;}.window-card-box{width:100%;height:100%;position:fixed;background:rgba(0,0,0,.8);top:0;left:0;z-index:9999;}
</style>
<script>
//<![CDATA[
var cflblchk = localStorage.getItem("cflblnotif");
if(cflblchk==""||cflblchk==null||cflblchk=="undefined"){
$(".window-card-box").slideDown();}
else{$(".window-card-box").remove();}
function showLinkPage(){
sessionStorage.setItem("cflblnotif","1");
$(".window-card-box").slideUp();
setTimeout(function(){window.open("https://your-shortlink","blank");},3000);}
//]]>
</script>
<!-- Inside PopUp Box CodeFlare -->

KETERANGAN
Inside PopUp Box Tipe Dua ini kurang lebih sama dengan tipe yang pertama cuma berbeda pada tampilan warna dan efek animasi. Silakan kamu sesuaikan kode URL gambar dan link popunder pada tombol.

#3 Inside PopUp Box Tipe Tiga

Pada tipe ketiga merupakan jurus terakhir jika kedua jurus penggoda dirasa kurang mumpuni untuk bisa memberikan kesan terbaik. Baiklah kita coba jurus pamungkas yang ketiga ini untuk bisa menggugah hati dan rasa kepada pengunjung blog kita.

Inside PopUp Box Tipe Tiga menggunakan efek 3D glass pada tampilan kotak kata sambutan dengan sedikit efek blur (glass effect) yang semakin menguatkan kesan blog yang atraktif nan dinamis. Let's Check this out...

<!-- Inside PopUp Box CodeFlare -->
<div class='card-box' style='display:none;'>
<div class='card' data-tilt='data-tilt'>
<div class='card-title'>SELAMAT DATANG <i aria-hidden='true' class='fa fa-exclamation'></i><i aria-hidden='true' class='fa fa-exclamation'></i></div>
<div class='card-subtitle'>CodeFlare Blogspot</div>
<img class='bgcardimage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg97dm5frs0OGGEgHCFE-APEYgl_HuZWDwfiF_nT7Ygyf7vU0Ji5OD0liIWAKo7d9QaaRwD8vsIadANmGGOnHI1JiPNqO-LmfLuhOfPzmAQ1onyYMcmFFi66d1mrwzUP7w6T66OY6Zk5fw/s80/logo-codeflare-512px.png'/>
<div class='card-subtitle'>dari <span style='color:#f9a100;'>Blogger</span> untuk <span style='color:#0083da;'>Blogger</span></div>
<div class='icons' onclick='showLinkPage()'>Tutup</div>
</div>
</div>
<style>
.card-box{width:300px;height:300px;text-align:center;position:fixed;top:calc(50% - 150px);left:calc(50% - 150px);z-index:+9999999999999;padding:5px;user-select:none;}
.card-box>.card{width:300px;height:300px;}
.card-box>.card{display:flex;justify-content:center;align-items:center;flex-direction:column;box-shadow:0 0 30px #00000055;overflow:hidden;backdrop-filter:blur(20px);border:2px solid #ffffff30;}
.card-box>.card:hover{backdrop-filter:blur(0px);}
.card-box .card-title{color:red;margin:0px;transition:0.4s;font-size:24px;font-weight:bold;}
.card-box>.card:hover .card-title{color:#89c403;transition:0.4s;}
.card-box .card-subtitle{color:#000;margin:10px 0;letter-spacing:1px;transition:0.4s;font-size:20px;font-weight:bold;}
.card-box>.card:hover .card-subtitle{color:#000;transition:0.4s;}
.card-box>.card .icons{padding:6px 24px;box-shadow:inset 0px 1px 0px 0px #97c4fe;background:linear-gradient(to bottom,#3d94f6 5%,#1e62d0 100%);background-color:#3d94f6;border-radius:10px;text-shadow:0px 1px 0px #1570cd;font-size:1.5em;transition:background-color .5s linear;cursor:pointer;}
.card-box>.card .icons:hover{box-shadow:inset 0px 1px 0px 0px #a4e271;background:linear-gradient(to bottom,#89c403 5%,#77a809 100%);background-color:#89c403;text-shadow:0px 1px 0px #528009;}
.card-box>.card .icons i{font-size:2em;vertical-align:middle;color:#000;transition:0.4s;}
.card-box>.card:hover .icons i{color:#000;transition:0.4s;}
.bgcardimage{height:80px;}
</style>
<script>
//<![CDATA[
var cflblchk = localStorage.getItem("cflblnotif");
if(cflblchk==""||cflblchk==null||cflblchk=="undefined"){
$(".card-box").slideDown();sessionStorage.setItem("cflblnotif","1");}
else{$(".card-box").remove();}
function showLinkPage(){
$(".card-box").slideUp();
setTimeout(function(){window.open("https://your-shortlink","blank");},3000);}
//]]>
</script>
<script>
//<![CDATA[
/*Data Tilt Code*/
var VanillaTilt=function(){"use strict";class t{constructor(e,i={}){if(!(e instanceof Node))throw"Can't initialize VanillaTilt because "+e+" is not a Node.";this.width=null,this.height=null,this.clientWidth=null,this.clientHeight=null,this.left=null,this.top=null,this.gammazero=null,this.betazero=null,this.lastgammazero=null,this.lastbetazero=null,this.transitionTimeout=null,this.updateCall=null,this.event=null,this.updateBind=this.update.bind(this),this.resetBind=this.reset.bind(this),this.element=e,this.settings=this.extendSettings(i),this.reverse=this.settings.reverse?-1:1,this.glare=t.isSettingTrue(this.settings.glare),this.glarePrerender=t.isSettingTrue(this.settings["glare-prerender"]),this.fullPageListening=t.isSettingTrue(this.settings["full-page-listening"]),this.gyroscope=t.isSettingTrue(this.settings.gyroscope),this.gyroscopeSamples=this.settings.gyroscopeSamples,this.elementListener=this.getElementListener(),this.glare&&this.prepareGlare(),this.fullPageListening&&this.updateClientSize(),this.addEventListeners(),this.updateInitialPosition()}static isSettingTrue(t){return""===t||!0===t||1===t}getElementListener(){if(this.fullPageListening)return window.document;if("string"==typeof this.settings["mouse-event-element"]){const t=document.querySelector(this.settings["mouse-event-element"]);if(t)return t}return this.settings["mouse-event-element"]instanceof Node?this.settings["mouse-event-element"]:this.element}addEventListeners(){this.onMouseEnterBind=this.onMouseEnter.bind(this),this.onMouseMoveBind=this.onMouseMove.bind(this),this.onMouseLeaveBind=this.onMouseLeave.bind(this),this.onWindowResizeBind=this.onWindowResize.bind(this),this.onDeviceOrientationBind=this.onDeviceOrientation.bind(this),this.elementListener.addEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.addEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.addEventListener("mousemove",this.onMouseMoveBind),(this.glare||this.fullPageListening)&&window.addEventListener("resize",this.onWindowResizeBind),this.gyroscope&&window.addEventListener("deviceorientation",this.onDeviceOrientationBind)}removeEventListeners(){this.elementListener.removeEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.removeEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.removeEventListener("mousemove",this.onMouseMoveBind),this.gyroscope&&window.removeEventListener("deviceorientation",this.onDeviceOrientationBind),(this.glare||this.fullPageListening)&&window.removeEventListener("resize",this.onWindowResizeBind)}destroy(){clearTimeout(this.transitionTimeout),null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.reset(),this.removeEventListeners(),this.element.vanillaTilt=null,delete this.element.vanillaTilt,this.element=null}onDeviceOrientation(t){if(null===t.gamma||null===t.beta)return;this.updateElementPosition(),this.gyroscopeSamples>0&&(this.lastgammazero=this.gammazero,this.lastbetazero=this.betazero,null===this.gammazero?(this.gammazero=t.gamma,this.betazero=t.beta):(this.gammazero=(t.gamma+this.lastgammazero)/2,this.betazero=(t.beta+this.lastbetazero)/2),this.gyroscopeSamples-=1);const e=this.settings.gyroscopeMaxAngleX-this.settings.gyroscopeMinAngleX,i=this.settings.gyroscopeMaxAngleY-this.settings.gyroscopeMinAngleY,s=e/this.width,n=i/this.height,l=(t.gamma-(this.settings.gyroscopeMinAngleX+this.gammazero))/s,a=(t.beta-(this.settings.gyroscopeMinAngleY+this.betazero))/n;null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event={clientX:l+this.left,clientY:a+this.top},this.updateCall=requestAnimationFrame(this.updateBind)}onMouseEnter(){this.updateElementPosition(),this.element.style.willChange="transform",this.setTransition()}onMouseMove(t){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=t,this.updateCall=requestAnimationFrame(this.updateBind)}onMouseLeave(){this.setTransition(),this.settings.reset&&requestAnimationFrame(this.resetBind)}reset(){this.event={clientX:this.left+this.width/2,clientY:this.top+this.height/2},this.element&&this.element.style&&(this.element.style.transform=`perspective(${this.settings.perspective}px) `+"rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"),this.resetGlare()}resetGlare(){this.glare&&(this.glareElement.style.transform="rotate(180deg) translate(-50%, -50%)",this.glareElement.style.opacity="0")}updateInitialPosition(){if(0===this.settings.startX&&0===this.settings.startY)return;this.onMouseEnter(),this.fullPageListening?this.event={clientX:(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.clientWidth,clientY:(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.clientHeight}:this.event={clientX:this.left+(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.width,clientY:this.top+(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.height};let t=this.settings.scale;this.settings.scale=1,this.update(),this.settings.scale=t,this.resetGlare()}getValues(){let t,e;return this.fullPageListening?(t=this.event.clientX/this.clientWidth,e=this.event.clientY/this.clientHeight):(t=(this.event.clientX-this.left)/this.width,e=(this.event.clientY-this.top)/this.height),t=Math.min(Math.max(t,0),1),e=Math.min(Math.max(e,0),1),{tiltX:(this.reverse*(this.settings.max-t*this.settings.max*2)).toFixed(2),tiltY:(this.reverse*(e*this.settings.max*2-this.settings.max)).toFixed(2),percentageX:100*t,percentageY:100*e,angle:Math.atan2(this.event.clientX-(this.left+this.width/2),-(this.event.clientY-(this.top+this.height/2)))*(180/Math.PI)}}updateElementPosition(){let t=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=t.left,this.top=t.top}update(){let t=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:t.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:t.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.glare&&(this.glareElement.style.transform=`rotate(${t.angle}deg) translate(-50%, -50%)`,this.glareElement.style.opacity=`${t.percentageY*this.settings["max-glare"]/100}`),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:t})),this.updateCall=null}prepareGlare(){if(!this.glarePrerender){const t=document.createElement("div");t.classList.add("js-tilt-glare");const e=document.createElement("div");e.classList.add("js-tilt-glare-inner"),t.appendChild(e),this.element.appendChild(t)}this.glareElementWrapper=this.element.querySelector(".js-tilt-glare"),this.glareElement=this.element.querySelector(".js-tilt-glare-inner"),this.glarePrerender||(Object.assign(this.glareElementWrapper.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",overflow:"hidden","pointer-events":"none"}),Object.assign(this.glareElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",width:`${2*this.element.offsetWidth}px`,height:`${2*this.element.offsetWidth}px`,transform:"rotate(180deg) translate(-50%, -50%)","transform-origin":"0% 0%",opacity:"0"}))}updateGlareSize(){this.glare&&Object.assign(this.glareElement.style,{width:`${2*this.element.offsetWidth}`,height:`${2*this.element.offsetWidth}`})}updateClientSize(){this.clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,this.clientHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}onWindowResize(){this.updateGlareSize(),this.updateClientSize()}setTransition(){clearTimeout(this.transitionTimeout),this.element.style.transition=this.settings.speed+"ms "+this.settings.easing,this.glare&&(this.glareElement.style.transition=`opacity ${this.settings.speed}ms ${this.settings.easing}`),this.transitionTimeout=setTimeout(()=>{this.element.style.transition="",this.glare&&(this.glareElement.style.transition="")},this.settings.speed)}extendSettings(t){let e={reverse:!1,max:15,startX:0,startY:0,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:1,speed:300,transition:!0,axis:null,glare:!1,"max-glare":1,"glare-prerender":!1,"full-page-listening":!1,"mouse-event-element":null,reset:!0,gyroscope:!0,gyroscopeMinAngleX:-45,gyroscopeMaxAngleX:45,gyroscopeMinAngleY:-45,gyroscopeMaxAngleY:45,gyroscopeSamples:10},i={};for(var s in e)if(s in t)i[s]=t[s];else if(this.element.hasAttribute("data-tilt-"+s)){let t=this.element.getAttribute("data-tilt-"+s);try{i[s]=JSON.parse(t)}catch(e){i[s]=t}}else i[s]=e[s];return i}static init(e,i){e instanceof Node&&(e=[e]),e instanceof NodeList&&(e=[].slice.call(e)),e instanceof Array&&e.forEach(e=>{"vanillaTilt"in e||(e.vanillaTilt=new t(e,i))})}}return"undefined"!=typeof document&&(window.VanillaTilt=t,t.init(document.querySelectorAll("[data-tilt]"))),t}();
//]]>
</script>
<!-- Inside PopUp Box CodeFlare -->

KETERANGAN
Santai tetap tenang dan jangan panik melihat kode script di atas. Memang terlihat banyak karena ada penambahan kode script tilt untuk menambahkan efek animasi 3D. Animasi tersebut hanya berfungsi untuk pengunjung yang menggunakan browser PC, jadi untuk pengunjung yang menggunakan browser mobile animasi 3D tersebut tidak terlalu ketara.

Seperti biasa silakan kamu sesuaikan terlebih dahulu parameter-parameter awal. Konfigurasi awal masih sama dengan tipe pertama dan kedua jadi mudah untuk disesuaikan dengan kebutuhan yang kamu inginkan.

Buat kamu yang ingin menggunakan shortlink yang bisa memberikan penghasilan tambahan, nih daftar aja menggunakan adf.ly sebuah layanan shortlink yang legit (terpercaya) yang bisa memberikan tambahan penghasilan uang melalui internet. Info lebih lanjut dapat dilihat pada link di bawah ini.

---

Demikian artikel blog tentang Cara Membuat Inside PopUp Box Super Premium terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

blog, blogger, blogspot, info, popup, popunder, box, welcome, screen, premium, inside, code, kode, html, html5, css, css3, jquery, javascript, jquery-ui, fontawesome, cara, buat, bikin, pasang, mudah, gampang, integrasi, shortlink, background, latar, hitam, penutup, div, elemen, warning, important, penting

Incoming Search Term

Cara mudah membuat popup sekaligus popunder shortlink dengan tampilan terbaru super premium, Cara bikin popup welcome screen pada halaman blog, cara buat popup selamat datang menggunakan kode html ringan, cara menggabungkan popup dan popunder menggunakan javascript, kotak sambutan pertama kali pada halaman artikel blogger, info penting menggunakan javascript di blogspot, menampilkan gambar di tengah layar pada saat pengunjung datang ke blog, cara buat popunder sekali untuk situs blog, tutorial bikin popup dan popunder untuk digunakan shortlink di situs blog, Glass effect card popup with external link, Welcome screen glass effect

script code here...

SELAMAT DATANG

Sobat Blogger

Dari Blogger Untuk Blogger

Tutup

WELCOME

to My Blog

from Blogger to Blogger

Tutup