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

Cara Buat widget Kotak Berlangganan (Subscribe Box) Dibawah Postingan Valid AMP
Di Posting Oleh : Admin
Kategori : Valid amp Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog | Berita Terkini dan Terbaru: Terbaru.co.id | Watch Or Download Latest Movie: Filmer Film

Demo

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

Baca jua : 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.

Lokasi:

Berbagi :