Skip to main content

Cara Membuat Popup Subscribe By Email Di Blog Amp HTML

Subscribe By Email adalah salah satu sarana yang bisa kita lakukan untuk mendatangkan kembali pembaca setia blog kita agar pengunjung bisa kembali mengunjungi blog tersebut jika mendapatkan artikel baru.

Pada kesempatan kali ini saya akan membahas cara mudah untuk membuat popup Subscribe By Email atau message notification di blog amp html.
Sebelumnya saya telah menjelasakan cara membuat Membuat Popup Notification Facebook Fanspage Di Blog Amp, Dengan sedikit modifikasi kali ini saya kan membuat popup Subscribe By Email menggunakan tekhik tersebut, kita cuma mengganti markup iframe fans facebook dengan kode kotak subscribe saja.
Berikut ini Demo tampilanya :


Silahkan refresh halaman ini.

Jika tertarik menggungakan Subscribe By Email di blog berikut ini langkah-langlahnya :
Pertama simpan CSS di bawah ini di bawah style blog amp anda

#idnxmus-subox { text-align:center; padding:10px; } #idnxmus-subox p { margin:15px 0; font-size:16px; text-align:center; color:#fff; } .idnxmus-emailbox { position:relative; display:inline-block; } .idnxmus-emailbox input.emails { min-width:260px; max-width:100%; margin:0; padding:14px; border:none; color:#005af0; background:fff; outline:005af0; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; box-sizing:border-box; } .idnxmus-emailbox button.button-subs { padding:9px 10px; border:0; color:#fff; right:6px; top:6px; position:absolute; line-height:1; font-weight:600; text-transform:uppercase; background-color:#005af0; text-align:center; outline:none; cursor:pointer; border-radius:27px; }
    @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
 }
    *{
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      box-sizing:border-box
    }
    .content p{
      padding: 0 20px;
    }
    .notifbox {
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;
      left:0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
    }
    .notif_box{
      background:#000;
      color:#555;
      font-family:Roboto,sans-serif;
     position:absolute;
     padding:0;
     top:15%;
     transition:all .3s ease-in-out;
     width:90%;
     left:50%;
     margin-left:-45%;
     z-index:99;
     border-radius:4px;
     box-shadow:0 9px 46px 8px rgba(0, 0, 0, .14),0 11px 15px -7px rgba(0, 0, 0, .12),0 24px 38px 3px rgba(0, 0, 0, .2);
      z-index: 2;
      overflow:hidden;
    }
    .notif_box p{
      margin:0;
      padding:10px 20px;
      font-size:14px;
      font-weight: 400;
      line-height:1.3;
    }
    .notif_box p a {
      color:red;
      text-decoration: none;
      font-weight: 500;
    }
    .notif_box p a:hover {
      color:black;
    }
    .notifbox .close_notifbox {
     background: 0 0;
     border: none;
      padding:0;
     color: #efefef;
     font-size: 30px;
     position: absolute;
     top: 7px;
     right: 5px;
     cursor: pointer;
      width:20px;
      height:20px;
     line-height: 20px;
      text-align: center;
      z-index:2;
   }
    .notifbox .close_notifbox:focus,.notifbox .done_notifbox:focus {
      outline: none;
    }
    .notifbox .close_notifbox:hover {
     color: red;
    }
    .slideInDown {
      -webkit-animation-name: slideInDown;
      animation-name: slideInDown;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    @-webkit-keyframes slideInDown {
      0% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      visibility: visible;
    }
     100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      }
    }
    @keyframes slideInDown {
     0% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      visibility: visible;
      }
    100% {
     -webkit-transform: translateY(0);
     transform: translateY(0);
      }
    }


Keterangan :
Untuk lebar dan tampilan resposive anda bisa atur .nitif_box widh dan left
Untuk tampilan warna dan lain sebagainya anda bisa atur sesuai selera

Selanjutnya simpan HTMl ini diatas body blog anda

