Membuat Pop Up Card Seperti Ganool dan IndoXXi

Di kesempatan kali ini saya akan mebahas tentang bagaiman Cara Membuat Pop Up Card Seperti di tempatnya Ganool. Kenapa harus ada Pop Up Card karena hal ini adanya pemasngan iklan / informai pada bog / website tersebut.

Di artikel yang saya buta ini suport dengan SEO dalam artian tampilan enak dilihat dan cepat terampil jadi tidak menggangu kinerja / speed pada blog / website tersebut. 


Hal ini sudah saya ujicoba di blog saya dan hasil Work 100% bisa terampil sangat cepat di dekstop. Dalam pemasangan nanti ada tiga poin yaitu yang harus kita pasnag / tempatkan sebagi berikut :
  • Memasang code CSS (style).
  • Memasang code HTML (body).
  • Memasng code Java Script (tataletak widget).

Kenapa harus ada code CSS, berfungsi untuk membuat tampilan menjadi enak alihat responsive.
Kenapa ada code HTML, berfungsi untuk menampilan code ke blog / website, hal ini hapir sama dengan java script. Oky langsung saja ke panduan dalam membuat Pop Up Card Seperti Ganool.

Langkah - langkah Pop Up Card Seperti Ganool :
  • Masuk ke blogger => Dasbor = > Tema => Edit
  • Cari kode ]]></b:skin> atau </style>. Tempatkan kode CSS di bawah ini di atas salah satu kode tersebut.
/*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;
}

  • Cari kode </body>. Taruh kode HTML di bawah ini di atasnya.
<script type='text/javascript' >
$(document).ready(function() {
$('#mstamvan').click(function() {
$('#mstamvan').fadeOut('500');
});
});
</script>

  • Lalu simpan / Save.
  • Buka Tata Letak => Tambah Widget => HTML (Java Script)
  • Paste code Java Script di bawah ini.
  • <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://anangzd.com' target='_blank'><img style="width: 700px; height: 400px;" alt='Mas Tamvan on Facebook!' src='LINK IMAGE'/></a>
  • </div>
  • </div></div>

Keterangan :
- Warna merah ganti link yang akan di tujukan.
- Warba biru link gambar Pop Up yang tertampil di dekstop.

Sekarang kalian sudah bisa membuat Pop Up Card Seperti Ganool, semoga panduan ini bermanfaat dan bisa menjadi refrensi sebelum kalian membuatnya. Jangan lupa bagikan ilmu ini kepada orang lain agar bisa bermanfaat kembali.
Posting Komentar (0)
Lebih baru Lebih lama