Cara Membuat Kotak Subscribe Keren dan Responsive di Atas Footer Blog

Cara Memasang Kotak Subscribe Keren dan Responsive di Atas Footer Blog

Langkah langkah dalam memasang kotak subscribe seperti yang ada pada template viral go plus adalah sebagai berikut:

1. Log in ke blog anda, kemudian pilih (klik) Tema > selanjutnya pilih (klik) Edit HTML

2. Cari kode </style> yang pertama (gunakan Ctrl+F untuk mempercepat), kemudian letakkan kode di bawah ini tepat di atasnya.

/* Footer Subscription */
#na-wrapper{background:#fff;width:100%;border-top:1px solid rgba(0,0,0,0.08)}
.invertsubs-content{max-width:970px;margin:0 auto;overflow:hidden;padding:0;position:relative}
#invertsubs-subs{text-align:center;text-transform:uppercase;width:100%;height:auto;border-radius:2px;padding:0}
#invertsubs-subs .emailfield form.invertsubs-form{position:relative;margin:0 auto 40px auto;overflow:hidden;width:65%}
#invertsubs-subs p{color:#888;padding:40px 20px 20px 20px;margin:0;overflow:hidden}
#invertsubs-subs .emailfield{padding:0 20px 10px}
#invertsubs-subs .emailfield input{width:100%;color:#888;padding:15px;font-size:13px;border:1px solid rgba(0,0,0,0.1);background:rgba(255,255,255,1)}
#invertsubs-subs .emailfield input:focus{color:#000;outline:0}
#invertsubs-subs .emailfield input::-webkit-input-placeholder{color:#888}
#invertsubs-subs .emailfield input::-moz-placeholder{color:#888}
#invertsubs-subs .emailfield input:-ms-input-placeholder{color:#888}
#invertsubs-subs .emailfield input:-moz-placeholder{color:#888}
#invertsubs-subs .emailfield .submitbutton{display:inline-block;position:absolute;right:0;top:0;background:#222;color:rgba(255,255,255,1);text-transform:uppercase;border:0;outline:0;cursor:pointer;width:20%;border-radius:0;transition:all .1s}
#invertsubs-subs .emailfield .submitbutton:active{border:0;outline:0}
#invertsubs-subs .emailfield .submitbutton:hover{background:#000;color:rgba(255,255,255,1);box-shadow:0 10px 20px -10px rgba(0,0,0,0.1)}
@media screen and (max-width:768px){
#invertsubs-subs .emailfield form.invertsubs-form{width:95%}#invertsubs-subs .emailfield .submitbutton{width:auto}}

hadeehh 3. Selanjutnya cari kode <footer class='footer' id='footer, kemudian letakkan kode di bawah ini tepat di atasnya.

<div id='na-wrapper'>
<div class='invertsubs-content'>
<div id='invertsubs-subs'>
<p>Subscribe Our Newsletter</p>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' class='invertsubs-form' method='post' novalidate='' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=nandapratama&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <input name='email' placeholder='Your email address' title='Email' type='text'/>
  <input name='uri' type='hidden' value='nandapratama'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input class='submitbutton' type='submit' value='Subscribe'/>
</form>
</div></div></div></div>

4. Ganti dua kode nandapratama dengan ID FeedBurner anda, kemudian klik simpan dan lihat blog anda.

Jika kotak subscribe-nya belum sesuai dengan template anda, silahkan letakkan kode kedua sesuai dengan kode template yang anda miliki

Sekian dulu postingan kali ini tentang cara memasang kotak subscribe keren dan responsive di atas footer Blog , semoga dapat bermanfaat bagi pengembangan blog anda.