Cara Membuat Widget Berlangganan Artikel atau Ikuti Lewat Email seperti Blog Igniel

Daftar isi [Tampil]
Serieswans.com - Fitur Subscriber box atau yang biasa di bilang widget berlangganan artikel ini mungkin tidak asing lagi di kalangan blogger. pasalnya dari setiap saya berkunjung ke suatu situs website ataupun blog, pasti ada widget tersebut. dan saya rasa widget ikuti lewat email atau subsriber box ini sudah wajib ada pada blog anda.

Karena sangat berguna untuk pengunjung blog anda yang ingin berlangganan dan ingin mendapatkan update artikel tarbaru dari blog anda. dengan begitu semakin banyak juga yang berlangganan artikel pada blog anda, besar kemungkinan traffic blog akan terus meningkat.
Cara Membuat Widget Berlangganan Artikel atau Ikuti Lewat Email seperti Blog Igniel
Widget Subcriber Box ala Igniel

Untuk tampilan Widget Subscriber Box ini juga sangat banyak,contohnya subsriber box seperti template viomagz. tapi kali ini saya akan memberikan widget subsriber box dengan desain yang keren dan model widget ini sama dengan blog mba igniel.

Oke kita langsung saja ke tutorialnya. silahkan anda perhatikan dan simak baik-baik langkah-langkahnya.

