
Melakukan subscribe pada suatu web atau blog berarti mengikuti setiap update terhadap berita atau info terbaru dari web atau blog tersebut. Untuk melakukan subscribe digunakan sebuah email dan melalui email inilah semua update artikel web tersebut langsung terkirim kedalam email kita. jadi, setiap ada artikel baru update dari blog tersebut, maka postingannya akan segera masuk ke email kita tanpa repot harus sering ke website kesukaan kita untuk melihat postingan terbarunya
Baca juga Cara membuat email di Google
Dalam melakukan subscribe, sebenarnya kita tidak hanya melakukannya pada artikel saja, tapi juga bisa dilakukan untuk mendapatkan info komentar dari setiap konten yang kita ikuti. Misalnya di Facebook
Atau mendapatkan pemberitahaun akan sebuah penawaran produk atau jasa secara online melalui email, dan dalam hal ini disebut sebagai Subscriber Autoresponder
Baca juga tentang Memasang Autoresponder di Blogger
Cara Memasang Widget Email Subscriber Artikel di Blog
Sebelum memasang widget email subscriber ini, alangkah baiknya jika sobat mencoba demonya terlebih dahulu, apakah demo dibawah ini bekerja atau tidak, silahkan masukkan email sobat..GRATIS update artikel via Email
Dapatkan kiriman artikel terbaru langsung ke email sobat!
Jika demo diatas bekerja, silahkan gunakan kode CSS berikut ini
- Masuk kedalam akun blogger sobat
- Pilih blog yang akan dipasang widget email subscriber ini
- Pilih menu Template >> Edit HTML
- Cari kode template ]]></b:skin> dan salin kode berikut sebelum ]]></b:skin>
.subscribe {
margin: 5px auto;
padding: 20px;
width: 300px;
background: #f9760b;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.subscribe-col {
padding-left: 120px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXWj76UWFl4Eh1170rco1PsiX-pUzQuAx1WK_IYtW4iPxDPnH0jdiONjY9QD83KNJA-b1QsQQYFcN-BISB1pi4DCDnygpOBldLwKcWsoEVBVT0DIon_chxWw9VxurAMEWAV4uKqeenphI/s1600/email-subscriber.png") 5px center no-repeat;
}
.subscribe-col > h3 {
margin: 0 0 12px;
font-size: 14px;
font-weight: bold;
color: #222;
text-transform: uppercase;
}
.subscribe-col > p {
line-height: 22px;
color: #484848;
}
.subscribe-form {
position: relative;
margin: 20px -20px -20px;
padding: 15px;
background: #fda352;
border-top: 1px solid #ccc;
border-radius: 0 0 6px 6px;
background-image: -webkit-linear-gradient(top, #fda352, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
background-image: -moz-linear-gradient(top, #fda352, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
background-image: -o-linear-gradient(top, #fda352a, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
background-image: linear-gradient(to bottom, #fda352, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
-webkit-box-shadow: inset 0 1px #fae2cd;
box-shadow: inset 0 1px #fae2cd;
}
.subscribe-input {
padding: 0 15px;
width: 90%;
height: 35px;
font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
font-size: 15px;
color: #444;
background: #fefefe;
background-clip: padding-box;
border: 1px solid;
border-color: #999 #aaa #aaa;
border-radius: 20px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px #f8f8f8;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px #f8f8f8;
}
.subscribe-input:focus {
outline: 0;
}
.subscribe-submit {
display: block;
position: absolute;
top: 15px;
right: 15px;
padding-left: 15px;
height: 35px;
width: 60px;
background: #60e160;
border: 1px solid;
border-color: #4c9d50 #4c9d50 #4c9d50 #55af5a;
border-radius: 0 20px 20px 0;
cursor: pointer;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-image: -webkit-linear-gradient(top, #84f087, #4cd94a);
background-image: -moz-linear-gradient(top, #84f087, #4cd94a);
background-image: -o-linear-gradient(top, #84f087, #4cd94a);
background-image: linear-gradient(to bottom, #84f087, #4cd94a);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
}
.subscribe-submit:active {
background: #4cdf4d;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.subscribe-submit:before {
content: '';
display: block;
margin-top: 1px;
width: 25px;
height: 19px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5vro4_BsXvILDBIQTi1ZAeeOQhAwRTgfQhLgZcMF6rjoKHPd1Bz0swDfjqqRQyHTCz5qihCICVj26HFJTY7sn6TlJOeT9IXr728bNdq8XvBi0JTWC8zly6y9Gx8tAuQ2F-_fydq3xs1Q/s1600/tick.png");
}
.lt-ie9 .subscribe-input {
line-height: 33px;
}
Masukkan kode HTML berikut ini kedalam widget blog,
<div class="subscribe">
<div class="subscribe-col">
<h3>GRATIS update artikel via Email</h3>
<p>Dapatkan kiriman artikel terbaru langsung ke email sobat!<p>
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PanduanTemplateBlogku', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="subscribe-form">
<input type="email" name="email" class="subscribe-input" placeholder="Email address" autofocus><input type="hidden" value="PanduanTemplateBlogku" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<button type="submit" class="subscribe-submit">Subscribe</button>
</form>
</div>
Catatan:- Ganti link http://feedburner.google.com/fb/a/mailverify?uri=PanduanTemplateBlogku dengan link feed blog sobat yang ada di email feedburner
- Ganti value="PanduanTemplateBlogku" dengan value sobat di email feedburner
Semoga bermanfaat, terimakasih telah membaca artikel memasang widget email subscriber artikel di blog. Jika ada pertanyaan silahkan tinggalkan komentar sobat
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@