Kombinasi Widget Follow By Email Dan Blogger Subscribe Button
Saya pikir ini adalah ide yang sangat cemerlang mengkombinasikan widget follow by email dengan blogger subscribe button dalam satu paket widget yang saya sebut dengan custom followbyemail + blogger subscribe button. Selain menghemat penggunaan code widget ini juga menghemat ruang dan tata letak blog.
Tahu kenapa? Karena ketika kamu menambahkan widget follow by email dan widget follow blog (blogger subscribe button) secara terpisah maka secara otomatis blog akan memuat 2 paket code css, javascript dan html secara terpisah pula yang tentunya itu akan menambah beban server.Oleh sebab itu saya putuskan untuk mengemas kedua widget blogger (followbyemail + subscribe button) menjadi satu paket dan saya akan membagikan nya kepada teman-teman blogger secara geratis.
Kelebihan Custom FollowByEmail + Blogger Subscribe Button.
- Ringan (Fast Loading).
- Responsive & Mobile Friendly.
- Hemat code dan ruang.
Cara Memasang Widget FollowByEmail + Blogger Subscribe Button
- Masuk ke tata letak blogger kemudian tambahkan widget HTML.
- Masukkan code html widget followbyemail + subscribe button kedalam widget html dan save.
- Selanjutnya install kode css widget followbyemail + subscribe button kedalam template blog.
- Jika kamu pemula, letakkan kode css di atas/sebelum kode
]]></b:skin>.
HTML CODE
<div class='follow-by-email-inner'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=Cordialblogger", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<h3>Follow By Email</h3>
<p>Enter your email address to subscribe to this blog and receive notifications of new posts by email.</p>
<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text' />
<div class='sub-sub-button'>
<input class='follow-by-email-submit' type='submit' value='Submit' />
<a id='subscribe-btn' href='https://www.blogger.com/follow.g?blogID=6286909915724512730' title='Subscribe' rel='noopener' target='_blank'>Subscribe</a>
</div>
<input value='Cordialblogger' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='en_US' />
</form>
</div>
CSS CODE
Catatan: Sebelum menginstal/memasang widget custom followbyemail + blogger subscribe button dari blog ini, pastikan kamu sudah menghapus semua style atau css followbyemail bawaan template anda dan jangan lupa untuk mengganti id blog
.follow-by-email-inner{box-sizing:border-box;font-family:'Open Sans', sans-serif;background:-webkit-linear-gradient(left, #ad39e4 0%, #3f59d7 100%);min-width:240px;padding:20px;height:auto;}
.follow-by-email-inner h3{font-size:1.4em;color:#fff;margin:0}
.follow-by-email-inner p{font-size:14px;color:#fff;line-height:inherit;}
.follow-by-email-address{box-sizing:border-box;background:#ecf0f1;border: #ccc 1px solid;border-bottom: #ccc 2px solid;margin-top:18px;margin-bottom:25px;padding:15px;width:100%;color:#000;border-radius:4px;}
.sub-sub-button{width:100%;height:40px;margin-top:15px;margin-bottom:0;text-align:center;}
.sub-sub-button::before{content:"or";font-size:1em;color:#fff;vertical-align:middle;}
.follow-by-email-submit{float:left;font-family:'Open Sans', sans-serif;font-weight:bold;font-size: 0.8em;background:#388d80;min-width:90px;width:35%;padding-top:10px;padding-bottom:10px;color:#fff;border-radius:4px;border:#27ae60 1px solid;cursor:pointer;}
#subscribe-btn{float:right;font-weight:bold;font-size:0.8em;background:#3f59d7;min-width:90px;width:35%;padding-top:10px;padding-bottom:10px;color:#fff;border-radius:4px;border:#2980b9 1px solid;text-decoration:none;}
6286909915724512730 dan feed uri Cordialblogger dengan id dan feed uri blog andaSelain cara di atas masih ada metode lain untuk mengkombinasikan widget follow by email blogger dengan widget follow blog atau blogger subscribe button. Ini lebih tepat disebut dengan memodifikasi widget follow by email blogger, simak tutorial lengkap nya.
Modifikasi Widget Follow By Email Blogger
- Masuk ke Tata Letak (Layout) blogger
- Tambahkan Widget Follow By Email
- Selanjutnya pindah dari Tata Letak ke menu Template kemudian pilih Edit HTML
- Klik Jump To Widget dan pilih Followbyemail1
- Ganti semua kode yang berada didalam tag table dengan code berikut:
<table width='100%'>
<tr>
<td><input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/></td>
<td><input class='follow-by-email-submit' type='submit' value='Submit'/></td>
</tr>
</table>
#Ganti semua cuplikan kode di atas dengan:
<p>Enter your email address to subscribe to this blog and receive notifications of new posts by email.</p>
<input autocomplete='off' class='follow-by-email-address' expr:placeholder='data:messages.emailAddress' name='email' type='email'/>
<div class='sub-sub-button'>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
<a expr:href='"https://www.blogger.com/follow.g?blogID=" + data:blog.blogId' title='Subscribe' id='subscribe-btn' rel='noopener' target='_blank'>Subscribe</a>
</div> - Terakhir tambahkan kode CSS Widget FollowByEmail di atas dan save template.
Jika kamu mengikuti metode yang kedua yaitu memodifikasi/menambahkan tombol follow blog (subscribe button) ke widget follow by email maka di sarankan untuk menghapus sebaris css berikut.
Selesai...! Semoga tutorial dan widget follow by email + subscribe button ini bermanfaat dan dapat mendongkrak jumlah followers blog anda baik itu followers by email maupun followers blog. Untuk preview widget kalian bisa lihat pada gambar di atas atau klik Share Apa Aja untuk melihat demo widget followbyemail secara langsung.
.follow-by-email-inner h3{font-size:1.4em;color:#fff;margin:0}
Komentar
Posting Komentar