Kotak Berlangganan (Subscribe via Email) dan Tombol Media Sosial ala Igniel

Cara membuat dan memasang widget box subscribe blog via email FeedBurner dan tombol media sosial di blog dengan efek animasi menggunakan CSS3 seperti milik Igniel.
Widget Subscribe Blog Melalui Email

Awalnya saya membuat widget subscribe box via email ini khusus untuk template premium Igniplex. Tampilannya sederhana tapi tidak monoton. Disana disertakan ikon lonceng lengkap dengan efek gerakan seperti saat lonceng berdering. Akhirnya blog igniel.com sendiri ikut memakai widget tersebut. Namun saya menambahkan variasi berupa tombol media sosial. Jadi efisien, kan, kotak subscribe dan tombol medsos menyatu dalam tempat yang sama.

Tak lama setelah dipasang, ternyata ada beberapa blog yang ikut memasangnya juga. Sangat persis dengan versi saya karena mengambil langsung dari source code blog ini. Jadi daripada nanggung, yasudah deh saya bagikan saja sekalian tutorialnya.

Sebelum lanjut, kamu harus membuat akun di FeedBurner terlebih dahulu. Alamatnya ada di bawah ini:

https://feedburner.google.com

Kalau masih bingung cara membuat dan mengaktifkan fitur subscribe, silakan baca panduannya di artikel Cara Mengaktifkan Subscribe via Email di FeedBurner.


Cara Membuat Widget Box Berlangganan Melalui Email

Setelah memiliki akun FeedBurner dan mengaktifkan email subscriptions, kita tinggal memasang kode CSS dan HTML saja ke dalam pengaturan blog.

Pertama-tama simpan kode CSS ini DI ATAS </style> atau ]]></b:skin>.

/* Subscribe Box by igniel.com */
#ignielSubscribe {width:300px; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}
#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='%23008c5f'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#ignielSubscribe .medsos__ {padding:15px 0px; line-height:0px; 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:0px 0px 15px; padding:0px; 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:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}
#ignielSubscribe button {background-color:#008c5f; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}
#ignielSubscribe button:hover, #ignielSubscribe button:focus {background-color:var(--color-hover);}
#ignielSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; 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: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;}
#ignielSubscribe .medsos a:last-child {margin-right:0px;}
#ignielSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -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); }
}

Yang ditandai width:300px adalah lebar dari kotak subscribe. Jika ingin lebarnya otomatis mengikuti lahan yang tersedia, ganti menjadi width:100%.

Jangan lupa simpan pengaturannya. Setelah itu simpan kode HTML ini dimanapun kamu menginginkan kotak berlangganan muncul. Disini saya contohkan untuk memasang di sidebar. Masuk ke Layout (Tata Letak) lalu klik Add a Gadget (Tambahkan Gadget) yang berada di area sidebar dan pilih HTML/Javascript.

<!-- Subscribe Box by igniel.com -->
<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>

- Ganti yang ditandai igniel (ada 3 buah) dengan username FeedBurner masing-masing.
- Sementara tanda xxxx adalah username atau ID dari setiap media sosial. Ganti dengan milik kamu sendiri.

Subscribe box di atas menggunakan ikon SVG sehingga tidak memberatkan blog sama sekali karena tidak perlu memuat script atau library external apapun. Jika ingin mengganti ikon lonceng atau ikon media sosial, silakan baca dulu artikel Cara Memasang ikon SVG.

55 komentar
Kotak Berlangganan (Subscribe via Email) dan Tombol Media Sosial ala Igniel
Kotak Berlangganan (Subscribe via Email) dan Tombol Media Sosial ala Igniel
Cara membuat dan memasang widget box subscribe blog via email FeedBurner dan tombol media sosial di blog dengan efek animasi menggunakan CSS3 seperti milik Igniel.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

