Cara Membuat Widget Berlangganan Keren Dan Elegan Ala Igniel

Tulisan IKO - Fitur berlangganan yang ada di beberapa blog/website berfungsi untuk pengunjung uang ingin mendapatkan artikel terupdate/terbaru yang dibuat oleh penulis dari blog tersebut. Sebagian blogger ingin membuat tampilan widget berlangganan yang menarik agar blognya terlihat keren dan menarik.

Jika kalian sudah memiliki pelanggan blog, kalian harus selalu menyediakan artikel-artikel baru karena pelanggan menunggu hasil artikel yang kalian buat. Pada kali ini saya akan memberikan Cara Membuat Widget Berlangganan Keren Dan Elegan Ala Igniel.

Untuk desainnya menurut saya menarik karena ada beberapa variasi berupa tombol media sosial seperti Facebook, Tweeter, Youtube, Instagram Dan Path dan tentunya ada sebuah lonceng dan jika kita mengarahkan kursor ke lonceng tersebut maka loncengnya akan bergetar.

Cara Membuat Widget Berlangganan Keren Dan Elegan Ala Igniel

1.Masuk Kedalam Dashboard Blogger Kalian
2.Lalu Pilih Tema

3.Pilih Edit HTML

4.Cari Kode </style> atau ]]></b:skin> dan paste kode ini diatas ]]></b:skin>

 /* Newsletter */
#ignielNewsletter {/*box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);*/width:100%; height:auto; background:#fff; border-radius:7.5px;display: block; margin:auto; line-height:40px; padding:0px}
#ignielNewsletter .email__ {padding:15px 15px 5px;}
#ignielNewsletter .email span {font-size: 13px;text-align: center;}
#ignielNewsletter .email {margin:auto; color:#777;line-height:29px;}
#ignielNewsletter .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='orange'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#ignielNewsletter .medsos__ {padding:15px 0px; line-height:0px; border-top:1px dotted #cccfe2;}
#ignielNewsletter 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}
#ignielNewsletter input {padding-left: 15px;width: calc(100% - 35px); height:35px; border:1px solid #cccfe2; border-right:0px; font-size:12px; border-radius:50px 0px 0px 50px;}
#ignielNewsletter button {width:35px; height:35px; margin:0px; padding:0px; background-color:#de0985; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}
#ignielNewsletter button:hover, #ignielNewsletter button:focus {background-color:#f18241;}
#ignielNewsletter button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'></path></svg>") no-repeat; content:''; vertical-align:-3px;}
#ignielNewsletter .medsos {width:100%; text-align:center;}
#ignielNewsletter .medsos svg {width:20px;height:20px;margin-top:7px}
#ignielNewsletter .medsos svg path {fill:#fff}
#ignielNewsletter .medsos a {/*box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4);*/display:inline-block; margin-right:7px; width:35px; height:35px; transition: all ease-in-out 300ms; border-radius:100px;}
#ignielNewsletter .medsos a:last-child {margin-right:0px;}
#ignielNewsletter .medsos a:hover {transform: translate(0px, -10px) scale(1.05);}
#ignielNewsletter .medsos .facebook{background:#3a579a}
#ignielNewsletter .medsos .twitter {background:#00abf0}
#ignielNewsletter .medsos .googleplus {background:#df4a32}
#ignielNewsletter .medsos .youtube {background:#cc181e}
#ignielNewsletter .medsos .instagram {background:#992ebc}
#ignielNewsletter .medsos .codepen {background:#292E34}
.newspaptext {font-size:12px;text-align:center;}
/*Animasi*/
@-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); }
}

Warning : Ganti Text Yang Memiliki Background Merah Dengan Warna Kesukaan Kalian (Untuk Mengganti Warna Lonceng)!!!
5.Jika Sudah Silahkan Simpan
6.Lalu Pergi Ke Tata Letak
7.Klik Add Gadget
8.Pilih HTML/Javascript

<div id="ignielNewsletter">
<div class="email__">
<div class="email">
<div class="newspaptext">Dapatkan artikel terbaru setiap hari</div>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=ID_FEEDBURNER_BLOG&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow">
<input name="email" class="email" onblur="if (this.value==&quot;&quot;){this.value=&quot;Contoh: nama@mail.com&quot;;}" onfocus="if (this.value==&quot;Contoh: nama@mail.com&quot;){this.value=&quot;&quot;;}" type="text" value="Contoh: nama@mail.com" />
<input name="uri" type="hidden" value="ID_FEEDBURNER_BLOG" /> <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="MASUKAN_ID_FACEBOOK" 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="MASUKAN_USERNAME_TWITER" 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="MASUKAN_ID_CHANNEL_YOUTUBE?sub_confirmation=1" 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="MASUKAN_USERNAME_INSTAGRAM" 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>
</div>
</div>
</div>

Warning :
-Ganti Text Yang Memiliki Background Hijau Dengan Link Sosial Media Kalian!!!
-Ganti Text Yang Memiliki Background Biru Dengan ID FeedBurner Kalian

9.Klik Simpan

Berikut Cara Membuat Widget Berlangganan Keren Dan Elegan Ala Igniel. Semoga artikel kali ini bisa bermanfaat, dan jangan lupa untuk share artikel ini yaa. Terima Kasih.....

Share this post