rp0bNChIFHEQLNOWnNlTR7tYV3Qi69riOvEhpJHL
Cara Membuat Widget Berlangganan Artikel ala Igniel

Cara Membuat Widget Berlangganan Artikel ala Igniel

Widget subscriber box atau kotak berlangganan artikel ini bukanlah hal yang asing bagi kalangan blogger. Hampir semua blog yang pernah saya kunjungi pasti terdapat widget tersebut. Bagi saya widget ikuti lewat email (subscriber box) ini wajib diterapkan pada blog sobat.

Hal ini bertujuan untuk pengunjung blog sobat yang ingin berlangganan dan mendapatkan notifikasi via email, jika sobat mengupdate artikel baru. Dengan hal ini secara tidak langsung akan mendapatkan traffic yang secara perlahan akan terus berkembang dan meningkat.

kotak berlangganan mirip Igniel, subscriber box Igniel

Terdapat banyak sekali untuk tampilan widget ini, seperti contoh yang terdapat pada template Viomagz, namun pada kali ini saya akan memberikan desain subscriber box mirip seperti blog mbak Igniel.

Oke, tanpa berbasa-basi lagi berikut tutorial cara membuatnya. Silahkan ikuti langkah-langkah berikut ini.

Cara Membuat Kotak Berlangganan Artikel Mirip Igniel

1. Pertama masuk ke akun blogger sobat
2. Pada dasboard pilih menu Tema > Edit HTML
3. Kemudian simpan kode CSS berikut tepat diatas </style> atau ]]></b:skin>


/* Subscribe Box by Samied.com ala Igniel */
#samiedSubscribe {width:300px; height:auto; background-color:#fff; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}
#samiedSubscribe .email__ {padding:15px 15px 5px;}
#samiedSubscribe .email {margin:auto; color:#555; text-align:center;}
#samiedSubscribe .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='%235b86e5'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#samiedSubscribe .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;}
#samiedSubscribe 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;}
#samiedSubscribe 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='%235b86e5'/%3E%3C/svg%3E") no-repeat; content:'';}
#samiedSubscribe 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;}
#samiedSubscribe button {background-color:#5b86e5; 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;}
#samiedSubscribe button:hover, #samiedSubscribe button:focus {background-color:#5b86e5;}
#samiedSubscribe 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='%235b86e5'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;}
#samiedSubscribe .medsos {width:100%; text-align:center;}
#samiedSubscribe .medsos svg {width:20px;height:20px;margin-top:7px}
#samiedSubscribe .medsos svg path {fill:#fff}
#samiedSubscribe .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;}
#samiedSubscribe .medsos a:last-child {margin-right:0px;}
#samiedSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);}
#samiedSubscribe .medsos .facebook{background:#3a579a}
#samiedSubscribe .medsos .twitter {background:#00abf0}
#samiedSubscribe .medsos .googleplus {background:#df4a32}
#samiedSubscribe .medsos .youtube {background:#cc181e}
#samiedSubscribe .medsos .instagram {background:#992ebc}
#samiedSubscribe .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); }
}

4. Jika sudah simpan tema

5. Kemudian simpan kode HTML berikut dimana pun sobat ingin menampilkannya. Saya disini akan memasang pada sidebar blog.

6. Masuk ke menu Tata Letak ( Layout ) lalu tambahkan Gadget ( add a gadget ) kemudian pilih HTML/JavaScript.


<div id="samiedSubscribe">
<div class="email__">
<div class="email">
Dapatkan artikel terbaru setiap hari
      
<form action="https://feedburner.google.com/fb/a/mailverify?uri=samied" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=samied', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" name="email" placeholder="Contoh: nama@mail.com" />
        <input name="uri" type="hidden" value="samied" /> <input name="loc" type="hidden" value="en_US" />
        <button type="submit"></button>
      </form>
</div>
</div>
<div class="medsos__">
<div class="medsos">
<a class="facebook" href="https://www.facebook.com/xxxx" rel="nofollow noopener" target="_blank" title="Facebook"><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" href="https://twitter.com/xxxx" rel="nofollow noopener" target="_blank" title="Twitter"><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" href="https://www.youtube.com/xxxx" rel="nofollow noopener" target="_blank" title="Youtube"><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" href="https://www.instagram.com/xxxx" rel="nofollow noopener" target="_blank" title="Instagram"><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" href="https://pinterest/xxxx" rel="nofollow noopener" target="_blank" title="Pinterest"><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>


Icon diatas menggunakan SVG icon jadi tidak akan memberatkan loading blog sobat, karena tidak memuat script external apapun. Oke selamat mencoba dan semoga bermanfaat, sekian terimakasih.
Baca Juga
SHARE
Dimas Arief
Tidak normal tapi spesial. Blogger merangkap content writer yang secara ajaib tersesat di bidang keuangan. Semua tulisan di sini tersedia berkat bantuan kopi tanpa gula.

Related Posts

Subscribe to get free updates

Post a Comment

Iklan Tengah Post

Samied
Administrator

Tidak normal tapi spesial.Semua tulisan di sini tersedia berkat bantuan kopi tanpa gula.