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

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.