√ Cara Membuat Kotak Berlangganan (Subscribe via Email) - Satriaryan22

Cara Membuat Kotak Berlangganan (Subscribe via Email)

Memasang fitur kotak berlangganan lewat email itu akan sangat berguna dan bermanfaat untuk pengunjung blog yang ingin berlangganan dan ingin mengetahui update terbaru dari artikel blog anda, yaitu dengan melalui email. Dengan memasang fitur ini di blog anda, akan banyak juga orang yang ingin berlangganan ke blog anda. Maka traffic blog anda akan meningkat. Sudah banyak para blogger yang memasang dan menggunakan fitur ini dengan harapan pengunjung akan menjadi pelanggan setia di blog anda.

Tentunya jika anda sudah mendapatkan pelanggan setia di blog, meskipun hanya 3-5 orang saja. Anda harus tetap update artikel terus karena mereka para pelanggan setia juga menunggu hasil update dari blog anda. Untuk model desain dan fitur widget ini, saya akan memberikan desain model yang sama persis seperti di blog igniel. Untuk desainnya seperti dibawah ini.

Memang untuk desain nya agak sedikit saya rubah terutama untuk icon emailnya saya tidak adakan karena ada beberapa kendala sepert error position dan shadow untuk tombol media sosial nya. Oke brow langsung saja, kalian simak berikut ini


Cara Membuat Kotak Berlangganan via Email

1. Sobat Sobrow login ke Blogger
2. Kemudian sobat masuk ke TEMA > lalu klik EDIT HTML
3. Sobat cari kode ]]></b:skin>, kemudian sobat copy paste kode script dibawah ini tepat diatas kode ]]></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); }
}

4. Jika sudah Klik Simpan Tema.
5. Masuk ke Menu Tata Letak, Pilih posisi Widget (Saya sarankan di sidebar kanan/kiri).
6. Lalu Tambahkan Gadget HTML/JAVASCRIPT, Pastekan Kode dibawah ini di dalamnya. Lalu SIMPAN.

<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="https://www.facebook.com/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="https://twitter.com/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="https://www.youtube.com/channel/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="https://www.instagram.com/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>

7. BELUM SELESAI BROW, Simak keterangan dibawah ini, silahkan sobrow setting dan ganti sesuai keinginan kalian


Keterangan

ID_FEEDBURNER_BLOG : Ganti dengan ID feedburner blog kalian brow. scroll kebawah
MASUKAN_ID_FACEBOOK : Ganti dengan ID facebook kalian brow.
MASUKAN_USERNAME_TWITER : Ganti dengan USERNAME twiter kalian brow
MASUKAN_ID_CHANNEL_YOUTUBE : Ganti dengan USERNAME id channel youtube kalian brow.
MASUKAN_USERNAME_INSTAGRAM : Ganti dengan USERNAME username instagram kalian brow.
orange : Warna Untuk Lonceng, silakan ganti sesuai dengan keinginan kalian brow. scroll kebawah

Mungkin sampai disitu saja brow tentang cara membuat kotak berlangganan via email di blog. Sekian dan Terima Kasih.
Buka Komentar
Tutup Komentar

0 Response to "Cara Membuat Kotak Berlangganan (Subscribe via Email)"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel