Tuesday, August 25, 2015

Memperbaiki Widget Subscribe Box

Memperbaiki Widget Subscribe Box

Memperbaiki Widget Subscribe Box - Postingan kali ini hanya sebuah perbaikan widget subscribe box di bawah artikel khusus template Vienna Lite 2 dan Vienna Mag.

Bagi yang menggunakan template yang sudah Saya sebutkan sebelumnya silakan ikuti cara memperbaiki widget subscribe box yang error saat submit email :

1. Login ke Blogger > Template > Edit HTML > Cari dan hapus kode di bawah ini :

<div class='follow-by-email-inner'>
      <form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
        <table class='tabletd1'>
          <tr>
            <td>
              <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
            </td>
            <td class='tabletd2'>
              <input class='follow-by-email-submit' type='submit' value='Submit'/>
            </td>
          </tr>
        </table>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>
<div style='clear:both'/>

Kemudian ganti dengan kode ini :

<div id='subscribe-box'>
<h4>Berlangganan via email</h4>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ArlinaDesign&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}' onfocus='if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}' type='text' value='Alamat Email'/>
<input name='uri' type='hidden' value='ArlinaDesign'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>
<div style='clear:both;'/>

Ganti tulisan yang ditandai dengan nama feedburner blog sobat.

2. Selanjutnya cari dan hapus kode di bawah ini :

/* CSS Follow by email */
.post-body .follow-by-email-inner{position:relative;margin-top:20px;display:block;background:#ffe4ad;padding:20px;color:#908672;box-shadow:inset 0 0 0 5px #ebd099}
.post-body .follow-by-email-inner:before{content:" Never miss our latest news, subscribe here for free ";display:table;font-size:16px;font-weight:400;margin:auto}
.post-body input.follow-by-email-address{position:relative;float:right;background:#fff;color:#444;border:1px solid #ccc;border-right:0;font-size:14px;height:42px;line-height:42px;padding-left:15px;transition:all .2s}
.post-body input.follow-by-email-address:focus {outline:none;color:#444;border-color:#ea5a50;}
input.follow-by-email-submit{background:#ff675c;color:#fff;cursor:pointer;font-size:15px;height:42px;line-height:42px;width:80px;z-index:0;border:1px solid #ea5a50;margin-left:-2px;transition:all .2s}
input.follow-by-email-submit:hover {outline:none;background:#ea5a50;color:#fff;}
.post-body .tabletd1 {width:auto;}
.post-body .tabletd1 td{border:0;padding:0;text-align:center;vertical-align:middle}
.post-body .tabletd2 {width:0;}

Ganti dengan kode ini :

/* Subscribe Box */
#subscribe-box{background-color:#ffe4ad;margin:20px 0 0 0;padding:20px;overflow:hidden;border:8px solid #ebd099}
#subscribe-box h4{color:#827459;font-size:16px;margin-bottom:20px;text-align:center;text-transform:uppercase}
#subscribe-box .emailfield{margin:auto;text-align:center;}
#subscribe-box .emailfield form {margin:0;}
#subscribe-box .emailfield input{padding:12px;color:#bcc4ca;border:1px solid #ebd099;font-size:14px;margin-bottom:10px}
#subscribe-box .emailfield input:focus{color:#454545;outline:none;border-color:#d5bc88;}
#subscribe-box .emailfield .submitbutton{background-color:#f8695f;color:#fff;margin:0;font-size:14px;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;border:0;transition:all .3s}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background-color:#e0594f;color:#fff;}

3. Simpan template.

Baca juga : Mengatasi Feedburner Error Message Pada Blogger


Selesai, sekarang widget subscribe box bisa berfungsi kembali. Jika ada kesulitan silakan bertanya lewat kolom komentar, terima kasih.