Cara Membuat Widget Berlangganan Via Email seperti Blog Igniel

By Kurniawan Updated: 2020-09-20T10:40:33Z 12 ·

Daftar Isi [Tampilkan]

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.

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

SHARE Facebook Whatsapp