Memasang Tombol 'Berlangganan Via E-Mail' Keren

Assalamu'alaikum Wr. Wb. sobat Fakhrie.

Pada kesempatan kali ini saya akan memberikan tutorial Memasang Tombol 'Berlangganan Via E-Mail' Keren. Berbeda dari versi sebelumnya, yaitu Cara Memasang Tombol 'Subscribe Now' keren 2014. Disini tombol ini lebih keren dari versi sebelumnya. Sesuai namanya, widget ini berfungsi agar para pengunjung dapat berlangganan artikel di blog sobat melalui e-mail.

Penampakkannya seperti ini :

Gimana? Keren kan?

Bagi yang berminat untuk memasangnya, silahkan disimak cara memasangnya :

Langkah Pertama : Login Blogger
Langkah Kedua : Pilih Blog
Langkah Ketiga : Klik Tab Tata Letak
Langkah Keempat : Tambah Widget HTML. Lebih lengkapnya baca di Cara Menambahkan Widget HTML/JavaScript pada Blogger.
Langkah Kelima : Copy kode dibawah ini

<style>
#dgenera-blog {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
#email-news-subscribe .email-box{
padding: 5px 5px;
font-family: "Arial","Helvetica",sans-serif;
height:38px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#666 0,#333 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));

font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:white;

padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{

background-image:-moz-linear-gradient(top,#333,#666);
background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999

-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:#FFFFFF;
}
#other-social-bar {
padding: 0px;
overflow: hidden;
height:37px;
margin-top:-8px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
overflow: hidden;
padding:5px;
width: 270px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow li {
display:inline;
border:0;
}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#666;
font-weight: bold; font-family:arial;
display:inline;
}
#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT2bLK35WSTaOaUzsDArtks5aIUNYbEvltZzbJIg46ZvXyv707yI6ZawAxAI59N1pCKVpPHlm_3cTf4KtyOc6ydZCn35MkgWxyZCU4eiOaDqHFQRRuZNJk4C2XqurT580NVnHRN5K3SIs/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-twitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK4BKBWiDYdXDw6oCCCdvmnzs0GLLOtLnhDQo2RoXC932ENWbR7LexnAh0PfkKkECHba4FVfl8TyOrxiQ2MfD0pTdC-EWbwybgeLraPiOXlu3D0aZfgA1bpuCeU94BHfr_IeuQ_4pavsA/s400/twitter%2527.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi746BkbyWV6f5rQEWhVUnQR0P7x4xkHnpDJBdaXfbudNA2sLv7isNAz_FR0UXruDXjkwh5OZiQp2wKnmSaEcM1ooybuYZr8taiMULVX4NURsF2Ne076vYp72wU8GGF4pdmHUAb8L-g6YY/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
.emailicon {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwyXdstJbyrWZCnPQGPsNPvcGxf25IhlyArZe5uSZ9KokeTYUnoJiHIE0L-CP-i9c3ljH4mKG0InaMSqTmoGFaEeFGvZk3C0wGRJQP4-n2hWWw5I4aNczFNEFKNnsSnAt1a6WD2AxmpLpJ/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
padding: 0px 20px 0px 95px;
min-height:100px;
margin: 0px;
width: 183px;
line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: rgb(51, 51, 51);
}
.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family: impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
</style>

<div id="dgenera-blog" >
<div class="emailicon"><p>Subscribe to our Free Email Updates! </p></div>
<div id="email-news-subscribe">
<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=GilangRamdhani', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" />
<input type="hidden" value="FakhrieShare" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>
</div>

Langkah Keenam : Letakkan kode tersebut pada kolom HTML yang tersedia

Langkah Ketujuh : Klik Simpan

Keterangan : Ubah kode yang berwarna merah dengan ID feedburner sobat

Yosh, mungkin hanya itu yang bisa saya bagikan, semoga bermanfaat ^_^

Muhammad Nur Wahid Fakhrudin Seseorang yang ingin berbagi tulisan tentang blog, desain, dan geologi.