Cara Buat dan Pasang Pop up Card Responsive di Blog - Mediaachmad

Cara Buat dan Pasang Pop up Card Responsive di Blog. Kadang kita pernah menjumpai sebuah pop up di Blog atau website yang berisi follow halaman facebook atau yang lain. Disini admin akan hanya menampilkan image pemberitahuan contact saja. Tentu saja kalian bisa merubah datau mengganti pemberitahuan tersebut, sesuai dengan keinginan kalian.

Untuk widget pop up kali ini tidak akan memberatkan website karena widget ini akan tampil saat blog berhasil di load baru setelah loading website selesai. Bagi yang penasaran Oke langsung saja simak dan lihat tutorial berikut ini.

Cara Buat dan Pasang Pop up Card Responsive di Blog

1. Login ke Blogger, kemudian, masuk ke TEMA lalu klik EDIT HTML.
2. Kemudian Cari Kode ]]></b:skin> atau juga bisa </style>, Untuk mempermudah pencarian Gunakan CTRL + F. Jika sudah silakan masukan Kode CSS dibawah ini dan Pastekan di ATAS Kode yang tadi dicari.

/*Widget Pop Up Card*/
#mdachmad {
    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;
}

3. Selanjutnya masukan kode Javascript ini tepat di ATAS Kode </body>.

<script type='text/javascript' >
$(document).ready(function() {
  $('#mdachmad').click(function() {
 $('#mdachmad').fadeOut('500');
  });
});
</script>

4. Kemudian Simpan Template, Lanjut ke tahap selanjutnya.
5. Berikutnya buat Widget, Masuk ke TATA LETAK, kemudian klik TAMBAHKAN GADGET, lalu Cari HTML/JAVASCRIPT. Kemudian Masukan Kode dibawah ini ke dalam widget tersebut.

<div id='mdachmad'>
<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='LINK URL KALIAN' target='_blank'><img style="width: 700px; height: 400px;" alt='OmahDsign' src='LINK IMAGE'/></a>
  </div>
</div>
</div>

6. Kemudian Simpan, dan sekarang lihat hasilnya.
~ Silakan kalian ganti LINK IMAGE dengan link gambar buatan Kalian.
~ Lalu gantijuga LINK URL KALIANdengan link kalian inginkan.

Itulah sedikit Tutorial Buat dan Pasang Pop up Card Responsive di Blog, Cukup mudah bukan, Semoga Tutorial ini dapat bermanfaat, dan berguna. Sekian dan Terima Kasih.