Skip to main content

Cara Membuat Subscribe Box di Bawah Blog pada Template Viral Go

Cara Membuat Subscribe Box di Bawah Blog pada Template Viral Go - Saya akan membagikan tutorial cara membuat widget kotak berlangganan (subscribe box) pada footer atau dibawah blog pada template Viral Go. Tutorial ini sebenarnya saya khususkan untuk pengguna template viral go saja, karena, jika cara ini diterapkan ke blog lain mungkin akan berbeda atau tidak cocok.

Subscribe box (kotak berlangganan)  berfungsi sebagai layanan berlangganan melalui email, dalam artian setiap postingan atau artikel yang kita miliki akan terkirim langsung ke email subscribe tanpa harus mengeceknya langsung di website orang tersebut. Namun artikel tersebut akan terkirim di jam tertentu saja. Saya tambahkan, Blog yang anda telah subscribe tidaklah dipungut biaya alias gratis.

Jika anda membeli template viral go premium, sebenarnya widget Subscribe Box ini sudah terdapat pada viral go plus, namun belum ada pada template viral go lainnya. Oleh karena itu jika ada yang masih setia menggunakan viral go versi sebelumnya, tidak ada salahnya mencoba tutorial ini.

Jika anda ingin memasang subscribe bos dalam blog anda sebaiknya anda terlebih dahulu mengetahui id FeedBurner Google anda, yaitu dengan mengunjungi situs ini https://www.feedburner.com/ yang terletak pada bagian feed address. Tanpa panjang lebar lagi, langsung saja simak tutorialnya.

Cara Membuat Subscribe Box di Bawah Blog pada Template Viral Go

1. Masuk kedalam blog anda > pilih Tema > selanjutnya pilih Edit HTML

2. Tambahan kode di bawah ini tepat diatas </style> yang pertama

/* 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 tambahkan kode di bawah ini, tepat berada di atas <footer class='footer' id='footer

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

*Ubah AnalisYuki dengan ID FeedBurner kalian

4. Jika sudah pilih Simpan Tema. Untuk melihat demonya bisa dilihat seperti blog saya ini.

Sekian dari saya Tutorial Cara Memasang Tombol Subscribe Box (Kotak Berlangganan) di Bawah Blog pada Template Viral Go, semoga tutorial ini bisa bermanfaat bagi anda, jika ada sesuatu yang ingin ditanyakan bisa langsung ke kolom komentar, Terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar