Kotak Berlangganan (Subscribe via Email) dan Tombol Media Sosial ala 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.

Baca Juga: Kotak Donasi PayPal di Bawah Artikel ala Igniel

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: [email protected]"/>
        <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.

Artikel Terkait

46 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • 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>
  • Asep Rohimat
    16/4/22
    Profil: https://www.blogger.com/profile/13503791911000091655
    Allhamdulillah bermanfaat buatku
  • idaylummm
    1/4/22
    Profil: https://www.blogger.com/profile/04412310747139580963
    Ma acih kak...
    sukses selalu ya
  • M.Nurkholis
    20/2/22
    Profil: https://www.blogger.com/profile/14710897115802973322
    Trimakasih kak igniel...Sudah sy terapkan di blog sy.keren
  • MasakanBoenda (Dini)
    3/8/21
    Profil: https://www.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/4/21
    Profil: https://www.blogger.com/profile/01501818016196141547
    Mba cara buat tombol demo gimana ya?
  • Andplus5
    7/4/21
    Profil: https://www.blogger.com/profile/16952649841910869413
    Kak biar tombol sub nya tampil di versi mobile gimana ya , tampil cuma di versi dekstop aja
  • Asura
    28/3/21
    Profil: https://www.blogger.com/profile/04216826515240833623
    Bang Cara Ngubah Warna Latar Belakang Bagaimana Ya
  • Toko Buku Bekas Aksiku
    14/2/21
    Profil: https://www.blogger.com/profile/01677557629330387247
    kotaknya jadi memanjang ke bawah, mohon solusinya.
    • PAUD PEMBELAJAR
      12/8/21
      Profil: https://www.blogger.com/profile/11602793201057292833
      Edit CSS nya dulu
  • Dea Maulana
    13/2/21
    Profil: https://www.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/1/21
    Profil: https://www.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/1/21
      Profil: https://www.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
  • Mr Publisher
    16/9/20
    Profil: https://www.blogger.com/profile/08763990538776959658
    Thank you so much princess. It worked perfectly well for me.
    👉 https://proboosta.com
  • Rizki M Farhan
    9/8/20
    Profil: https://www.blogger.com/profile/00143484218088124165
    Kak cara buat popup di subscribe, gimana ya ?
  • Anotherways
    19/7/20
    Profil: https://www.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/7/20
    Profil: https://www.blogger.com/profile/07979833797958631524
    Terimakasih mas igniel, saya juga memasangkan di blog saya.
  • Saifullah.id
    19/6/20
    Profil: https://www.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/6/20
    Profil: https://www.blogger.com/profile/03364489090455309442
    mantap tempalte
  • Wahyu
    12/5/20
    Profil: https://www.blogger.com/profile/07549721068019101051
    Thanks, Mba.

    Kotak berlangganannnya keren.
  • Mas uki
    20/3/20
    Profil: https://www.blogger.com/profile/17216426145973668268
    Saya juga pasang widget subsribe Email ini keren
  • Saif Ghofur
    11/3/20
    Profil: https://www.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/1/20
    Profil: https://www.blogger.com/profile/10394649788848833852
    SVG Icon for Whatsapp and Telegram.. Please
  • ZEMREUS
    17/1/20
    Profil: https://www.blogger.com/profile/09498346686861292087
    Makasih min sangat membantu,tetapi cara mengganti warna lonceng dll yang berwarna hijau itu gimana ya??
  • Droidide
    22/11/19
    Profil: https://www.blogger.com/profile/14943304334673207353
    Kak kalau saya hanya menginginkan kotak subscribe nya tanpa medsosnya gimana ??
    • Igniel
      9/1/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus kode HTML medsosnya.
      <div class="medsos__">
      ...
      ...
      ...
      </div>
  • MIMRAN
    11/11/19
    Profil: https://www.blogger.com/profile/01385098029999375541
    Not Working on to my website
    • Igniel
      9/1/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Just try again.
  • Admin
    22/10/19
    Profil: https://www.blogger.com/profile/10267433720308898206
    Mbak cara mengganti gambar loncengnya berwarna biru gimana? terimakasih
    • Igniel
      8/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Lihat jawaban yang ini ya.
      https://www.igniel.com/2019/09/kotak-subscribe-email.html?showComment=1573207474184#c5448674497710320149
  • Admin
    20/10/19
    Profil: https://www.blogger.com/profile/13572341428882876996
    Cara menambahkan icon whatsapp bagaimana mbak?
  • Admin
    18/10/19
    Profil: https://www.blogger.com/profile/08754639297409746138
    Terimakasih sudah berbagi,, sukses selalu igniel
  • Bagitutor.com
    5/10/19
    Profil: https://www.blogger.com/profile/04496833524580099542
    mantap mbak tutorialnya
  • M. Limon
    2/10/19
    Profil: https://www.blogger.com/profile/07103600535159878470
    how to change the colour of the bell?
    • blogger
      29/10/19
      Profil: https://www.blogger.com/profile/00089657311203557612
      i need to know too, so that i can change the color
    • Igniel
      8/11/19
      Profil: https://www.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/11/19
      Profil: https://www.blogger.com/profile/07103600535159878470
      Thanks
  • Admin
    24/9/19
    Profil: https://www.blogger.com/profile/15566479072652491848
    mba iqniel, kok di template brosense mas sugeng g work yah ??
    • Admin
      24/9/19
      Profil: https://www.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/9/19
      Profil: https://www.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/9/19
      Profil: https://www.blogger.com/profile/15566479072652491848
      thx responnya mba Igniel, sdh saya coba tapi warna nya putih mba,,
    • Igniel
      25/9/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ganti aja warnanya. Ikuti tutorial soal ikon SVG.
  • Wira Saksana
    21/9/19
    Profil: https://www.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/9/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ganti di background-color:#eee
    • My Admin
      2/10/21
      Profil: https://www.blogger.com/profile/15968757347474587276
      Mbak Igniel kalau ingin buat tombol subscribe nya di main menu bisa ga? jadi bukan di sidebar
  • defantri.com
    20/9/19
    Profil: https://www.blogger.com/profile/07126573827912835475
    terimakasih mbak niel, sukses praktek...
  • Over Brain
    19/9/19
    Profil: https://www.blogger.com/profile/01075736290530426101
    hai mbak igniel, boleh dong kalau berkenan buat tutorial tentang tombole share yg sperti di post ini :D
    Terimakasih mba