Cara Memasang Kotak Subscribe Keren dan Responsive di Atas Footer Blog - Seperti Template Viral Go

Kotak subscribe merupakan salah satu widget berlangganan yang sangat baik untuk dipasang di blog. Widget ini memiliki fungsi untuk mendatangkan visitor melalui semua artikel terbaru yang dikirim ke setiap email subscribe secara otomatis dan gratis tanpa ada biaya dari kedua belah pihak. Keuntungannya adalah subscribe tidak perlu lagi mengecek setiap artikel baru laman website atau blog yang diikutinya lagi, tetapi langsung masuk ke email. Sedang pemilik blog akan mendapatkan viewer yang banyak dan baik untuk seo blog.

Untuk pengguna template viral go premium, sebenarnya tidak perlu repot-repot memasangnya lagi, karena pada template viral go plus sudah terpasang kotak subscribe keren dan responsive ini. Namun pada template viral go lainnya belum terpasang. Sehingga bagi pengguna template viral go bisa mencobanya. Bagi blog yang menggunakan template lain boleh juga memasangnya, namun jika tampilannya kurang pasa maka, mungkin tidak cocok - silahkan dicoba saja dulu.

Sebelum memasang kode widget kotak subscribe keren dan responsive ini di blog, terlebih dahulu sahabat mengetahui ID FeedBurner Google sahabat yang berada di situs feedburner.google yang berada di bagian feed addres. Setelah mengetahuinya maka, silahkan ikut langkah-langkah di bawah ini untuk memasang 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}}

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=coretanzoneid&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='coretanzoneid'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input class='submitbutton' type='submit' value='Subscribe'/>
</form>
</div></div></div></div>

4. Ganti dua kode coretanzoneid 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 - seperti template Viral Go, semoga dapat bermanfaat bagi pengembangan blog anda.