Dul Bjn Seorang Blogger dan Mahasiswa yang tak lulus-lulus kuliahnya yang kini tinggal di Bojonegoro. Ingin bermanfaat untuk orang lain dengan cara berbagi pengalaman lewat tulisan yang masih acak kadul.

Cara Membuat Kotak Berlangganan Subscribe Box Valid AMP

2 min read

Cara membuat kotak berlangganan/subribe box valid amp ala kompi ajaib Fungsi kotak berlangganan Memudahkan pengunjung untuk stay connected dan menerima update blog Anda di inbox email mereka. Meningkatkan “link effect”, bahkan “backlink” blog, karena Feedburner merupakan bagian dari Social Media SEO.

Namun jika Kita menggunakan template AMP HTML, kita tidak bisa begitu saja menambahkan widget Follow by Email/subribebox FeedBurner ini karena akan menyebabkan error pada AMP HTML.Untuk itu saya akan membagikan Cara membuat kotak berlangganan/subcribe box valid amp ala kompi ajaib.

  • Pertama masuk ke menu TATA LETAK dan tambahkan widget follow by email di sidebar maupun di footer.
  • Kedua masuk ke menu edit HTML dan cari widget Follow by Email yang baru saja di tambahkan tadi. Bagi yang menggunakan HP  silahkan download dulu tema yang baru saja di tambahkan widget follow by email. Dan edit di aplikasi untuk edit css.
    Jika sudah ketemu silahkan anda ganti dengan kode di bawah ini.

    <b:widget id='FollowByEmail1' locked='false' title='Get FREE Updates in Your Inbox' type='FollowByEmail' version='1' visible='true'>
        <b:includable id='main'>
      <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
      <div class='widget-content'>
        <div class='follow-by-email-inner'>
          <form expr:action='&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath' method='get' target='_blank'>
            <table>
              <tr>
                <td>
                  <input class='follow-by-email-address' name='email' placeholder='Your Email Address...' title='Your Email Address' type='text'/>
                </td>
                <td>
                  <input class='follow-by-email-submit' type='submit' value='Submit'/>
                </td>
              </tr>
            </table>
            <input expr:value='data:feedPath' name='uri' type='hidden'/>
            <input name='loc' type='hidden' value='en_US'/>
          </form>
          <p>Submit Your Email Address to Get FREE Our Latest Products Directly in Your Inbox</p>
        </div>
      </div>
    </b:includable>
      </b:widget>

  • Ketiga copy kode di bawah ini untuk css tampilanya dan taruh di atas kode </style> untuk tampilan mobile maupun desktop.
    div#FollowByEmail1{border:1px solid #dedede;background:#fff;border-radius:3px;padding:10px;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #FollowByEmail1 h2{font-family:Roboto,sans-serif;font-size:18px;font-weight:300;text-transform:capitalize;color:#666;margin-bottom:15px;padding:0;line-height:1em}
    #FollowByEmail1 p{font-family:Roboto,sans-serif;font-size:14px;font-weight:300;text-transform:capitalize;color:#666;margin-top:15px;padding:0;line-height:1em}
    #FollowByEmail1 table{width:100%}
    #FollowByEmail1 table td:nth-child(1){width:80%}
    #FollowByEmail1 table td:nth-child(2){width:20%}
    .FollowByEmail .follow-by-email-inner .follow-by-email-address{background:#efefef;width:100%;height:44px;padding:0 10px;font-family:Roboto,sans-serif;font-size:14px;border:0;outline:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    .FollowByEmail .follow-by-email-inner .follow-by-email-submit{height:44px;font-family:Roboto,sans-serif;text-transform:uppercase;border-radius:0;padding:0 10px;width:100%;font-size:14px;background:#dd5d24;border:0;outline:0;cursor:pointer;color:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

    Simpan template dan lihat hasilnya. Untuk contoh lihat yang saya pakai di blog saya di bawah ini. Semoga bermanfaat.

  • Dul Bjn Seorang Blogger dan Mahasiswa yang tak lulus-lulus kuliahnya yang kini tinggal di Bojonegoro. Ingin bermanfaat untuk orang lain dengan cara berbagi pengalaman lewat tulisan yang masih acak kadul.

    Solusi Cara Pasang Kode Safelink di Blog AMP HTML

    BLOGSGOBLOG.COM | Cara Pasang Kode Safelink di Blog AMP – Pada postingan sebelumnya admin pernah share Cara Mudah buat Safelink Random Artikel 2x Klik....
    Dul Bjn
    1 min read

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *