3 Widget Email Subscribe Terbaik Untuk Blog

5 Likes Comment
Widget berlangganan

Widget berlangganan email atau Email Subscribe sebenarnya adalah form langganan yang terletak di sidebar blog. Biasanya, form ini juga disediakan dengan gratis oleh FeedBurner.

Pada dasarnya, Widget ini akan membuat blog anda tampil lebih cantik, menarik dan elegan. Meski sedikit memperlambat loading blog, tapi tidak jadi masalah.

Widget dibawah ini akan membantu orang-orang untuk berlangganan artikel dengan gratis setiap kali anda memperbaharui postingan yang ada pada blog.

Cukup memasukkan alamat email, lalu menekan tombol berlangganan maka seketika itu mereka akan mendapatkan email saat ada pembaharuan artikel di blog.

Baca Juga : Cara Menambahkan Widget Twitter di Blog

Widget ini juga tidak saja meningkatkan lalu lintas tetapi juga bisa membantu menumbuhkan komunitas pembaca dan fans yang setia.

Yang sangat penting untuk meningkatkan kualitas artikel dan situs agar memperoleh kepercayaan dari pembaca. Lantas, apa manfaat menggunakan widget berlangganan ini? Ada beberapa manfaat antara lain:

  1. Kotak berlangganan lewat email adalah cara ampuh dalam mempromosikan blog
  2. Widget berlangganan membantu anda menjaring pembaca yang aktif
  3. Widget berlangganan akan menumbuhkan trafik
  4. Lebih banyak lalu lintas itu berarti lebih banyak penghasilan

Untuk itu, dalam artikel ini saya sudah saya sediakan beberapa widget email subscribe terbaik saat ini. Yang bisa membantu anda menjaring pembaca untuk blog dengan instan, cepat dan mudah.

Selain itu juga, widget ini akan membantu pengunjung agar terintegrasi dengan media sosial yang anda buat yang secara langsung bisa mendekatkan pembaca dengan anda sendiri. Jadi, widget ini punya banyak manfaat sehingga sangat penting untuk dipasang di blog.

3 Widget Email Subscribe Terbaik Untuk Blog

Beberapa blogger menyediakan widget berlangganan namun tampilannya tidak terlalu menarik. Ada juga yang menyediakan widget constum yang terintegrasi dengan media sosial, meskipun tampilannya sama saja. Karena itu, saya berusaha membuat widget kostum untuk email subscribe yang baru kepada anda.

Baca Juga : 4 Penyedia Widget Terbaik Saat Ini

Yang perlu anda lakukan hanya menyalin lalu menempelkan kode-kode JS dibawah ini pada kode HTML yang sudah tersedia di blog.

Dibagian akhir, saya juga akan memberikan tutorial cara memasang dan mengkonfigurasinya. Jika ada masalah saat melakukan konfigurasi, silahkan sampaikan di kolom komentar.

Nah berikut disajikan 3 widget email subscribe terbaik saat ini. Widget apa saja itu? Pasti penasaran kan? Berikut daftarnya untuk anda.

WIDGET 1: Mirip Gmail

Email subscribe

<style type=”text/css”>
.hbzsignup-form {
    background: transparent url(“https://1.bp.blogspot.com/-Y_e_B9KzB-c/Vr6fNXna_BI/AAAAAAAAALo/dk3TFDW2-4I/s1600/Email-bg.jpg”) no-repeat scroll center center / 250px 150px;
    height: 150px;
    width: 250px;
    margin: 10px auto 60px auto;
}
.hbzform-inner p {
    text-align: center;
    color: #fff;
    padding: 10px;
    font: bold 18px “trebuchet MS”,”Tahoma”;
}
.hbzemailform {
    margin: 120px auto 5px;
    width: 215px;
}
#hbzemailbox {
    background: #FEFEFE none repeat scroll 0% 0%;
    border: medium none;
    font: 12px/12px “HelveticaNeue”,Helvetica,Arial,sans-serif;
    margin-right: 5px;
    box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
    padding: 7px;
    box-sizing: content-box;
    height: 12px;
    vertical-align: top;
    display: inline-block;
}
#hbzemailbutton {
    background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
    box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
    border: medium none;
    color: #FFF;
    cursor: pointer;
    font: 13px/13px “HelveticaNeue”,Helvetica,Arial,sans-serif;
    padding: 6px;
    border-radius: 5px;
    height: 27px;
    display: inline-block;
}
#hbzemailbutton:hover {
    background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}
.hbzsocial-icons {
    margin: 20px 0 0;
    overflow: hidden;
    display: block;
    text-align: center;
}
.hbzsocial-icons ul {
    display: inline-block;
    margin: 0 auto !important;
    text-align: center;
    padding: 0px
}
.hbzsocial-icons ul li {
    background: transparent !important;
    border: none !important;
    float: left;
    list-style-type: none !important;
    margin: 0 4px 10px !important;
    padding: 0 !important;
}
.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}
.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url(“http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png”) no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 38px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s; width: 38px;
}
.hbzsocial-icons ul li.social-facebook a {
    background-color: #3b5998;
    background-position: -60px 3px;
}
.hbzsocial-icons ul li.social-twitter a {
    background-color: #00aced;
    background-position: -253px 3px;
}
.hbzsocial-icons ul li.social-gplus a {
    background-color: #dd4b39;
    background-position: -93px 3px;
}
.hbzsocial-icons ul li.social-pinterest a {
    background-color: #cb2027;
    background-position: -157px 3px;
}
.hbzsocial-icons ul li.social-rss a {
    background-color: #F87E12;
    background-position: -189px 3px;
}
.hbzsocial-icons ul li a:hover {
    background-color: #333;
}
.hbzsocial-like {
    display: block;
    text-align: center;
}
.hbzsocial-like tbody, .hbzsocial-like tbody tr {
    display: block;
}
.hbzfb-likes {
    display: inline-block;
    padding-bottom: 15px;
    margin-right: 5px;
}
.hbztw-follow {
    display: inline
}
</style>
<div>
 <div class=’hbzsignup-form’>
  <div class=’hbzform-inner’>
   <p>Sign Up for Email Updates</p>
  </div>
  <div class=’hbzemailform’>
   <form action=’http://feedburner.google.com/fb/a/mailverify’ id=’subscribe’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[URL Blog]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>
    <input name=’uri’ type=’hidden’ value='[URL Blog]’/>
    <input name=’loc’ type=’hidden’ value=’en_US’/>
    <input id=’hbzemailbox’ name=’email’ required=” type=’text’ placeholder=’Enter your email…’/>
    <input id=’hbzemailbutton’ title=” type=’submit’ value=’Sign up’/>
   </form>
  </div>
 </div>
 <div class=”hbzsocial-icons”>
  <ul>
   <li class=”social-facebook”><a href=”[URL FB]” target=”_blank” title=”Facebook”>Facebook</a></li>
   <li class=”social-twitter”><a href=”[URL Twitter]” target=”_blank” title=”Twitter”>Twitter</a></li>
   <li class=”social-gplus”><a href=”[URL Google+]” target=”_blank” title=”Google+”>Google+</a></li>
   <li class=”social-pinterest”><a href=”[URL Pinterest]” target=”_blank” title=”Pinterest”>Pinterest</a></li>
   <li class=”social-rss”><a href=”[URL RSS]” target=”_blank” title=”RSS”>RSS</a></li>
  </ul>
 </div>
 <table class=’hbzsocial-like’>
  <tbody>
   <tr>
    <td class=’hbzfb-likes’>
     <div id=”fb-root”>
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4”;
  fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
     </script>
     <div class=”fb-like” data-href=”[URL FB]” data-layout=”button_count” data-action=”like” data-show-faces=”false” data-share=”false”>
     </div>
    </td>
    <td class=’hbztw-follow’>
     <a href=”[URL Twitter]” class=”twitter-follow-button” data-show-count=”true” data-show-screen-name=”false” data-dnt=”true”>Follow @[Username Twitter]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);
     </script>
    </td>
   </tr>
  <tbody>
 </table>
</div>
________________________________

