Cara Membuat Pop Up Card Unik

by
Cara Membuat Pop Up Card Unik


Cara Membuat Pop Up Card Unik – Halo sobat blogger balik lagi di watpedia. Seperti biasa, kita akan membagikan artikel atau postingan sederhana terkait dunia blogging, baik itu tutorial blogger simpel, atau pun tips seputar SEO.

Dan pada kesempatan kali ini seperti judul yang sudah kita lihat bersama, kita akan membagikan sebuah cara bagaimana Membuat Pop Up Card Unik pada blog atau website kita.

Adapun manfaat utama dari pop card unik ini adalah sebagai media promosi bagi website kita. Didalam pop card unik ini kita bisa mengisinya dengan beragam produk atau jasa yang bisa kita tawarkan.
Atau kita juga bisa menawarkan kepada para visitor blog untuk memfollow instagram dan beragam sosial media kita. Jadi, dengan Cara Membuat Pop Up Card Unik ini kita dapat menggunakannya untuk banyak fungsi tergantung sejauh mana tingkat kreatifitas kita. Baca Juga : Cara Menonaktifkan Inspect Element
Tenang, kamu tidak perlu khawatir blog atau websitemu menjadi berat karena Membuat Pop Up Card Unik ini, sebab blogmu akan tetap ringan seperti biasanya. Baiklah, jika kamu sudah penasaran bagaimana caranya, langsung saja ikuti langkah langkah dibawah ini.

Cara Membuat Pop Up Card Unik di Blog atau Website

1. Terlebih dahulu masuklah ke halaman dashboard bloggermu dan bukan halaman edit HTML.
2. Setelah itu cari kode ]]></b:skin> atau </style>. Lalu tempelkan Script CSS dibawah ini tepat diatas salah satu kode tersebut (maksudnya kode barusan yang kita 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;
}
3. Setelah itu, cari kode </body> masih di halaman edit HTML. Dan setelah ketemu dengan kode </body> tersebut, tempelkan Script dibawah ini tepat diatas kode tersebut.
 
<script type='text/javascript' >
$(document).ready(function() {
  $('#mstamvan').click(function() {
 $('#mstamvan').fadeOut('500');
  });
});
</script>

Kemudia , SIMPAN TEMPLATE.

Cara Membuat Pop Up Card Unik

Setelah anda berhasil menyimpan semua script diatas didalam template blog anda, langkah terakhir adalah dengan menyisipkan Script dibawah ini kedalam widget blog kita. Sama seperti cara biasanya saat kita menambahkan widget blog, hanya saja yang kita pilih adalah HTML/Javascript. Tambahkan script dibawah ini kedalam widget tersebut.
 
<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://ulr traget' target='_blank'><img style="width: 700px; height: 400px;" alt='Mas Tamvan on Facebook!' src='LINK IMAGE'/></a>
  </div>
</div>
</div>

Setelah berhasil memasukan script diatas kedalam widget HTML, klik atau pilih Simpan Atau Save. Selesai!

Tapi tunggu dulu, lihat keterangan dibawah ini masih mengenai cara membuat pop up card unik di blog:

Keterangan:

1. Pada SCRIPT diatas, ganti URL http://ulr traget dengan URL halaman yang ingin anda tuju. Mulai dari halaman penjualan produk atau jasa anda, link Instagram anda, Sosial media anda, atau link apapun sesuai yang anda inginkan. Dan siapa saja yang mengklik pop up card tersebut akan dibawa ke halaman tersebut.
 
2, Ganti tulisan LINK IMAGE dengan URL gambar yang akan menjadi background pop card unik anda. Buat tampilan gambar semenarik mungkin untuk mencari visitor.


3. Selesai.. Fixed..100%

Cara Membuat Pop Up Card Unik di Blog atau Website

Itulah tutorial kita hari ini seputar cara Membuat Pop Up Card Unik di Blog atau Website. Semoga dapat membantu sobat semua. Terimakasih kunjungannya, ikuti terus blog ini untuk mendapatkan informasi menarik lainnya seputar dunia blogging.
Source Image : https:// medium.  muz. li/
Script By : Mas Tamvan