Cara Membuat Widget Subscriber Box Seperti Blog Igniel


  • Login terlebih dahulu ke akun Blogger.
  • Masuk ke menu Dashboard => pilih Tema => lalu klik Edit HTML
  • Kemudian cari kode ]]></b:skin> , Tekan tombol CTRL + F untuk memudahkan pencarian kodenya
  • Jika sudah ketemu, silahkan copy script di bawah ini dan letakan tepat di atas kode ]]></b:skin>
  • 
    /* Subscribe Box by igniel.com */
    #ignielSubscribe{width:100%;height:auto;background-color:#eee;border:1px solid #ddd;border-radius:7.5px;display:block;margin:auto;line-height:40px;padding:0}#ignielSubscribe .email__{padding:15px 15px 5px}#ignielSubscribe .email{margin:auto;color:#555;text-align:center}#ignielSubscribe .email:before{content:'';width:50px;height:50px;display:block;text-align:center;margin:auto;border-radius:100px;transition:all .3s ease;-webkit-animation:ignielRing 5s 0s ease-in-out infinite;-webkit-transform-origin:50% 4px;-moz-animation:ignielRing 5s 0s ease-in-out infinite;-moz-transform-origin:50% 4px;animation:ignielRing 5s 0s ease-in-out infinite;transform-origin:50% 4px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%230575E6'/%3E%3C/svg%3E") center center / 50px no-repeat}#ignielSubscribe .medsos__{padding:15px 0;line-height:0;border-top:1px solid #ccc}#ignielSubscribe form{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;margin:0 0 15px;padding:0;position:relative}#ignielSubscribe form:before{left:15px;position:absolute;display:block;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat;content:''}#ignielSubscribe input{width:calc(100% - 35px);background-color:#ccc;line-height:1.5em;border:1px solid #ccc;border-right:0;padding:8px 10px 8px 40px;font-size:12px;text-align:left!important;border-radius:50px 0 0 50px;outline:none;outline-width:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#ignielSubscribe button{background-color:#0575E6;width:40px;min-width:40px;height:36px;margin:0;padding:0;border:0;box-shadow:none;vertical-align:top;cursor:pointer;transition:all .3s ease;background-image:unset;border-radius:0 50px 50px 0}#ignielSubscribe button:hover,#ignielSubscribe button:focus{background-color:#1d2129}#ignielSubscribe button:before{display:inline-block;width:20px;height:20px;margin:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat;content:'';vertical-align:-3px}#ignielSubscribe .medsos{width:100%;text-align:center}#ignielSubscribe .medsos svg{width:20px;height:20px;margin-top:7px}#ignielSubscribe .medsos svg path{fill:#fff}#ignielSubscribe .medsos a{display:inline-block;margin-right:7px;width:35px;height:35px;box-shadow:0 7px 15px 0 rgba(0,0,0,.4);transition:all ease-in-out 300ms;border-radius:100px}#ignielSubscribe .medsos a:last-child{margin-right:0}#ignielSubscribe .medsos a:hover{box-shadow:0 23px 15px -3px rgba(0,0,0,.25);transform:translate(0,-10px) scale(1.05)}#ignielSubscribe .medsos .facebook{background:#3a579a}#ignielSubscribe .medsos .twitter{background:#00abf0}#ignielSubscribe .medsos .googleplus{background:#df4a32}#ignielSubscribe .medsos .youtube{background:#cc181e}#ignielSubscribe .medsos .instagram{background:#992ebc}#ignielSubscribe .medsos .pinterest{background:#e60023}@-webkit-keyframes ignielRing{0%{-webkit-transform:rotateZ(0)}1%{-webkit-transform:rotateZ(30deg)}3%{-webkit-transform:rotateZ(-28deg)}5%{-webkit-transform:rotateZ(34deg)}7%{-webkit-transform:rotateZ(-32deg)}9%{-webkit-transform:rotateZ(30deg)}11%{-webkit-transform:rotateZ(-28deg)}13%{-webkit-transform:rotateZ(26deg)}15%{-webkit-transform:rotateZ(-24deg)}17%{-webkit-transform:rotateZ(22deg)}19%{-webkit-transform:rotateZ(-20deg)}21%{-webkit-transform:rotateZ(18deg)}23%{-webkit-transform:rotateZ(-16deg)}25%{-webkit-transform:rotateZ(14deg)}27%{-webkit-transform:rotateZ(-12deg)}29%{-webkit-transform:rotateZ(10deg)}31%{-webkit-transform:rotateZ(-8deg)}33%{-webkit-transform:rotateZ(6deg)}35%{-webkit-transform:rotateZ(-4deg)}37%{-webkit-transform:rotateZ(2deg)}39%{-webkit-transform:rotateZ(-1deg)}41%{-webkit-transform:rotateZ(1deg)}43%{-webkit-transform:rotateZ(0)}100%{-webkit-transform:rotateZ(0)}}@-moz-keyframes ignielRing{0%{-moz-transform:rotate(0)}1%{-moz-transform:rotate(30deg)}3%{-moz-transform:rotate(-28deg)}5%{-moz-transform:rotate(34deg)}7%{-moz-transform:rotate(-32deg)}9%{-moz-transform:rotate(30deg)}11%{-moz-transform:rotate(-28deg)}13%{-moz-transform:rotate(26deg)}15%{-moz-transform:rotate(-24deg)}17%{-moz-transform:rotate(22deg)}19%{-moz-transform:rotate(-20deg)}21%{-moz-transform:rotate(18deg)}23%{-moz-transform:rotate(-16deg)}25%{-moz-transform:rotate(14deg)}27%{-moz-transform:rotate(-12deg)}29%{-moz-transform:rotate(10deg)}31%{-moz-transform:rotate(-8deg)}33%{-moz-transform:rotate(6deg)}35%{-moz-transform:rotate(-4deg)}37%{-moz-transform:rotate(2deg)}39%{-moz-transform:rotate(-1deg)}41%{-moz-transform:rotate(1deg)}43%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(0)}}@keyframes ignielRing{0%{transform:rotate(0)}1%{transform:rotate(30deg)}3%{transform:rotate(-28deg)}5%{transform:rotate(34deg)}7%{transform:rotate(-32deg)}9%{transform:rotate(30deg)}11%{transform:rotate(-28deg)}13%{transform:rotate(26deg)}15%{transform:rotate(-24deg)}17%{transform:rotate(22deg)}19%{transform:rotate(-20deg)}21%{transform:rotate(18deg)}23%{transform:rotate(-16deg)}25%{transform:rotate(14deg)}27%{transform:rotate(-12deg)}29%{transform:rotate(10deg)}31%{transform:rotate(-8deg)}33%{transform:rotate(6deg)}35%{transform:rotate(-4deg)}37%{transform:rotate(2deg)}39%{transform:rotate(-1deg)}41%{transform:rotate(1deg)}43%{transform:rotate(0)}100%{transform:rotate(0)}}
    

  • Setelah itu simpan Tema
  • Selanjutnya masuk ke menu Tata Letak => pilih tempat widget tersebut, misalkan pada Sidebar.
  • Tambahkan Gadget HTML/JAVASCRIPT dan letakan kode di bawah ini di dalamnya.


