Home AMP Membuat pop up follow / berlangganan blog AMP

Membuat pop up follow / berlangganan blog AMP

Bingung bagi anda yang mempunyai template amp untuk menampilkan pop follow / subscribe berlangganan email , oleh karena itu berikut artikel yang membahas tentang cara membuat dan menampilkan Pop Up Follow / Berlangganan dengan Widget Email untuk Tema Blogger AMP HTML.

Ikuti dengan Email atau Berlangganan blog Blogger melalui email membantu pemilik blog untuk mendapatkan keterlibatan yang lebih baik dengan pembaca & pengikut - pembaca blog. Pembaca & pengikut blog Anda dapat dengan mudah menerima pembaruan blog langsung ke inbox email mereka melalui layanan berlangganan email gratis yang diberdayakan oleh Google Feedburner.
Berikut ini adalah alternatif cepat & mudah untuk memperluas blog Blogspot Anda dengan tema terintegrasi AMP HTML untuk menambahkan pop up. Ikuti oleh Email gadget menggunakan komponen amp-lightbox - membersihkan kekacauan blog Anda.
cara cara disini adalah dasar-dasar tentang cara menambahkan Subscribe / Follow by Email menggunakan komponen amp-lightbox untuk blog Blogger dengan AMP HTML.
Oleh karena itu kita lakukan secara bertahap dan teliti.

Memasang amp-lightbox

komponen amp-lightbox harus tersedia agar pop up fungsi Follow by Email berfungsi. Periksa di antara tag <head> ... </head> tema Blogger Anda jika komponen ada.
<b:tag async='async' custom-element='amp-lightbox' name='script' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'/>
Sesudah itu:
1. Klik edit html.
2. klik "Lompat ke Widget> pilih" FollowByEmail * ".
3. Setelah membuat widget cari kode <b:includable id='main'>.
Perhatikan kode berikut :
<b:widget id='FollowByEmail99' title='Follow By Email' type='FollowByEmail' version='1'>
            <b:includable id='main'>
      <b:class name='blogramp-subscribe'/>
      <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
        <b:tag class='btn btn-primary' name='button'>
        <b:attr name='on' value='tap:blogramp-subs'/>
   <data:title/>
 </b:tag>
      <b:tag id='blogramp-subs' name='amp-lightbox'>
        <b:attr name='layout' value='nodisplay'/>
        <div class='widget-content'>
          <b:tag class='btn btn-primary' name='button'>
            <b:attr name='on' value='tap:blogramp-subs.close'/>
            x
          </b:tag>
          <div class='follow-by-email-inner'>

            ... {{ follow by email form markups }} ...

          </div>
        </div>
      </b:tag>
</b:includable>
          </b:widget>
1. Untuk yang berwarna biru merupakan indikator / referensi widget Anda.
2. Hapus yang diberi warna coklat .
3. Tambahkan semua markup amp-lightbox baru & tombol sebagai disorot dengan warna merah.
4. Klik save.
Pertimbangan hati-hati dalam penempatan tag baru yang disorot dengan warna merah.

Memperindah tampilan pop up

Gulir ke bagian atas kode Tema Anda dan temukan tag </style>.
Salin di bawah & tambahkan gaya baru sebelum / di atas </style> tag.
.blogramp-subscribe { }

.blogramp-subscribe amp-lightbox {
  background-color: rgba(0,0,0,.85);
}

.blogramp-subscribe amp-lightbox > div {
  display: table;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align:center;
}

.blogramp-subscribe amp-lightbox > div > div {
  padding: 0;
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.blogramp-subscribe button {
  font-weight: 700;
}

.blogramp-subscribe button[on="tap:blogramp-subs"] { }

.blogramp-subscribe button[on="tap:blogramp-subs.close"] {
  padding:0;
  margin:0;
  background-color: transparent;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  z-index: 99;
  border:2px solid #fff;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1em;
}

.blogramp-subscribe amp-lightbox form {
  padding: 1em;
  margin:0 auto;
}

@media (min-width:768px){
  .blogramp-subscribe > amp-lightbox form {
    width:60%;
  }
}
Selanjutnya klik save

Disqus Comments