Cara Membuat Pop Up Box Keren dan Responsive di Blogger

Ilmu Internet - Selamat datang blogger, pada kesempatan kali ini saya akan membagikan cara membuat popup box notifikasi. Seperti yang sudah kita ketahui bersama, Popup digunakan pada sebuah website untuk mendorong pengguna melakukan sesuatu yang kita inginkan, seperti berlangganan, klik Like Facebook, Follow Twitter maupun periklanan dan lainnya yang berkaitan. 

Tertarik untuk menggunakan Popup box responsive dengan tombol close atau tutup, sehingga pengunjung tidak terganggu dan terus membaca konten anda. Berikut ini adalah popup box yang dapat anda gunakan pada blog atau website salah satunya blogspot.

Langkah-langkah Membuat Popup Box Keren dan Responsive di Blogger

  1. Masuk ke dashboard blogger
  2. Pilih Menu Tema 
  3. Tekan Tombol Edit HTML
  4. Tambahkan Kode CSS di bawah ini dan Letakan tepat di atas kode ]]></b:skin> atau </style>

    #faropop { z-index: 1000; position: fixed !important; top: 100px; left: 50%; width: 300px; margin-left: -160px; } #farobackpop { left: 0px; background: #000 none repeat scroll 0% 0%; opacity: 0.6; position: fixed; z-index: -1; top: 0px; height: 100%; width: 100%; } .tutuppop { 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; } .isipop { border-radius: 3px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); width: 300px; height: 200px; left: 50%; border: 4px solid #FFF; }
  5. Selanjutnya letakan kode berikut tepat di Atas kode </body>

     <script type='text/javascript'>

    $(document).ready(function() {

      $(&#39;#faropop&#39;).click(function() {

     $(&#39;#faropop&#39;).fadeOut(&#39;500&#39;);

      });

    });

    </script>

  6. Simpan Template
  7. Kemudian pasang kode berikut ke dalam Widget Blog anda.

     <div id='faropop'>

    <div id='farobackpop'></div>

    <div class='tutuppop' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'><a>&#215;</a></div>

    <div class='isipop'><a href='Masukkan link tujuan' target='_blank'><img style="width: 300px; height: 200px;" alt='Give Away!' src='Masukkan link gambar'/></a>

      </div>

    </div>

  8. Selesai, anda bisa melihat hasilnya di blog anda.


Akhir Kata

Anda bisa menyesuaikan pengaturan Popup Box nya dengan keinginan, berikut beberapa hal yang perlu anda rubah sesuai dengan tujuan anda membuat Popup tersebut.

  • Kode Bewarna Merah Isikan dengan Url Gambar
  • Kode Bewarna Biru Isikan Dengan link tujuan

Demikian postingan cara membuat popup box keren dan responsive yang bisa anda pelajari. Dengan adanya popup tersebut juga dapat menimalisir bouce rate yang disebabkan oleh pop up yang sangat tidak friendly. Semoga bermanfaat dan simak Tutorial blogger lainnya!



Artikel Menarik Lainnya

Komentar

Posting Komentar