Cara Membuat Widget Pop Up Dengan Waktu Yang Sudah Di Tentukan

Cara Membuat widget popup card di blog dengan waktu yang sudah di tentukan

membuat Widget Pop dengan waktu yang sudah di tentukan, kali ini saya akan berbagi widget pop up card dengan waktu yang sudah di tentukan untuk memunculkannya disertai dengan tombol clos (keluar).

Sebelumnya saya juga sudah membuat yang hampir mirip namun pada postingan sebelumnya saya tidak menentukan waktu untuk memunculkan widgetnya. Jadi pas blog di load widget akan muncul.

Buat kalian yang ingin melihatnya silahkan simak di poastingan berikut ini. Cara Membuat Widget Pop Up Card Di Blogger

Pada postingan yang ini saya memberikan waktu untuk meload /atau menampilkan widget pop up dengan waktu yang sudah di set.

Result

Nah untuk tutorial cara pemasangannya silahkan simak tutorial dibawah ini.

Widget Popup Card javascript with timer

• Login ke Blogger.com

• Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 

• kalo sudah ketemu, masukan CSS di bawah ini tepat di atas kode yang tadi di cari

#myModal{
  display:none;
}
#timer{
  visibility: hidden;
}
/*Widget Pop Up Card*/
#mstamvan {
    z-index: 1000;
    position: fixed !important;
    top: 100px;
    left: 50%;
    width: 700px;
    margin-left: -350px;
}
#belakang {
    left: 0px;
    background: #000 none repeat scroll 0% 0%;
    opacity: 0.6;
    position: fixed;
    z-index: -1;
    top: 0px;
    height: 100%;
    width: 100%;
}
.tulisan {
font-size: 20px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.14);
cursor: pointer;
display: inline-block;
padding: 2px 9px;
text-align: center;
font-family: arial,sans-serif;
position: absolute;
top: -15px;
right: -20px;
  collor:#344;
  return:false;
}
.isinya {
      border-radius: 3px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    width: 700px;
    height: 400px;
    border: 4px solid #FFF;
}

• Sekarang Masukan Javascript Dibawah Ini Tepat Diatas Kode </BODY>

<script>
var count=-1; // initially -1 as we are having a delay of 1000ms
var counter=setInterval(timer, 1000); //1000 will  run it every 1 second
function timer()
{
  count=count+1;
  if (count >=6) //+1 than the req time as we have a delay of 1000ms
  {
     clearInterval(counter);
     /////////////what code should go here for the modal to pop up??///////////////////////
      $("#myModal").modal();
     return;
  }
    document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}
</script>

if (count >=6) //+1 than the req time as we have a delay of 1000ms Silahkan ubah anga 6 (enam)utuk menentukan berapa menit waktu untuk membuka widget pop upnya.

• Setelah itu cari kode </head>, dan masukan javascript berikut ini....

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

• Sekarang kita tinggal memasang hatmlnya, Terserah kalian mau pasang di mana. Copy Dan Letakan HTML dibawah ini tepat di atas kode </BODY> atau di atas </head>

<span id="timer"></span>
<div class="modal fade" id="myModal" >
<div id='mstamvan'>
<div id='belakang'></div>
<div class='tulisan' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'><a>&#215;</a></div>
<div class='isinya'><a href='https://fb.com/tejasukmana99' target='_blank'><img style="width: 700px; height: 400px;" alt='Mas Tamvan on Facebook!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxeVwzlaMSLf0-RXgyRTOf8UtmV34feyj3j5ftQO8COXsqin7XXjQJD7o3I2sED3tlaEJEzthCME1ugH5UqVmhqpruaVaw5jucY058478BmXy1DvKi3rn41nKpGeB1Zzz437Z6fsHvG163/s1600/card-widget-design.png'/></a>
  </div>
</div>
</div>

Silahkan kalian ganti url ini dengan url tujuan kalian
https://fb.com/tejasukmana99
Ganti juga link gambar ini dengan link gambar / image kalian
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxeVwzlaMSLf0-RXgyRTOf8UtmV34feyj3j5ftQO8COXsqin7XXjQJD7o3I2sED3tlaEJEzthCME1ugH5UqVmhqpruaVaw5jucY058478BmXy1DvKi3rn41nKpGeB1Zzz437Z6fsHvG163/s1600/card-widget-design.png
Dan jangan lupa, widget pop up card ini memerlukan ajax jquery, kalo di template sobat belum ada silahkan tambahkan script ini di atas </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Cukup sekian dan terima kasih, semoga artikel tentang Widget Pop Up Dengan Waktu Untuk Membukanyaini semoga bermanfaat.

Apabila ada yang tidak mengerti silahkan bertanya di kolom komentar, insya allah admin akan bantu.
Kalo belum ada komentar silahkan coba anda komentar sendiri di salah satu artikelnya, untuk membukrikan apakah widgetnya berhasil dengan sempurna atau tidak.

Cukup sekian dan terima kasih, semoga artikel dari saya tentang Cara Membuat Recent Comments Disqus Di Bloggerini bermanfaat ya.

Jangan lupa, bila ada kesulitan silahkan bertanya di kolom komentar ya :)