Salah satu cara untuk meningkatkan minat pengunjung blog adalah dengan memanfaatkan Widget Subscribe Box / Mail Subscribe dari Feedburner. Dengan begitu pengunjung bisa berlangganan gratis Artikel buatan kalian dan tidak akan ketinggalan update jika kalian membuat artikel terbaru.
Nah dibawah ini sudah saya sediakan 4 Widget Subscribe Box yang bisa kalian pasang di blog kalian dan juga langkah - langkah pemasangannya.
Langkah - Langkah Pemasangan Kode CSS
- Silahkan login ke akun Blogger kalian
- Pada Dashboard pilih "Template"
- Pilih Edit HTML
- Cari kode ]]></b:skin>
- Paste kode CSS yang tersedia di bawah ini tepat di atas kode ]]></b:skin>
Widget Email Subscription Box 1
#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiRvzHJLpEd_7S9Hp9O9fKJJx95UTo-wngQpTEpAy8OjQfuQc0GkvgZt3Zarod5qanourvlfIc2DD6Aruka6uJfuU85zMarnnsaEYIN21FpzF_cPqDg9SPm_XqvySbdyqxGznzaL3cUzUu/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggoBd3_kv-r7QVrbjIJt2gGzxyZrFVltvfHOoWU26qMs6AaBxtTti0kDvYzNzWqvvTjr8s5_hbHVbC0Xmdcu8HoU6uHj14Wu4y3l_JOrsBi-MKo65XHoPM56m073W_FhLol4I1J-pT7tGr/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZszTUlYUcbqsJO4Qmk4ZlUNoUSekf-hMXoLWuhbeGhJ0biR3QypFrslYrYjrGpHpzen1o8_4n30tZmlKmSC2sJ_XJTm9EDMR7QxNWA8YKLH2rtqFEQw6VU2DwjLyWY2lEzOxiug2liwsa/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}<center>
<div align="center" id="truebloggertricks-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 240px;">
<h3 id="truebloggertricks-title-text" style="color: white; font-size: 20px;">
GET FREE EMAIL UPDATES</h3>
<div id="truebloggertricks-sub-title-txt" style="color: white; font-size: 14px;">
Join us for free and get valuable content delivered right through your inbox.</div>
<br />
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=hanyalah-blogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="truebloggertricks_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter First Name" /><br />
<input class="email" id="truebloggertricks_Subscriber_email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="hanyalah-blogger" /><input name="loc" type="hidden" value="en_US" /> <input id="truebloggertricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</div>
</center>
</div>
Widget Email Subscription Box 2
body {
background: #e6ed3;
margin: 0 auto 0;
color: #444;
font-family: 'PT Sans', arial, sans-serif;
font-size: 13px;
font-weight: 400;
text-align: center;
}
#subscribebox {
background:#576269;
padding:20px;
font-family: 'PT Sans', sans-serif;
width:450px;}
.widget_follow_subscribe .widget-detail {
padding: 36px 30px 40px 30px;}
#subscribebox p {
color: white;
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 25px 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 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.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-family:Poppins;
font-size: 0.928571em;
background-color: rgba(255,255,255,0.8);
text-align: center;
color:#666666;
}
.subscribe-email:focus {
outline: 0;
}
/* ===== Placeholder color ===== */
form.subscribe .placeholder { /* Internet Explorer 9 */
color: #cacaca;
}
form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #cacaca;
}
form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */
color: #cacaca;
}
form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fafafa;
}
form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fafafa;
}
.subscribe-button {
height: 45px;
font-weight: 700;
font-family:'Poppins;
font-size:16px;
color: #fff;
text-transform: uppercase;
border: none;
background-color:#0CC388;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.subscribe-button:hover {
background-color: #f1d640;
}
.subscribe-button:focus {
outline: 0;
}
.post-subscribe{text-align:center;font-family:Dancing Script;font-size:33px;color:#fff;margin: 5px;}
<center>
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<div class='post-subscribe'>Subscribe to my Newsletter</div>
<form class="subscribe" action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=hanyalah-blogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name='uri' type='hidden' value='hanyalah-blogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email Address" />
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
</center>
<br/><br/><br/>
Widget Email Subscription Box 3
/* CSS Subscribe Box By MS Design */
body {
background: #e6ed3;
margin: 0 auto 0;
color: #444;
font-family: 'PT Sans', arial, sans-serif;
font-size: 13px;
font-weight: 400;
text-align: center;
}
#subscribe-box {
width:450px;
background-color:#0CC388;
font-family: 'PT Sans', sans-serif;
margin-top:20px
}
#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:95%;
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:#ff0000;
color:#fff;
}
.post-subscribe{
text-align:center;
font-family:Dancing Script;
font-size:27px;
color:#fff;
margin: 5px;
}
.sub-post{
text-align:center;
font-family:Poppins;
font-size:12px;
color:#fff;
margin: 5px;
}
.name-email {
border: none;
font-family:Poppins;
background-color: rgba(255,255,255,0.8);
color:#666666;
}
.name-email:focus {
outline: 0;
}<center>
<div id='subscribe-box'>
<center><br /><div class='post-subscribe'>Subscribe</div><div class='sub-post'>for our all latest news and updates</div></center>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=hanyalah-blogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target='popupwindow'>
<input class="name-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value='Enter Your Name'/>
<input class="name-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value='Enter Your Email Address'/>
<input name='uri' type='hidden' value='hanyalah-blogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe Now'/>
</form><br />
</div></div> <br /><br />
Widget Email Subscription Box 3
#wp-subscribe { width:300px;
padding: 26px; background: #f47555; }
#wp-subscribe h4.title {font-family:Handlee; font-size: 22px; color: #FFFFFF; line-height: 1; text-align: center; text-transform: uppercase; margin-bottom: 0; }
#wp-subscribe h4.title span { display: inline-block; font-weight: bold; font-size: 38px; margin-top: 15px; }
#wp-subscribe p { color: #FFFFFF; margin: 0; text-align: center; }
#wp-subscribe p.text { font-family:Poppins;font-size:13px;margin: 5px 0; opacity: 0.8; }
#wp-subscribe input { border: none; width: 100%; text-align: center; box-sizing: border-box; padding: 10px 0; margin: 0; box-shadow: none; border-radius: 0; height: 45px; }
#wp-subscribe .email-field { margin-top: 10px }
#wp-subscribe input.email-field, #wp-subscribe input.name-field { color: #FFFFFF; background: #d56144; }
#wp-subscribe input::-webkit-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-ms-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:focus::-webkit-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus:-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::input-placeholder { color: transparent !important }
#wp-subscribe input.submit { background: #FFFFFF; color: #f47555; margin-top: 20px; font-size: 18px; text-transform: uppercase; font-weight: 500; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); cursor: pointer; }
#wp-subscribe p.footer-text { margin-top: 10px; font-family:Poppins;font-size: 9px; }
.your-email {
border: none;
font-family:Poppins;
background-color: rgba(255,255,255,0.4);
color:#aca9a8;
}
.submitbutton {
background:#fff;
color:#f47555;
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;
}
.submitbutton:active {
outline:none;
border:none;
background:#fff;
color:#e25734;
}
.submitbutton:hover{
background:#d23f1a;
color:#fff;
}
<center><br />
<div class="wp-subscribe" id="wp-subscribe">
<h4 class="title">Get more stuff like this<br/> <span>in your inbox</span></h4><br />
<p class="text">Subscribe to our mailing list and get interesting stuff and updates to your email inbox.</p><br />
<div class='emailfield'><form action='https://feedburner.google.com/fb/a/mailverify' action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=hanyalah-blogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target='popupwindow'>
<input class="your-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value='Enter Your Email Address'/><br /><br />
<input name='uri' type='hidden' value='hanyalah-blogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Sign Up Now'/>
</form>
<div class="clear"></div>
<p class="footer-text">we respect your privacy and take protecting it seriously</p></div></center>Oke, sekian artikel yang saya bagikan tentang 4 Widget Email Subscribe Box Untuk Blogger semoga bermanfaat. Jika kalian masih binggung cara pemasangan nya bisa komen di bawah :)
ConversionConversion EmoticonEmoticon