Cara Menciptakan Widget Pop Up Card Di Blogger

Cara Membuat Widget Pop Up facebook like di blogger

Tutorial Membuat Widget Pop Up Card Di Blogger

Widget pop up card menyerupai popup facebook, pop up card ini memakai script yang biasanya dipakai untuk menampilkan pop up facebook like atau follow, cuma disini tidak memakai embed facebook like, disini hanya menampilkan image pembertiahuan contact saja. Kaprikornus kalian sanggup mengganti pemberitahuan tersebut sesuai harapan kalian.

Bisa berupa subcibe email, pemberitahuan maintenance, pemberitahuan jikalau anda mendapatkan iklan sanggup juga contact.

Widget pop up card ini tidak akan memberatkan proses loading halaman blog alasannya yakni widget ini akan tampil pada dikala blog berhasil di load gres sehabis proses load blog final widget pop um ini akan tampil menyerupai halnya pada pop up facebook.

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

Result

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

Tutorial Blogger Lainnya :

• Cara Praktis Membuat Video Di Blog Responsive

• Cara Cek Dan Mengatasi Broken Link Di Blog

• Cara Baru Membuat Banner Iklan Blog Melayang Kiri Kanan

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 sempurna di atas isyarat 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!!

• 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=' on Facebook!' src='LINK IMAGE'/></a>   </div> </div> </div> 

• Ok, kini 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 hingga disini artikel tutorial perihal cara memasang widget pop up menyerupai facebook di blogger ini, supaya artikel ini bermanfaat, salam tamvan dan salam jumpa lagi di artikel tutorial selanjutnya.