Selasa, 15 Juli 2014

Memasang Widget Email Subscriber Artikel di Blog

Sebelum kita Memasang Widget Email Subscriber Artikel di Blog, alangkah baiknya kalau kita mengetahui dulu Apa itu subscriber, Subscriber merupakan sebuah istilah yang digunakan untuk merujuk kepada orang yang memiliki kepentingan untuk menerima atau mendapatkan informasi tertentu dengan keinginan mereka. Dengan kata lain, Subscriber adalah pelanggan kontent ter tertentu dalam sebuah web atau blog

Memasang Widget Email Subscriber Artikel di Blog

Melakukan subscribe pada suatu web atau blog berarti mengikuti setiap update terhadap berita atau info terbaru dari web atau blog tersebut. Untuk melakukan subscribe digunakan sebuah email dan melalui email inilah semua update artikel web tersebut langsung terkirim kedalam email kita. jadi, setiap ada artikel baru update dari blog tersebut, maka postingannya akan segera masuk ke email kita tanpa repot harus sering ke website kesukaan kita untuk melihat postingan terbarunya

Baca juga Cara membuat email di Google

Dalam melakukan subscribe, sebenarnya kita tidak hanya melakukannya pada artikel saja, tapi juga bisa dilakukan untuk mendapatkan info komentar dari setiap konten yang kita ikuti. Misalnya di Facebook
Atau mendapatkan pemberitahaun akan sebuah penawaran produk atau jasa secara online melalui email, dan dalam hal ini disebut sebagai Subscriber Autoresponder

Baca juga tentang Memasang Autoresponder di Blogger

Cara Memasang Widget Email Subscriber Artikel di Blog
Sebelum memasang widget email subscriber ini, alangkah baiknya jika Anda mencoba demonya terlebih dahulu, apakah demo dibawah ini bekerja atau tidak, silahkan masukkan email Anda..




Jika demo diatas bekerja, silahkan gunakan kode CSS berikut ini
  • Masuk kedalam akun blogger Anda
  • Pilih blog yang akan dipasang widget email subscriber ini
  • Pilih menu Template >> Edit HTML
  • Cari kode template ]]></b:skin> dan salin kode berikut sebelum ]]></b:skin>
    .subscribe {
      margin: 5px auto;
      padding: 20px;
      width: 300px;
      background: #f9760b;
      border-radius: 5px;
      -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    .subscribe-col {
      padding-left: 120px;
      background: url("http://4.bp.blogspot.com/-ARrdUYNkX-o/U8TA5CsjCyI/AAAAAAAAFFg/9NaMXzf8H4c/s1600/email-subscriber.png") 5px center no-repeat;
    }
    .subscribe-col > h3 {
      margin: 0 0 12px;
      font-size: 14px;
      font-weight: bold;
      color: #222;
      text-transform: uppercase;
    }
    .subscribe-col > p {
      line-height: 22px;
      color: #484848;
    }
    .subscribe-form {
      position: relative;
      margin: 20px -20px -20px;
      padding: 15px;
      background: #fda352;
      border-top: 1px solid #ccc;
      border-radius: 0 0 6px 6px;
      background-image: -webkit-linear-gradient(top, #fda352, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
      background-image: -moz-linear-gradient(top, #fda352, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
      background-image: -o-linear-gradient(top, #fda352a, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
      background-image: linear-gradient(to bottom, #fda352, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
      -webkit-box-shadow: inset 0 1px #fae2cd;
      box-shadow: inset 0 1px #fae2cd;
    }
    .subscribe-input {
      padding: 0 15px;
      width: 90%;
      height: 35px;
      font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
      font-size: 15px;
      color: #444;
      background: #fefefe;
      background-clip: padding-box;
      border: 1px solid;
      border-color: #999 #aaa #aaa;
      border-radius: 20px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px #f8f8f8;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px #f8f8f8;
    }
    .subscribe-input:focus {
      outline: 0;
    }
    .subscribe-submit {
      display: block;
      position: absolute;
      top: 15px;
      right: 15px;
      padding-left: 15px;
      height: 35px;
      width: 60px;
      background: #60e160;
      border: 1px solid;
      border-color: #4c9d50 #4c9d50 #4c9d50 #55af5a;
      border-radius: 0 20px 20px 0;
      cursor: pointer;
      font: 0/0 serif;
      text-shadow: none;
      color: transparent;
      background-image: -webkit-linear-gradient(top, #84f087, #4cd94a);
      background-image: -moz-linear-gradient(top, #84f087, #4cd94a);
      background-image: -o-linear-gradient(top, #84f087, #4cd94a);
      background-image: linear-gradient(to bottom, #84f087, #4cd94a);
      -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
    }
    .subscribe-submit:active {
      background: #4cdf4d;
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    }
    .subscribe-submit:before {
      content: '';
      display: block;
      margin-top: 1px;
      width: 25px;
      height: 19px;
      background: url("http://3.bp.blogspot.com/-3Q7TsGHauzQ/U8OafCqZ9eI/AAAAAAAAFFI/PVW_G_cfuQI/s1600/tick.png");
    }
    .lt-ie9 .subscribe-input {
      line-height: 33px;
    }

Masukkan kode HTML berikut ini kedalam widget blog,
<div class="subscribe">
<div class="subscribe-col">
<h3>GRATIS update artikel via Email</h3>
<p>Dapatkan kiriman artikel terbaru langsung ke email anda!<p>
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PanduanTemplateBlogku', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="subscribe-form">
<input type="email" name="email" class="subscribe-input" placeholder="Email address" autofocus><input type="hidden" value="PanduanTemplateBlogku" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<button type="submit" class="subscribe-submit">Subscribe</button>
</form>
</div>
Catatan:
  • Ganti link http://feedburner.google.com/fb/a/mailverify?uri=PanduanTemplateBlogku dengan link feed blog Anda yang ada di email feedburner
  • Ganti value="PanduanTemplateBlogku" dengan value Anda di email feedburner
Untuk menampilkan email feed verifikasi di feedburner, silahkan baca di Cara membuat email verifikasi di feedburner

Semoga bermanfaat, terimakasih telah membaca artikel memasang widget email subscriber artikel di blog. Jika ada pertanyaan silahkan tinggalkan komentar Anda

Memasang Widget Email Subscriber Artikel di Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

9 komentar:

  1. Terima kasih nih ka atas tutornya..hee

    BalasHapus
    Balasan
    1. sama-sama mas Icah, terimakasih atas komentar dan kunjungannya..

      Hapus
  2. di template blog saya kebetulan sudah ada email subcrib mbak, tapi sekarang sudah tahu cara memasangnya

    BalasHapus
    Balasan
    1. iya Kang, kalau ingin diganti bisa menggunakan yang ada diartikel ini :)

      Hapus
  3. Saya blm berniat untuk pasang widget ini, saya simpen dulu ya mbak.

    BalasHapus
    Balasan
    1. silahkan mas Abdurrahman, semoga bermanfaat

      Hapus
  4. wah bagus mbak, tapi kok scripnya banyak banget, apa nanti berefek pada turunya kecepatan blog?

    BalasHapus
    Balasan
    1. blog ini sudah terlalu banyak kode mas dan sejauh ini tidak ada penurunan loading blog

      Hapus
  5. widget yang satu ini memang cukup penting

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia