Cara Menciptakan 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 aku akan menyebarkan widget pop up card dengan waktu yang sudah di tentukan untuk memunculkannya disertai dengan tombol clos (keluar).

Sebelumnya aku juga sudah menciptakan yang hampir seolah-olah namun pada postingan sebelumnya aku tidak memilih waktu untuk memunculkan widgetnya. Kaprikornus 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 aku memperlihatkan 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 instruksi 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 memilih berapa menit waktu untuk membuka widget pop upnya.

• Setelah itu cari instruksi </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 instruksi </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=' on Facebook!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEiAhVU9WpXEA7k7rohf_jmNCilfbmnRNceMFF1rqamPdRYyssMM2B1NnywNxNZpFzKwVMuPSxcbHyXN5wmiJo4mQ5tStp6Ivjk-0mcNrDa83wgt_umokY1JNT4gc2G8hJPiDGF-B-qymB/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/AVvXsEhEiAhVU9WpXEA7k7rohf_jmNCilfbmnRNceMFF1rqamPdRYyssMM2B1NnywNxNZpFzKwVMuPSxcbHyXN5wmiJo4mQ5tStp6Ivjk-0mcNrDa83wgt_umokY1JNT4gc2G8hJPiDGF-B-qymB/s1600/card-widget-design.png
Dan jangan lupa, widget pop up card ini memerlukan ajax jquery, kalo di template teman 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, biar artikel wacana Widget Pop Up Dengan Waktu Untuk Membukanyaini biar 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 tepat atau tidak.

Cukup sekian dan terima kasih, biar artikel dari aku wacana Cara Membuat Recent Comments Disqus Di Bloggerini bermanfaat ya.

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