<div class="notifbox" id="notifbox">
      <div class="notif_box slideInDown">
      <button class='close_notifbox' on='tap:notifbox.hide' role='button' tabindex='0' title='Close'>&times;</button>
      <div id='idnxmus-subox'> <svg style='height: 50px; display: block; margin: auto;' viewbox='0 0 60 60'>    <path d='M28.5 4.75c-6.548 0-11.875 5.327-11.875 11.875S21.952 28.5 28.5 28.5c2.422 0 4.743-.715 6.712-2.066a1.186 1.186 0 1 0-1.345-1.957 9.441 9.441 0 0 1-5.367 1.648c-5.24 0-9.5-4.26-9.5-9.5 0-5.237 4.26-9.5 9.5-9.5s9.5 4.263 9.5 9.5v.931a2.067 2.067 0 0 1-2.064 2.064 2.067 2.067 0 0 1-2.066-2.064v-.931c0-2.96-2.408-5.37-5.37-5.37a5.377 5.377 0 0 0-5.37 5.37 5.375 5.375 0 0 0 5.37 5.37 5.329 5.329 0 0 0 3.933-1.743c.812 1.054 2.073 1.743 3.503 1.743a4.443 4.443 0 0 0 4.439-4.439v-.931c0-6.548-5.327-11.875-11.875-11.875zm0 14.87a3 3 0 0 1-2.995-2.995A3 3 0 0 1 28.5 13.63a3 3 0 0 1 2.995 2.995A3 3 0 0 1 28.5 19.62z' fill='#005af0'/>    <path d='M42.22 37.8a1.184 1.184 0 0 1-1.646-.33 1.187 1.187 0 0 1 .33-1.645l14.918-9.945-8.322-5.723V1.187C47.5.532 46.968 0 46.312 0H10.688C10.031 0 9.5.532 9.5 1.188v18.969L1.178 25.88l14.917 9.945A1.187 1.187 0 1 1 14.78 37.8L0 27.95V52.25C0 54.87 2.13 57 4.75 57h47.5c2.62 0 4.75-2.13 4.75-4.75V27.949L42.22 37.8zM11.875 2.376h33.25v28.5h-33.25v-28.5zm37.741 47.056c-.235.292-.58.444-.928.444-.262 0-.523-.083-.744-.259l-11.547-9.241H20.603L9.056 49.616a1.193 1.193 0 0 1-1.672-.185 1.188 1.188 0 0 1 .188-1.67l11.875-9.5a1.18 1.18 0 0 1 .74-.261h16.625c.271 0 .532.093.744.261l11.875 9.5a1.19 1.19 0 0 1 .185 1.67z' fill='#005af0'/> </svg> <p>Yuk langganan artikel gratis</p> <div class='idnxmus-emailbox'>  <form action='//feedburner.google.com/fb/a/mailverify' method='get' novalidate='' target='_blank'>    <input name='uri' type='hidden' value='EncepNurdin'/>    <input name='loc' type='hidden' value='en_US'/>    <input aria-label='Masukkan Email' autocomplete='off' class='emails user-valid valid' name='email' placeholder='yourmail@gmail.com' required='required' type='email'/>    <button aria-label='Subscribe' class='button-subs' type='submit' value='Subscribe'>Subscribe</button>  </form> </div> </div>       </div>     </div>


Keterangan Silahkan anda ganti feedburner google dengan nama feedburner google anda

Selesai , Semoga artikel ini bisa bermanfaat bagi anda dan terimaksih sudah membaca :) good luck
Oh iya Popup Subscribe by Email ini bisa di pasang juga buat blog non amp

Baca juga

Reaksi:

Berbagi Itu Peduli :

Comment Policy: Gunakanlah kontak komentar ini dengan bijak jangan buat link atau spam, Jika berkenan silahkan terlebih dahulu, Follow this blog

Selanjutnya tuliskan komentar anda sesuai dengan topik postingan ini.

Centang kotak Beritahu saya untuk mendapatkan notifikasi balasan via email.

Untuk komentar secara Private silahkan masuk ke Messaging Google