Cara Buat widget Kotak Berlangganan (Subscribe Box) Dibawah Postingan Valid AMP

Cara Buat widget Kotak Berlangganan (Subscribe Box) Dibawah Postingan Valid AMP- Kotak Berlanggan atau Subscribe box adalah Widget Yang mempunyai peran penting bagi Seorang yang selalu menunggu update tan dari blog kita. Cara kerja subscribe box setiap saat kita membuat artikel dan kita publikasikan otomatis Artikel yang sudah di publikasikan akan dikirim ke email seorang yang telah mendaftarkan/yang telah berlangganan di feed atau blog kita. Selain mempermudah seorang mengetahui Artikel yang baru kita publish secara tidak langsung juga mendatangkan visitor pada artikel yang baru kita publish. Tapi sayangnya untuk blog AMP membuat subscribe box kita tidak boleh menaruh CSS di dalam Html karena jika HTML dan css di campur maka akan menyebabkan Error pada AMP HTML nya. Jadi solusinya css harus dipisahkan dengan HTML pemanggilnya. Maka dari itu Disini saya akan membahas Artikel Cara Buat widget Kotak Berlangganan (Subscribe Box) Dibawah Postingan Valid AMP. Subscribe box ini berwarna Putih bersih dan Button berwarna biru muda dengan icon Social Share Di atasnya. Untuk demonya Kotak Berlangganan di bawah postingan silahkan lihat Di blog saya Di sini.

Demo
Jika anda berminat Silahkan simak tutorialnya Cara Buat widget Kotak Berlangganan (Subscribe Box) Dibawah Postingan Valid AMP. Di bawah ini.

Baca juga : Cara Manual Buat Related Post Dan Adsense Ditengah Artikel valid AMP

• Pertama Masuk Ke Blogger > Tema/Template > Edit Tema.
  
• Kemudian cari Kode </article> ctrl+f untuk mempermudah pencarian.
  
• Silahkan Copy kode HTML di bawah ini Dan Taruh di bawah kode </article>
  

<!-- Subcribe -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='amp-subs'>
<div class='p'>
<amp-social-share height='38' type='twitter' width='38'> </amp-social-share>
<amp-social-share height='38' type='gplus' width='38'/>
<amp-social-share height='38' type='pinterest' width='38'/>
<amp-social-share height='38' type='linkedin' width='38'/>
<amp-social-share data-param-app_id='254325784911610' height='38' type='facebook' width='38'/>
<amp-social-share height='38' type='tumblr' width='38'/>
<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='38' type='whatsapp' width='38'/>
<amp-social-share height='38' type='sms' width='38'/>
</div>
<div class='clear'/>
<p>BERLANGGANAN GRATIS</p>
<div class='emailfield'>
<form action='//feedburner.google.com/fb/a/mailverify' target='_blank'>
<input class='submitmail' name='email' placeholder='Enter Your E-mail Address..' title='Email' type='text'/>
<input name='uri' type='hidden' value='dulbjn'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe'/>
</form>
</div>
</div>
<div class='clr'/>
</b:if>
<!-- Subcribe End -->

• Penampakanya akan seperti dibawah ini.

</article>

<!-- Subcribe -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='amp-subs'>
<div class='p'>
<amp-social-share height='38' type='twitter' width='38'> </amp-social-share>
<amp-social-share height='38' type='gplus' width='38'/>
<amp-social-share height='38' type='pinterest' width='38'/>
<amp-social-share height='38' type='linkedin' width='38'/>
<amp-social-share data-param-app_id='254325784911610' height='38' type='facebook' width='38'/>
<amp-social-share height='38' type='tumblr' width='38'/>
<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='38' type='whatsapp' width='38'/>
<amp-social-share height='38' type='sms' width='38'/>
</div>
<div class='clear'/>
<p>BERLANGGANAN GRATIS</p>
<div class='emailfield'>
<form action='//feedburner.google.com/fb/a/mailverify' target='_blank'>
<input class='submitmail' name='email' placeholder='Enter Your E-mail Address..' title='Email' type='text'/>
<input name='uri' type='hidden' value='dulbjn'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe'/>
</form>
</div>
</div>
<div class='clr'/>
</b:if>
<!-- Subcribe End -->

• Silahkan ganti dulbjn dengan kode unik akun feedburner anda.
  
• Kemudian Untuk mempercantik tampilanya silahkan copy kode css di bawah ini dan Taruh di bawah <style amp-custom='amp-custom'> Untuk Tampilan Postingan Desktop Dan Tampilan postingan Mobile.
  

/*Subscribe*/
amp-social-share[type="twitter"], amp-social-share[type="gplus"], amp-social-share[type="facebook"], amp-social-share[type="linkedin"], amp-social-share[type="pinterest"], amp-social-share[type="tumblr"], amp-social-share[type="whatsapp"], amp-social-share[type="sms"], amp-social-share[type="email"]
{ border-radius:100px;
background-size:25px 25px;
transition:all .4s ease-out;
}
amp-social-share[type="twitter"]{background-color:#55ACEE}
amp-social-share[type="gplus"]{background-color:#DC4E41}
amp-social-share[type="facebook"]{background-color:#3B5998}
amp-social-share[type="linkedin"]{background-color:#0077B5}
amp-social-share[type="pinterest"]{background-color:#BD081C}
amp-social-share[type="tumblr"]{background-color:#32506d}
amp-social-share[type="whatsapp"]{background-color:#25d366}
amp-social-share[type="sms"]{background-color:#ca2b63}
amp-social-share[type="email"]{background-color:#7B0099}

#amp-subs .emailfield .submitbutton{background:#00c2ff;color:#fff;text-transform:uppercase;border:0;outline:0;cursor:pointer;border-radius:2px;font-weight:700;padding:10px;font-family:Roboto,sans-serif}
#amp-subs{width:100%;background:#fff;padding:25px 15px 50px 15px;height:auto;box-sizing:border-box;border-radius:2px;box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);color:#757575;cursor:default;text-align:center}
#amp-subs .title{padding:10px 25px;line-height:30px;font-size:26px;color:#fff;border-bottom:1px solid #bbb;text-transform:uppercase;border-radius:2px 2px 0 0}
#amp-subs .emailfield input{width:80%;padding:10px;color:#000;font-size:13px;border-radius:1px;border:1px solid #ddd;background:#f5f5f5}
#amp-subs .emailfield .submitbutton{width:50%;margin-top:7px;text-align:center}
#amp-subs p{font-size:17px;color:#666;line-height:20px;font-weight:700;text-align:center;position:relative;float:none}
#amp-subs .emailfield input:focus{outline:0}
#amp-subs .emailfield .submitbutton:active{padding-top:11px;padding-bottom:11px;box-shadow:0 1px 0 0 #00ffe2;text-align:center}
#amp-subs .emailfield .submitbutton:hover{color:#eee;text-align:center}
#amp-subs .title {text-align:center}

• Terakhir klik Simpan Template dan lihat hasilnya.
  

Jika Tampilan kurang pas di blog anda silahkan sesuaikan saja cssnya menurut keinginan anda.Maklum buatan newbee. Hhe Mungkin hanya itu yang bisa saya bagikan tentang artikel Cara Buat widget Kotak Berlangganan (Subscribe Box) Dibawah Postingan Valid AMP Semoga bermanfaat selamat bervalidasi ria.