Membuat Widget Follow By Email Valid AMP HTML

Membuat Widget Follow By Email Valid AMP HTML

Membuat Widget Follow By Email Valid AMP HTML

Widget Follow by Email dari FeedBurner merupakan salah satu cara menyebarkan konten blog melalui email. Salah satu fasilitas yang disediakan blogger untuk menyebarkan konten melalui email.

Apabila blog Anda menggunakan template AMP HTML, tidak bisa begitu saja menambahkan widget Follow by Email FeedBurner ini karena akan menyebabkan error pada AMP HTML.
Membuat Widget Follow By Email Valid AMP HTML

Maka dari itu kali ini saya akan memberikan cara membuat atau memodifikasi widget Follow by Email Blogger agar valid AMP HTML dengan kode yang di bagikan oleh Kang Adhy.

Berikut langkah-langkahnya:

1. Masuk ke LAYOUT/TATA LETAK lalu tambahkan widget Follow by Email di sidebar maupun footer.


2. Silahkan masuk ke EDIT HTML lalu ganti kode widget Follow by Email 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>

3. Apabila Anda ingin mengubah atau memodifikasi tampilannya silahkan gunakan kode CSS di bawah ini.

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}


4. Selesai. Selamat mencoba.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Blogger
Disqus
Pilih Sistem Komentar Yang Disukai

1 Comment

Makasih gan info nya, mau nyoba nih

Balas
Add Comment

Berkomentarlah dengan baik, Kepribadian anda tercemin saat berkomentar.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like CIDOSHARE? Keep us running by whitelisting CIDOSHARE in your ad blocker.

This is how to whitelisting CIDOSHARE in your ad blocker.

Thank you!

×
×
×