Cara Mudah Membuat Subscribe Pop Up Message di Blog

Selamat datang di The Royal Moringa. Pada postingan kali ini, saya akan membahas mengenai bagaimana cara membuat pop up message atau pesan notifikasi di blog. Sebelumnya, saya akan memberitahu apa fungsi/kelebihan menggunakan pop up message. Pop up message sendiri sebenarnya adalah alert yang secara otomatis muncul di layar/screen pada saat kita membuka halaman suatu website. Nah, kali ini pop up message akan kita gunakan sebagai notifikasi bagi pembaca untuk subscribe ke blog anda. Adanya subscribe form notification di halaman blog mungkin sudah tidak asing bagi anda karena sekarang banyak sekali website yang menarik pembaca untuk berlangganan artikel menggunakan fasilitas ini. Meskipun blog anda telah memiliki widget subscribe form yang terpasang di halaman blog tapi dengan adanya fitur menarik yang saya tawarkan pada anda ini tentu akan memberikan nilai lebih dalam hal kelengkapan fitur web anda. Selain itu, subscribe form pop up message juga dapat mempermudah pengguna untuk berlangganan ke blog anda. Jika anda tertarik, silakan ikuti langkah-langkah berikut.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > cari ]]></b:skin> kemudian copy dan paste kode CSS berikut diatasnya

#backscreen {
          position: absolute;
          z-index: 999;
          background-color: transparent;
          left: 0;
          top: 0;         
          display: block;
          width:100%;
          height:100%;
}
#popup .window {
   z-index: 9999;
   border-radius: 8px;
   text-align: center;
 }
#popup #message {
   width: 24.75em;
   height: 200px;
   padding: 10px;
   background-color: #999966;
   font-family: 'Palatino Linotype', sans-serif;
   font-size: 24pt;
   color:#fff;    
 }
#popupfoot {
   font-size: 16pt;
   position: relative;
   bottom: 10px;
   width: 30em;
   left: 4em;
 }
input.email-address{
        background:#fff;
        border:1px solid #666666;
        color: #c5b7b7;
        padding: 5px 10px 6px 12px;
        font-family: "Playfair Display",sans-serif;
    }
input.email-address:focus{
        color:#000;
        border:1px solid #999966;
}
.subscribe{
      margin-left:12em;
      width:10em;
      padding:16px 20px;
      float:left;
}
@media only screen and (max-width:595px){
#popup #message {width: 315px;left:0.5em;}
#popupfoot {font-size: 10pt;left:2em;}
#email-address {max-width:8.75em !important;}
.subscribe{max-width:8.75em !important;padding-left:1em !important;}
}

2. Setelah itu silakan anda cari </head> kemudian copy dan paste kode script berikut diatasnya.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
 var id = '#message';  
 //Get the screen height and width
 var backscreenHeight = $(document).height();
 var backscreenWidth = $(window).width(); 
 //Set heigth and width to mask to fill up the whole screen
 $('#backscreen').css({'width':backscreenWidth,'height':backscreenHeight});  
 //transition effect
 $('#backscreen').fadeIn(500);
 $('#backscreen').fadeTo("slow",0.9); 
 //Get the window height and width
 var winH = $(window).height();
 var winW = $(window).width();                
 //Set the popup window to center
 $(id).css('top',  winH/2-$(id).height()/2);
 $(id).css('left', winW/2-$(id).width()/2);   
 //transition effect
 $(id).fadeIn(2000);      
 //if close button is clicked
 $('.window .close').click(function (e) {
 //Cancel the link behavior
 e.preventDefault();
 $('#backscreen').hide();
 $('.window').hide();
 });
//if mask is clicked
 $('#backscreen').click(function () {
 $(this).hide();
 $('.window').hide();
 });
 });
</script>

3. Setelah sudah, sekarang menuju <body> dan kita akan meletakkan pesan notifikasi tersebut setelah header dan sebelum featured posts/postingan terbaru anda > Copy dan paste kode HTML berikut diatas <div id="content-wrapper"> atau jika tidak menemukan silakan letakkan sebelum elemen postingan terbaru anda

<!-- popup start --><div id="popup" style="position:fixed !important;z-index:9999;left:19.5em">
   <div id="message" class="window" style="top:211.5px;left:8.5em;display:block;">
<div id="cross" style="margin-top:-24px" >
<a href="#" class="close agree" style="font:18px/1 FontAwesome;margin-left:43em;color:rgb(51, 51, 51);"><i class="fa fa-times" aria-hidden="true"></i></a></div>
Jangan Lewatkan Artikel Terbaru Kami!
<div id="popupfoot">
<form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='"window.open(\"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"' method='post' target='popupwindow'>
<table>
<tr>
<td>
<input class="email-address" type="text" style="width: 31.75em; height: 40px; font-size: 14px;margin:15px 5px 5px 10px;" id="email-address" name="email" placeholder="Masukkan Alamat Email Kamu"/></td>  
  <td><a href="#" class="agree" ><input class="subscribe" type="submit" value="SUBSCRIBE" style="height:52.5px;margin:0 0 -21.5px;"/></a></td>
  </tr>
</table>
</form>
</div>
</div>
<div id="backscreen">
</div>
</div>
<!-- popup end -->

4. Kemudian anda boleh mengganti isi pesan notifikasi diatas dengan sesuai dengan keinginan > Save Template dan lihat hasilnya

Oh ya..jangan lupa isikan alamat feedburner anda supaya pembaca dapat subscribe ke blog anda. Popup message yang saya berikan pada anda ini cukup memudahkan pengguna karena jika mereka ingin menutup widget/alert ini mereka tidak hanya bisa melakukannya melalui tombol silang (x) tetapi mereka bisa klik di sembarang tempat di luar popup message untuk menutupnya. Semoga artikel ini bermanfaat bagi anda. Terima kasih telah membaca!

3 Comments

Made GelgelMay 25, 2019 at 7:19 PM
akan saya coba, terimakasih
Belen June 8, 2019 at 1:34 PM
saya coba, lalu widget nya muncul tapi tidak bisa diketikkan emailnya. kenapa itu?
EERRrrrApril 15, 2024 at 9:43 AM
Sangat membantu, terima kasih
https://www.kebunpedia.id

Emoji

(y)

hihi

:-)

:-d

;(

;-(

@-)

:>)

(o)

(p)

:-s

(m)

8-)

:-t

:-b

b-(

:-#

=p~

x-)

(k)

The Royal Moringa

Cara Mudah Membuat Subscribe Pop Up Message di Blog

Post a Comment

3 Comments

Popular Posts

Cara Mudah Scan Foto/Dokumen di Komputer

Cara Mudah Membuat Form Pendaftaran di Blog

Cara Menyimpan File Dokumen Line di Android

Categories

Footer Menu Widget

The Royal Moringa

Cara Mudah Membuat Subscribe Pop Up Message di Blog

You may like these posts

Post a Comment

3 Comments

Social Plugin

Popular Posts

Cara Mudah Scan Foto/Dokumen di Komputer

Cara Mudah Membuat Form Pendaftaran di Blog

Cara Menyimpan File Dokumen Line di Android

Categories

Footer Menu Widget