Cara Membuat Pop-up Card unik di Blogger

Adapun manfaat utama dari Pop up card unik ini adalah sebagai media promosi bagi website kita. Didalam Pop up card unik ini kita bisa mengisinya dengan beragam produk atau jasa yang bisa kita tawarkan. dengan Cara Membuat Pop up Card unik ini kita dapat menggunakannya untuk banyak fungsi tergantung sejauh mana tingkat kreatifitas kita. Atau kita juga bisa menawarkan kepada para visitor blog untuk memfollow instagram dan beragam sosial media kita.

Membuat Pop up banner di blog yang tentunya menarik perhatian pengujung blog dengan menggunakan CSS dan Javascript. Sebagai "catatan" Pop up banner ini akan muncul di setiap kita membuka halaman baru, tidak hanya di homepage saja. Pop up banner iklan ini disertai dengan tombol close di pojok kanan atas luar banner dan akan muncul beberapa detik setelah pengunjung membuka halaman blog.

Note : Tetapi tidak dianjurkan untuk memasang iklan google adsense di sini karena bisa saja terkena banned karena menyalahi ketentuan google yaitu menutupi konten website.

Anda tidak perlu khawatir blog atau website anda menjadi berat karena Membuat Pop Up Card unik ini.
Langkah membuat popup banner dihalaman blog sangatlah mudah tinggal kita copy saja kode kode dibawah ini dan pastekan di dalam blog kita.

Cara Membuat Pop Up Card Unik di Blogger

• Pertama kita masuk Blogger dulu tentunya.
• Klik Tema > Edit HTML.
• Tempelkan Script CSS dibawah ini tepat diatas code </style> atau ]]></b:skin>

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

• Setelah itu,  masih di halaman Edit Html tempelkan Script dibawah ini tepat diatas kode </body>.

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

• Save langkah terakhir adalah dengan menyisipkan Script dibawah ini kedalam widget.
• Klik menu Tata letak tambahkan widget HTML/Javascript tempelkan kode dibawah ini didalamnya.

 <div id='anekatorial'>
<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/awesome.android' target='_blank'><img style="width: 700px; height: 400px;" alt='Awesome android on Facebook!' src='LINK IMAGE'/></a>
  </div>
</div>
</div> 

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

1. Pada script diatas ganti URL https://fb.com/awesome.android dengan URL halaman tujuan.
2. Ganti tulisan LINK IMAGE dengan URL gambar yang akan menjadi background Pop up card unik anda.
3. Selesai.....!

Demikian tutorial mengenai cara membuat Pop up card di Blogger. Semoga bermanfaat...