<div id="ignielSubscribe">
  <div class="email__">
    <div class="email">
      Dapatkan artikel terbaru setiap hari
      <form action="https://feedburner.google.com/fb/a/mailverify?uri=igniel" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=igniel', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
        <input name="email" class="email" placeholder="Contoh: nama@mail.com"/>
        <input name="uri" type="hidden" value="igniel" /> <input name="loc" type="hidden" value="en_US" />
        <button type="submit"></button>
      </form>
    </div>
  </div>
  <div class="medsos__">
    <div class="medsos">
      <a class="facebook" title="Facebook" href="https://www.facebook.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>
      <a class="twitter" title="Twitter" href="https://twitter.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>
      <a class="youtube" title="Youtube" href="https://www.youtube.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>
      <a class="instagram" title="Instagram" href="https://www.instagram.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
   <a class="pinterest" title="Pinterest" href="https://pinterest/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path></svg></a>
    </div>
  </div>
</div>

  • Ada hal yang harus anda perhatikan sebelum menyimpannya. silahkan ikuti di bawah ini.


Perhatikan kode berikut

  1. ID_FEEDBURNER_BLOG  = Silahkan ganti dengan ID Feed Burner blog anda
  2. MASUKAN_ID_FACEBOOK = Ganti degan ID Facebook anda
  3. MASUKAN_USERNAME_TWITER = Ganti dengan ID Usernam Twitter anda
  4. MASUKAN_ID_CHANNEL_YOUTUBE = Ganti dengan ID Channel Youtube anda
  5. MASUKAN_USERNAME_INSTAGRAM = Ganti dengan Username Instagram anda

Nah, bagi anda yang tidak tahu dimana mengambil kode tersebut, silahkan anda bisa  mengunjungi tutorial berikut, cara daftar dan mengetahui ID feedburner blog, cara mengetahui ID Facebook.

Untuk warna lainnya silahkan anda bisa kreasikan sendiri ya. memang sedikit rumit bagi pemula, tapi apa salahnya untuk mencoba. mungkin itu saja pembahasan tutorial mengenai Cara Membuat Widget Berlangganan Artikel atau Ikuti Lewat Email seperti Blog Igniel. jika anda memiliki pertanyaan terkait postingan di atas, silahkan tanyak lewat kolom komentar di bawah. semoga bermanfaat.

Source code : https://www.igniel.com/2019/09/kotak-subscribe-email.html

Show comments
Hide comments

12 Komentar untuk "Cara Membuat Widget Berlangganan Artikel atau Ikuti Lewat Email seperti Blog Igniel"

  1. bermanfaat banget nih gan buat cari visitor tetap

    BalasHapus
    Balasan
    1. Betul gan, sangat berguna sekali widget ini buat nyari visitor tetap

      Hapus
  2. Inih bermanfaat untuk pemula gan, thanks

    BalasHapus
    Balasan
    1. Sama-sama gan, terima kasih sudah berkunjung :)

      Hapus
  3. Dapat juga cara ny biar visitor bisa terima update artikel web.. mantap

    Salam dr InfoGaes.Com

    BalasHapus
    Balasan
    1. Hehe siap gan , terima kasih sudah berkunjung :)

      Hapus
  4. matap artikelnya, kebetulan saya lagi ingin pasang lonceng subscriber, sangat terbantu atas tulisannya.

    BalasHapus
    Balasan
    1. Terima kasih gan, terima kasih sudah berkunjung :)

      Hapus
  5. Demonya kaya punya mba igniel warna hijau atau biru mas loncengnya?

    BalasHapus
    Balasan
    1. saya ganti mas jadi warna biru, silahkan kalo mau ubah warnanya

      Hapus
    2. Ternyata warna lonceng nya bisa diganti. Terima kasih

      Hapus
  6. Keren mas saya juga pasang widget ini

    BalasHapus
Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2019 - 2020 Serieswans - All Rights Reserved Created With