WIDGET 2: Terintegrasi dengan akun media sosial

4 Widget Berlangganan Di Blog Yang Wajib Kamu Pasang Sekarang
<style type=”text/css”>
.hbzsub {
    background-color: #1E293B;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px rgb(30, 41, 59);
}
.hbzemailform {
    width: 239px;
    margin: 10px auto;
}
.hbzform-inner h4 {
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    font: bold 18px/40px “trebuchet MS”,”Tahoma”;
}
#hbzemailbox {
    background-color: #FFF;
    border: 1px solid #FFF;
    border-radius: 7px 0px 0px 7px;
    height: 20px;
    padding: 6px;
    box-sizing: content-box;
}
#hbzemailbutton {
    background-color: #F0553B;
    border: 1px solid #F0553B;
    color: #FFF;
    height: 34px;
    border-radius: 0px 7px 7px 0px;
    margin-left: -4px;
    font-weight: 600;
    cursor: pointer;
}
#hbzemailbutton:hover {
    background-color: #1E293B;
    border: 1px solid #FFF;
    box-shadow: 0 0 5px #ddd;
}
.hbzsocial-like {
    background: transparent url(“https://3.bp.blogspot.com/-2hqsqwGQg2M/VsCLsiFb2sI/AAAAAAAAAMY/7jkBsN8tVIg/s1600/Facebook-twitter-rectangle.png”) no-repeat scroll center center / 250px 157px;
    width: 250px;
    height: 120px;
    margin: 10px auto;
}
.hbzfb-likes {
    margin-top: 90px;
    margin-left: 20px;
    position: absolute;
    display: block;
    box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);
}
.hbztw-follow {
    display: block;
    margin-left: 152px;
    position: absolute;
    margin-top: 89px;
    box-shadow: 0 0 10px rgba(2, 81, 173, 0.59);
    height: 20px;
}
</style>
<div class=”hbzsub”>
 <div class=’hbzsignup-form’>
  <div class=’hbzform-inner’>
   <h4>Get Posts In Your Inbox</h4>
  </div>
  <div class=’hbzemailform’>
   <form action=’http://feedburner.google.com/fb/a/mailverify’ id=’subscribe’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[URL Blog]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>
    <input name=’uri’ type=’hidden’ value='[URL Blog]’/>
    <input name=’loc’ type=’hidden’ value=’en_US’/>
    <input id=’hbzemailbox’ name=’email’ required=” type=’text’ placeholder=’Enter Your Email Here…’/>
    <input id=’hbzemailbutton’ title=” type=’submit’ value=’Subscribe’/>
   </form>
  </div>
 </div>
<table class=’hbzsocial-like’>
  <tbody>
   <tr>
    <td class=’hbzfb-likes’>
     <div id=”fb-root”>
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4”;
  fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
     </script>
     <div class=”fb-like” data-href=”[URL FB]” data-layout=”button_count” data-action=”like” data-show-faces=”false” data-share=”false”>
     </div>
    </td>
    <td class=’hbztw-follow’>
     <a href=”[URL Twitter]” class=”twitter-follow-button” data-show-count=”false” data-show-screen-name=”false” data-dnt=”true”>Follow @[ Username Twitter]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);
     </script>
    </td>
   </tr>
  </tbody>
 </table>
</div>
________________________________

WIDGET 3: Mirip dengan email subscribe WordPress