55 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Admin
    21 September, 2023
    Profil: https://draft.blogger.com/profile/17761002103438422089
    sudah tidak bisa lgi kah? pas di klik muncul error
  • Admin
    09 Juli, 2023
    Profil: https://draft.blogger.com/profile/10859236686956593804
    Saya memakai template textrim, cara hapus langanan melalui emailnya gmna kak ? Saya mau ganti sama yg lonceng juga....
  • Putra
    12 Mei, 2023
    Profil: https://draft.blogger.com/profile/00543107601964082287
    bermanfaat .. mksh igniel,com
  • Budimasjid
    27 November, 2022
    Profil: https://draft.blogger.com/profile/02218995033422304532
    mohon kk, kode yang barunya, krn baru baru ini feedburner ada update versi terbarunya, script dari kaka gk jalan di blog sy
  • Budimasjid
    26 November, 2022
    Profil: https://draft.blogger.com/profile/02218995033422304532
    Komentar ini telah dihapus oleh Budimasjid selaku penulis.
  • Mahmud Abbas
    12 November, 2022
    Profil: https://draft.blogger.com/profile/10303247715790215854
    Mbak tolong dong bikinkan tutorial cara daftar Google feedburner🙏 saya bingung cara buatnya
    • Blog Mbah Brow
      13 November, 2022
      Profil: https://draft.blogger.com/profile/14483198321353556534
      Bukannya feedburner sudah di shutdown sama Google ?
  • Blog Mbah Brow
    04 September, 2022
    Profil: https://draft.blogger.com/profile/14483198321353556534
    Menyesal baru tahu igniel.com September 2022 ini :( banyak tutorial blogging bermanfaat ternyata
  • Asep Rohimat
    16 April, 2022
    Profil: https://draft.blogger.com/profile/13503791911000091655
    Allhamdulillah bermanfaat buatku
  • idaylummm
    01 April, 2022
    Profil: https://draft.blogger.com/profile/04412310747139580963
    Ma acih kak...
    sukses selalu ya
  • M.Nurkholis
    20 Februari, 2022
    Profil: https://draft.blogger.com/profile/14710897115802973322
    Trimakasih kak igniel...Sudah sy terapkan di blog sy.keren
  • Admin@technologydevelopment.info
    03 Agustus, 2021
    Profil: https://draft.blogger.com/profile/03854716840156980498
    Hallo mbak Igniel, saya mau nanya..
    Gimna caranya biar layanan fedburner untuk langganan lewat email aktif, karena sekarang fedburner sudah menonaktikan layanan itu. Tapi saya lihat punya mbak Igniel masih aktif layanan itu..?
  • M Syakir Al-Farisy
    28 April, 2021
    Profil: https://draft.blogger.com/profile/01501818016196141547
    Mba cara buat tombol demo gimana ya?
  • Andplus5
    07 April, 2021
    Profil: https://draft.blogger.com/profile/16952649841910869413
    Kak biar tombol sub nya tampil di versi mobile gimana ya , tampil cuma di versi dekstop aja
  • ABS
    28 Maret, 2021
    Profil: https://draft.blogger.com/profile/04216826515240833623
    Bang Cara Ngubah Warna Latar Belakang Bagaimana Ya
  • Djefi Febian
    14 Februari, 2021
    Profil: https://draft.blogger.com/profile/01677557629330387247
    kotaknya jadi memanjang ke bawah, mohon solusinya.
  • Dea Maulana
    13 Februari, 2021
    Profil: https://draft.blogger.com/profile/04968782008210554170
    Nice share kak, Kunjungan perdana kesini. Mantap betul tampilan webnya, Simple dan elegan. Dan yang paling bikin saya tertarik dengan web ini tuhh ada 2 Mode terang dan gelap. Jika berkenan bisa dibantu blog saya pasang mode itu. hehe..
  • ury amuta
    20 Januari, 2021
    Profil: https://draft.blogger.com/profile/13640482720892605494
    Mbak Igniel, bisa dipasang tapi setelah nyoba masukin email yg keluar "The feed does not have subscription by email enabled" bisa dibantu mbak aku salah dimana
    • Igniel
      20 Januari, 2021
      Profil: https://draft.blogger.com/profile/09199170379661896200
      Aktifkan dulu fitur email subscribe-nya.
      Silakan baca di sini.
      https://www.igniel.com/2020/01/subscribe-via-email-feedburner.html
  • Ateh Christian
    16 September, 2020
    Profil: https://draft.blogger.com/profile/08763990538776959658
    Thank you so much princess. It worked perfectly well for me.
    👉 https://proboosta.com
  • Rizki M Farhan
    09 Agustus, 2020
    Profil: https://draft.blogger.com/profile/00143484218088124165
    Kak cara buat popup di subscribe, gimana ya ?
  • Berbagilmu
    19 Juli, 2020
    Profil: https://draft.blogger.com/profile/00449628215718477315
    Mbak niel kok gk bisa ya ..pdahal udah sesuai ptunjuk

    Tag nya ada 3 dcoba smua ttep g bsa
  • Antapedia
    18 Juli, 2020
    Profil: https://draft.blogger.com/profile/07979833797958631524
    Terimakasih mas igniel, saya juga memasangkan di blog saya.
  • Saifullah.id
    19 Juni, 2020
    Profil: https://draft.blogger.com/profile/01297676871626205778
    Mbak bagaimana cara supaya kotak berlangganan ini baru akan muncul kalau kita mengklik sebuah tombol? Jadi saya pengen kotak ini tidak muncul di widget, munculnya itu kayak popup gitu setelah di klik sebuah tombol.
  • Admin
    12 Juni, 2020
    Profil: https://draft.blogger.com/profile/03364489090455309442
    mantap tempalte
  • Wahyu
    12 Mei, 2020
    Profil: https://draft.blogger.com/profile/07549721068019101051
    Thanks, Mba.

    Kotak berlangganannnya keren.
  • Minuki
    20 Maret, 2020
    Profil: https://draft.blogger.com/profile/17216426145973668268
    Saya juga pasang widget subsribe Email ini keren
  • Saif Ghofur
    11 Maret, 2020
    Profil: https://draft.blogger.com/profile/04924137136364466463
    Kalo membuat kotak berlangganan yg popup seperti di blog igniel gimana mbk. Yg ketika di klik subscribe muncul. Thx
  • Egbujor Victor Chinedu
    27 Januari, 2020
    Profil: https://draft.blogger.com/profile/10394649788848833852
    SVG Icon for Whatsapp and Telegram.. Please
  • ZEMREUS
    17 Januari, 2020
    Profil: https://draft.blogger.com/profile/09498346686861292087
    Makasih min sangat membantu,tetapi cara mengganti warna lonceng dll yang berwarna hijau itu gimana ya??
  • Droidide
    22 November, 2019
    Profil: https://draft.blogger.com/profile/14943304334673207353
    Kak kalau saya hanya menginginkan kotak subscribe nya tanpa medsosnya gimana ??
    • Igniel
      09 Januari, 2020
      Profil: https://draft.blogger.com/profile/09199170379661896200
      Hapus kode HTML medsosnya.
      <div class="medsos__">
      ...
      ...
      ...
      </div>
  • MIMRAN
    11 November, 2019
    Profil: https://draft.blogger.com/profile/01385098029999375541
    Not Working on to my website
  • Admin
    22 Oktober, 2019
    Profil: https://draft.blogger.com/profile/10267433720308898206
    Mbak cara mengganti gambar loncengnya berwarna biru gimana? terimakasih
    • Igniel
      08 November, 2019
      Profil: https://draft.blogger.com/profile/09199170379661896200
      Lihat jawaban yang ini ya.
      https://www.igniel.com/2019/09/kotak-subscribe-email.html?showComment=1573207474184#c5448674497710320149
  • Admin
    20 Oktober, 2019
    Profil: https://draft.blogger.com/profile/13572341428882876996
    Cara menambahkan icon whatsapp bagaimana mbak?
  • PCNU LANDAK
    18 Oktober, 2019
    Profil: https://draft.blogger.com/profile/08754639297409746138
    Terimakasih sudah berbagi,, sukses selalu igniel
  • Bagitutor.com
    05 Oktober, 2019
    Profil: https://draft.blogger.com/profile/04496833524580099542
    mantap mbak tutorialnya
  • M. Limon
    02 Oktober, 2019
    Profil: https://draft.blogger.com/profile/07103600535159878470
    how to change the colour of the bell?
    • blogger
      29 Oktober, 2019
      Profil: https://draft.blogger.com/profile/00089657311203557612
      i need to know too, so that i can change the color
    • Igniel
      08 November, 2019
      Profil: https://draft.blogger.com/profile/09199170379661896200
      See this code:
      fill='%23008c5f'

      Change 008c5f with color code. Example, if you want red, it will be like this:
      fill='%23ff0000'
    • M. Limon
      18 November, 2019
      Profil: https://draft.blogger.com/profile/07103600535159878470
      Thanks
  • Admin
    24 September, 2019
    Profil: https://draft.blogger.com/profile/15566479072652491848
    mba iqniel, kok di template brosense mas sugeng g work yah ??
    • Admin
      24 September, 2019
      Profil: https://draft.blogger.com/profile/15566479072652491848
      berhasil mba, tp cara mengganti icon social medianya gmn yah ??
      soalnya saya mau pasang linkedin mba, mohon bantuannya,,
      disini gda mba https://materialdesignicons.com
    • Igniel
      24 September, 2019
      Profil: https://draft.blogger.com/profile/09199170379661896200
      Ikon SVG Linkedin:
      <svg viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg>
    • Admin
      25 September, 2019
      Profil: https://draft.blogger.com/profile/15566479072652491848
      thx responnya mba Igniel, sdh saya coba tapi warna nya putih mba,,
    • Igniel
      25 September, 2019
      Profil: https://draft.blogger.com/profile/09199170379661896200
      Ganti aja warnanya. Ikuti tutorial soal ikon SVG.
  • Wira Saksana
    21 September, 2019
    Profil: https://draft.blogger.com/profile/01059141591866077397
    Mbak igniel..Gimana cara mengubah warna dasar dari kotak subscribe itu menjadi warna putih? soalnya hasil warnanya agak gelap?
    • Igniel
      24 September, 2019
      Profil: https://draft.blogger.com/profile/09199170379661896200
      Ganti di background-color:#eee
    • My Admin
      02 Oktober, 2021
      Profil: https://draft.blogger.com/profile/15968757347474587276
      Mbak Igniel kalau ingin buat tombol subscribe nya di main menu bisa ga? jadi bukan di sidebar
  • defantri.com
    20 September, 2019
    Profil: https://draft.blogger.com/profile/07126573827912835475
    terimakasih mbak niel, sukses praktek...
  • Over Brain
    19 September, 2019
    Profil: https://draft.blogger.com/profile/01075736290530426101
    hai mbak igniel, boleh dong kalau berkenan buat tutorial tentang tombole share yg sperti di post ini :D
    Terimakasih mba