Cara Memasang Widget Email Subscribe Box DI Blogger

Seperti biasa AnggaSave akan berbagi tutorial cara membuat widget. Widget yang akan kita buat ini adalah widget kotak berlangganan email atau dalam bahasa Inggrisnya Email Subscribe Box atau Email Subcription Box. Widget ini biasanya diletakkan di sidebar atau footer blog.

Namun seharusnya anda sudah tahu apa itu subcription box,fungsi,serta cara kerjanya. Jika sampai belum tahu maka akan saya beri tahu di artikel ini,langsung simak saja dibawah ini.

Apa itu Email Subscribe Box?

Email Subscribe Box adalah sebuah widget yang berbentuk kotak dan biasa diletakkan di sidebar atau di footer blog. Pasti kalian pernah melihatnya. Sebuah widget berlangganan email Feedburner dapat membawa sejumlah besar pengunjung di blog Anda.

Pengunjung berlangganan di blog Anda dengan memasukkan email mereka dan mereka selalu mendapatkan pembaruan baru Anda di email mereka. Formulir berlangganan email di blogger adalah widget yang penting.

Baca juga : Cara Membuat Kotak Berlangganan (Subcription Box) Keren

Fungsi Email Subscribe Box

Fungsinya ditujukan bagi para pengunjung/visitor blog yang selalu ingin mengetahui update artikel terbaru di blog anda. Bagi pengunjung yang ingin mengetahui update artikel terbaru mereka bisa berlangganan artikel di blog anda melalui email sehingga mereka bisa mengetahui update artikel.

Cara Kerja Email Subscribe Box

Cara kerjanya adalah dengan memanfaatkan RSS feedburner blog anda.Singkatnya, google feedburner adalah RSS feed layanan web yang paling populer. Jika ada yang berlangganan blog Anda dengan email mereka, maka feedburner akan mengirimkan posting terbaru Anda ke semua email berlangganan secara langsung.

Cara Membuat Email Subscribe Box

Ada 2 style email subscribe box yang akan saya bagikan. Anda bisa memilih style email subscribe box yang anda suka. Berikut 2 style tersebut.

Baca juga : Cara Memasang Kotak Berlangganan (Email Feed Burner) Di Blog

#Email Subscribe Box Dark Version

Untuk email subscribe box yang satu ini bukan hanya sekedar untuk berlangganan saja tetapi juga ada ikon sosial media. Anda juga dapat menggunakan tautan media sosial Anda seperti ikon sosial Facebook, twitter, linkedin, google plus, pinterest, vine dan instagram sosial. Berikut cara membuatnya :

Langkah 1 : Silakan masuk ke blogger → Template → Edit HTML ,lalu salin kode dibawah dan letakkan diatas kode ]]></b:skin> atau </style>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Langkah 2 : Salin dan letakkan kode CSS dibawah ini diatas kode

#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

Simpan Template

Langkah 3 : Buka Tata Letak → Tambahkan Gadget → HTML/JavaScript dan masukkan kode berikut ,jangan lupa untuk menyimpan gadget

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOURUSERNAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://www.anggasave.com" rel="dofollow" target="_blank"> Get This Widget</a></div>

• Ganti kode # dengan url sosial media sobat 
• Ganti kode YOURUSERNAME dengan username/id feedburner blog sobat

Selesai...

#Email Subscribe Box Green Version

Widget Email Subscribe Box ini cocok untuk blog yang simple dan sederhana.  Di email ini para pengunjung widget berlangganan bisa menuliskan nama mereka dan memasukkan email. Kotak nama membuat widget ini lebih profesional. Di widget ini Anda bisa mengganti judul subscribe box. Judul standarnya adalah: "Berlangganan untuk semua berita dan update terbaru kami". Berikut cara membuatnya :

Langkah 1 : Masuk ke blogger, pilih Template → Edit HTML,salin kode dibawah lalu letakkan diatas kode ]]></b:skin> atau </style>

#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
.creadit a{color: #A7A6A6; float: right; font-size: 8px

Simpan Template

Langkah 2 : Pilih Tata Letak → Tambahkan Gadget → HTML/JavaScript ,lalu masukkan kode berikut dan simpan gadget.

<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=YOURUSERNAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURUSERNAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />

</form>
</div>
</div>
<div class="creadit">
<a href="http://www.anggasave.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>

Ganti kode yang berwarna merah dengan id/username feedburner blog anda.

Selesai

Itu dia tutorial cara membuat widget email subscribe box. Mana style/versi yang anda gunakan. Jika anda suka artikel ini jangan lupa untuk membagikannya. Cukup sekian artikel ini semoga bermanfaat.