4 Widget Berlangganan Di Blog Yang Wajib Kamu Pasang Sekarang
<style type=”text/css”>
    .hbzsub {
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        border: 1px dashed #ddd;
    }
    .hbzsube {
        color: rgb(255, 255, 255);
        background-color: rgb(11, 172, 227);
        padding: 10px 0;
        text-align: center;
        font: bold 15px “trebuchet MS”, “Tahoma”;
        width: 100%;
    }
    .hbzemailform {
        width: 235px;
        margin: 10px auto;
    }
    #hbzemailbox {
        background-color: #FFF;
        color: #747474;
        width: 130px;
        border: 1px solid #D8D8D8;
        padding: 7px;
        height: 18px;
        display: inline-block;
        vertical-align: top;
        box-shadow: inset 0px 0px 5px #c2c2c2;
        box-sizing: content-box;
        font-size: 13px;
    }
    #hbzemailbutton {
        background-color: rgb(243, 93, 92);
        border: 1px solid rgb(215, 84, 83);
        color: rgb(255, 255, 255);
        width: 85px;
        font: bold 13px “trebuchet MS”, “Tahoma”;
        padding: 7px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        height: 34px;
    }
    #hbzemailbutton:hover {
        background-color: #E64C4B;
        border: 1px solid #BF4A49;
    }
    .hbzsignup-form {
        margin-top: 15px;
    }
    .hbzsocial-icons {
        overflow: hidden;
        text-align: center;
        display: block;
        margin: 20px auto;
    }
    .hbzsocial-icons ul {
        margin: 0px auto !important;
        text-align: center;
        padding: 0px !important;
        display: inline-block;
    }
    .hbzsocial-icons ul li {
        background: transparent none repeat scroll 0% 0% !important;
        border: medium none !important;
        float: left;
        list-style-type: none !important;
        padding: 0px !important;
        margin: 0px 5px !important;
    }
    .hbzsocial-icons ul li::before,
    .hbzsocial-icons ul li::after {
        display: none !important;
    }
    .hbzsocial-icons ul li a {
        background: url(“http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png”) no-repeat scroll 0 0;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        display: block;
        height: 34px;
        overflow: hidden;
        text-indent: -999px;
        transition: all 0.25s linear 0s;
        width: 34px;
    }
    .hbzsocial-icons ul li a:hover {
        background-color: #aeaeae !important;
    }
    .hbzsocial-icons ul li.social-facebook a {
        background-position: -62px 1px;
        background-color: #3b5998;
    }
    .hbzsocial-icons ul li.social-twitter a {
        background-position: -254px 1px;
        background-color: #00aced;
    }
    .hbzsocial-icons ul li.social-gplus a {
        background-position: -95px 0px;
        background-color: #dd4b39;
    }
    .hbzsocial-icons ul li.social-pinterest a {
        background-position: -159px 1px;
        background-color: #cb2027;
    }
    .hbzsocial-icons ul li.social-rss a {
        background-position: -190px 0px;
        background-color: #F87E12;
    }
</style>
<div class=”hbzsub”>
    <div class=”hbzsube”>Join Our Free Newsletter</div>
    <div class=’hbzsignup-form’>
        <div class=’hbzemailform’>
            <form action=’http://feedburner.google.com/fb/a/mailverify’ id=’subscribe’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[URL Blog]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’> <input name=’uri’ type=’hidden’ value='[URL Blog]’ /> <input name=’loc’ type=’hidden’ value=’en_US’ /> <input id=’hbzemailbox’ name=’email’ required=” type=’text’ placeholder=’Your Email address’ /> <input id=’hbzemailbutton’ title=” type=’submit’ value=’Join Us’ /> </form>
        </div>
        <div class=”hbzsube”>Sociliaze with Us</div>
        <div class=”hbzsocial-icons”>
            <ul>
                <li class=”social-facebook”><a href=”[URL Fb]” target=”_blank” title=”Facebook”>Facebook</a></li>
                <li class=”social-twitter”><a href=”[URL Twitter]” target=”_blank” title=”Twitter”>Twitter</a></li>
                <li class=”social-gplus”><a href=”[URL Google+]” target=”_blank” title=”Google+”>Google+</a></li>
                <li class=”social-pinterest”><a href=”[URL Pinterest]” target=”_blank” title=”Pinterest”>Pinterest</a></li>
                <li class=”social-rss”><a href=”[URL RSS]” target=”_blank” title=”RSS”>RSS</a></li>
            </ul>
        </div>
        <div style=”width: 230px; margin: 0px auto;”>
            <div id=”fb-root”></div>
            <script>
                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s);
                    js.id = id;
                    js.src = “//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6”;
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, ‘script’, ‘facebook-jssdk’));
            </script>
            <div class=”fb-page” data-href=”[URL Fb]” data-width=”230″ data-small-header=”true” data-adapt-container-width=”true” data-hide-cover=”false” data-hide-cover=”true” data-show-facepile=”true”>
                <div class=”fb-xfbml-parse-ignore”>
                    <blockquote cite=”[URL Fb]”><a href=”[URL Fb]”>[Fb Page Name]</a></blockquote>
                </div>
            </div>
        </div>
    </div>
</div>

Silahkan pilih widget mana yang cocok dan sesuai dengan keinginan anda, setelah itu, ikuti langkah-langkah dibawah ini untuk memasangnya di blog.

3 Langkah memasang widget email subscribe di Blog

Untuk memasang widget berlangganan seperti dibawah in berikut langkah-langkahnya. Sebelum memasang, saya perlu ingatkan bahwa widget ini hanya bekerja di Blogger/Blogspot dan tidak di platform lain seperti WordPress atau Wix.

  1. Masuk ke akun blogger andalalu pilih menu Layout> Tambahkan Gadget dibagian sebelah kiri4 Widget Berlangganan Di Blog Yang Wajib Kamu Pasang Sekarang
  2. Setelah itu pilih HTML/JavaScript pada jendela Pop Up yang muncul apabila anda sudah menekan pilihan tambahkan gadget
  3. Jika sudah, silahkan tempel kode widget langganan yang sudah anda pilih diatas pada kotak kosong yang tersedia didalamnya

Untuk lebih jelasnya tentang cara pemasangan widget di Blogger silahkan baca artikel saya yang satu ini. Lantas bagaimana melakukan konfigurasi? Tenang dulu, ikuti panduan di bawah ini. Panduan ini harus sesuai untuk hasil yang maksimal. Oke langsung saja!

Cara konfigurasi widget email subscribe

Untuk melakukan konfigurasi pada widget berlangganan ikut langkah-langkah konfigurasi dibawah ini:

  1. Ganti [URL Blog Uri] dengan URL log anda yang pada dasarnya adalah judul Feed anda. Untuk ini, anda bisa memperolehnya dengan mengunjungi Feed Burner atau klik tautan ini (http://feedburner.google.com). Kemudian arahkan ke Publikasi> langganan email dan temukan nilai Uri anda di kotak tersebut. Sebagai contoh, ini kode Uri wekerindo.com http://feedburner.google.com/fb/a/mailverify?uri= wekerindo.com dan <input name = ‘uri’ type = ‘hidden’ value = ‘ wekerindo.com‘/>
  2. Ganti [URL FB] dengan URL halaman facebook anda. Sebagai contoh https://www.facebook.com/wekerindo
  3. Ganti [URL Twitter] dengan URL halaman twitter anda. Sebagai contoh : http://www.twitter.com/wekerindo
  4. Ganti [URL Google+] dengan laman google+ atau URL akun Google+ anda. Sebagai contoh: https://plus.google.com/101438893480071463583
  5. Ganti [URL RSS] dengan URL RSS anda. Sebagai contoh : http://feeds.feedburner.com/wekerindo
  6. Ganti [URL Pinterest] dengan URL pinterest Anda.
  7. Ganti [Nama Pengguna Twitter] dengan nama pengguna akun twitter anda. Sebagai contoh : @wekerindo
  8. Ganti [Nama Halaman Fb] dengan Nama Halaman Facebook anda. Sebagai contoh : Wekerindo Catatan : Lebar bilah sisi maksimum yang diperlukan adalah -230px
  9. Tekan Save lalu tes apakah muncul di halaman blog atau tidak. Jika tidak muncul mungkin template yang anda gunakan tidak support karena widget diatas sudah saya coba pada beberapa blog yang saya gunakan.

Penutup

Seperti yang sudah disebutkan diatas, widget email subscribe bisa mendatangkan pembaca yang loyal. Pembaca tersebut juga tidak perlu masuk ke blog untuk membaca artikel-artikel anda.

Sebab, mereka bisa membacanya langsung dari email. Nah demikian artikel tentang 4 Widget Email subscribe terbaik untuk blog. Semoga artikel ini bermanfaat~

You might like

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *