Cara Membuat Widget Pop Up Card Di Blogger

facebook pop up widget for blogger

Cara Membuat Widget Pop Up facebook like di blogger

Tutorial Membuat Widget Pop Up Card Di Blogger

Widget pop up card seperti popup facebook, pop up card ini menggunakan script yang biasanya digunakan untuk menampilkan pop up facebook like atau follow, cuma disini tidak menggunakan embed facebook like, disini hanya menampilkan image pembertiahuan contact saja. Jadi kalian bisa mengganti pemberitahuan tersebut sesuai keinginan kalian.

Bisa berupa subcibe email, pemberitahuan maintenance, pemberitahuan kalau anda menerima iklan bisa juga contact.

Widget pop up card ini tidak akan memberatkan proses loading halaman blog karena widget ini akan tampil pada saat blog berhasil di load baru setelah proses load blog selesai widget pop um ini akan tampil seperti halnya pada pop up facebook.

Bagi kalian yang ingin melihat tampilan widget poup ini, silahkan klik link dibawah ini.

Untuk tutorial cara pembuatannya, silahkan simak di bawahm tapi jangan lupa baca juga tutorial lainnya yang sudah mas tamvan sediakan.




Cara Membuat Widget Pop Up Card Seperti facebook


  • 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


/*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 type='text/javascript' >
$(document).ready(function() {
  $('#mstamvan').click(function() {
 $('#mstamvan').fadeOut('500');
  });
});
</script>
  • Save Template. 
  • Lanjut Ketahap Selanjutnya
  • Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.
  • Contoh, Lihat gambar dibawah!!

banner blogger kiri kanan

  • Setelah diklik / dibuka HTML/Javascriptnya, Masukan Script Widget Pop Up yang dibawah kedalamnya.


<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='http://fb.com/tejasukmana99' target='_blank'><img style="width: 700px; height: 400px;" alt='Mas Tamvan on Facebook!' src='LINK IMAGE'/></a>
  </div>
</div>
</div>

  • Ok, sekarang tinggal save templatenya and DONE, Salam Tamvan

Silahkan Ganti Kata LINK IMAGE dengan link image buatan agan
Ganti Juga Link Fb ini sengan link kalian
http://fb.com/tejasukmana99


Ok, cukup sampai disini artikel tutorial tentang cara memasang widget pop up seperti facebook di blogger ini, semoga artikel ini bermanfaat, salam tamvan dan salam jumpa lagi di artikel tutorial selanjutnya.
40 komentar
  1. mantap izin coba gan.. mksh tutorialnya

    ReplyDelete
  2. Boleh juga nih diterapin di blog ane gan...

    ReplyDelete
  3. kok ane buka resultnya ga ada apa2 gan?

    ReplyDelete
    Replies
    1. Di sklip dulu adflynya gan, baru nanti keluar resultnya

      Delete
  4. Sepertinya menarik untuk dipraktekkan :)
    izin gan

    ReplyDelete
  5. Wah sangat membantu sekali gan bagi pemula :-bd

    ReplyDelete
  6. gagal om, knp ya kok gagal,padah semua udah masuk

    ReplyDelete
  7. thx gan, ane terapin di indohentaijav4us.blogspot.com |o|

    ReplyDelete
  8. makasih gan,udah ane terapin , mau tanya kl mau mengatur waktu munculnya pop up gmn gan?

    ReplyDelete
    Replies
    1. Sama-sama gan. :)
      Untuk membuat widget pop up dengan waktu yang sudah di tentukan, agan bisa simak pada tutorial berikut ini.
      https://mastamvan.blogspot.co.id/2016/06/widget-popup-di-blog-waktu-ditentukan.html

      Delete
  9. gan cara ilangin blur gimana ?
    gambar ane udah pas ukuran nya tapi blur

    ReplyDelete
    Replies
    1. Mungkin resolusinya kurang pas gan.
      atau ada script di blog agan untuk mengatur image agar ukurannya pas, yang membuat image jadi menciut.
      coba di atur ulang gambar dan resolusinya

      Delete
    2. cara nya gimana ya mas ?
      saya udah coba atur css nya tapi tetep
      kalo resolusi saya udah pasin gan lewat photoshop
      bisa coba bantu mas ?

      Delete
  10. Pop up hanya tampil di halaman postingan aja min, di halaman beranda tidak muncul. Gimana solusinya? Help!

    ReplyDelete
    Replies
    1. Mungkin agan menggunakan tag condisional yang hanya menampilkan widget d homepage.

      Coba pindahkan kode css nya di </style> lain / masukan kode ini di atas </head>


      <style type='text/css'>

      /*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;
      }
      </style>

      Delete
  11. apakah pop up ini sudah responsive?

    ReplyDelete
    Replies
    1. Oh iya gan, css di atas blm responsive..
      silahkan ganti dengan css berikut agar tampilannya jadi responsive, monile friendly..

      taro scruot berikut di atas </head>

      <style type='text/css'>
      /*Widget Pop Up Card*/
      #mstamvan{position:fixed;top:100px;text-align:center;width:100%;}
      @media only screen and (max-width:768px){#mstamvan{width:90%;}.tulisan {font-size: 10px;padding: 2px 5px;}}
      #belakang{left:0;background:#000 none repeat scroll 0% 0%;opacity:0.6;position:fixed;z-index:-1;top:0;height:100%;width:100%;}
      .tulisan{font-size:10px;background:#FFF none repeat scroll 0% 0%;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,0.14);cursor: pointer;display:inline-block;padding:2px 5px;position:absolute;top:0;}
      .isinya{display:inline-block;width:100%;max-width:700px;max-height:400px;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.2);border:4px solid #FFF;}
      .isinya img{width:100%!important;max-height:400px!important;height:100%!important;}
      </style>

      Delete
  12. Gan, cari buat contact kyk pnya agan bergerak sesuai gerakan mouse gimaa yah?

    ReplyDelete
    Replies
    1. Namanya widget sticky gan, saya ga buat tutornya soalnya dah banyak yg buat. :)

      Delete
    2. Atauagan bisa mampir ke post baru ini :)

      https://mastamvan.blogspot.co.id/2016/10/widget-sticky-berhenti-di-atas-footer.html

      Delete
  13. gan kasih tau cara bikin tempat komen kagak gini dongg .plisss pengenn

    ReplyDelete
    Replies
    1. Show Hide?
      Udah ada gan tutorialnya di blog saya (y)

      Delete
  14. isi postingannnya bermanfaat, terima kasih sebelumnya.

    ReplyDelete
    Replies
    1. Ya gan, sama-sama.
      Terima Kasih juga atas kunjungannya :)

      Delete
  15. boleh di coba nih izni dulu ni :) di harapkankunbal nya https://ihwanburhannudin.blogspot.co.id/

    ReplyDelete
  16. Mantap Gan, izin Copas dan izin Aplikasikan di Blog ane

    ReplyDelete
  17. Terima kasih atas informasinya gan. Saya sudah coba dan berhasil. Saya mau tanya, bagaimana cara agar pop up kita tampil di Android tanpa harus mengubah blog menjadi tampilan desktop? Terima kasih

    ReplyDelete
  18. cara menampilkan pop up hanya sekali di homepage pas pertama kali mengunjungi, gimana gan?

    ReplyDelete
  19. Trimz atas berbaginya ...mas tamvan

    ReplyDelete
  20. Oke. Saya coba buat juga di blog saya. Saya izin save scriptnya ya. Makasih

    ReplyDelete