Cara Membuat Subscribe Box Dengan Sosial Media

Cara Membuat Subscribe Box Dengan Sosial Media Di Blogger - Pada postingan kali ini saya akan membagikan tutorial membuat subscribe box. Sebelum nya saya sudah posting Cara Membuat Subscribe Box Keren Di Blog, dan di postingan itu terdapat 2 buah subscribe box yang keren. Tapi untuk widget yang satu itu beda dari yang kedua tersebut. Fungsi nya memang sama, yaitu agar pengunjung dapat berlangganan artikel kita melalu feedburner, dan karena itu mereka bisa terus dapet update dari blog kita. Disini hanya menambahkan widget saja tidak perlu mengedit bagian template nya, karna kode css sudah digabungkan ke html nya. Step by step kita praktekin langsung :

Step 1 : Login ke Blogger dengan akun google kalian

Baca Juga : 
Cara Mengganti Domain Blogspot ke Domain TLD
Cara Terbaru Memasang Komentar Disqus Pada Blogger
Cara Membuat Responsive Social icon Blogger

Step 2 : Pada halaman blogger, pilih layout atau tata letak, kemudian tambahkan widget baru terserah di mana, mau di sidebar atau di footer. Saran saya, lebih baik letakan di sidebar, agar ketika pengunjung baca artikel bisa kelihatan.

Step 3 : Buat widget baru dengan HTML/Javascript kemudian copy kode di bawah dan paste di sana.

<style>
.subscribebtrix {width: 310px; 
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#d3dde3)); 
background: -moz-linear-gradient(top, #f5f5f5, #d3dde3); 
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3); 
display:inline-block; /* IE is so silly */ 
border: 0px solid #000000; 
border-radius: 5px; 
padding: 0px 10px 10px 10px; 
} 
.subscribebtrix img { 
border: none; 
}
.tbimailbox { 
width: 270px; 
color: #666; 
font: 16px 'Trebuchet Ms', Sans-Serif; 
padding: 10px 15px; 
border: 1px solid #D3D3D3; 
border-radius: 4px; 
-webkit-border-radius: 4px; 
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset; 
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; 
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; 
-webkit-transition: all 0.8s ease-in-out; 
-moz-transition: all 0.8s ease-in-out; 
-ms-transition: all 0.8s ease-in-out; 
-o-transition: all 0.8s ease-in-out; 
transition: all 0.8s ease-in-out; 
}
.tbimailbox:hover { 
-webkit-box-shadow: none; 
box-shadow: none; 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
}
.button { 
   width: 300px; 
   border-top: 1px solid #96d1f8; 
   background: #0571e6; 
   background: -webkit-gradient(linear, left top, left bottom, from(#123d60), to(#0571e6)); 
   background: -webkit-linear-gradient(top, #123d60, #0571e6); 
   background: -moz-linear-gradient(top, #123d60, #0571e6); 
   background: -ms-linear-gradient(top, #123d60, #0571e6); 
   background: -o-linear-gradient(top, #123d60, #0571e6); 
   -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6); 
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6); 
   display:inline-block; /* IE is so silly */ 
   padding: 10px 20px; 
   -webkit-border-radius: 3px; 
   -moz-border-radius: 3px; 
   border-radius: 3px; 
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; 
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; 
   text-shadow: rgba(0,0,0,.4) 0 1px 0; 
   color: white; 
   font-size: 16px; 
   font-family: "Verdana", sans-serif; 
   font-weight: bold; 
   text-decoration: none; 
   vertical-align: middle; 
   }
.button:hover { 
   background: #123d60; 
   color: #ccc; 
   }
.button:active { 
   border-top-color: #123d60; 
   background: #123d60; 
   }
</style>
<br /> 
<div class='subscribebtrix'> 
<div align='center' style='color: #333; font: 22px Verdana; font-weight: bold;  margin: 0px 0px 15px 0px; padding: 10px 0 10px;'> 
Stay Connected</div> 
<br /> 
<br /> 
<center> 
<div style='margin: -30px 0 20px 0;'> 
<a href='http://www.facebook.com/iamukon' target='_blank' title='Join us on Facebook'><img alt='facebook' src='https://s23.postimg.org/5qcphgauj/iamukon_domain.png' /></a> 
<a href='http://www.twitter.com/iam_ukon' rel='nofollow' target='_blank' title='Follow us on Twitter'><img alt='twitter' src='https://s27.postimg.org/owm1twnsj/twitter_iamukon.png' /></a> 
<a href='https://plus.google.com/+UkonArt' rel='nofollow' target='_blank' title='Follow us on Google+'><img alt='gplus' src='https://s30.postimg.org/w7iugxwkh/gplus_iamukon.png' /></a> 
<a href='http://www.pinterest.com/#' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img alt='pinterest' src='https://s30.postimg.org/6s7i4z97l/pinterest_iamukon.png' /></a> 
<a href='http://feeds2.feedburner.com/IAmUkon' rel='nofollow' target='_blank' title='Subscribe to RSS'><img alt='rss' src='https://s30.postimg.org/ugvbj9lpd/rss_iamukon.png' /></a> 
</div> 
</center> 
<div align='center'> 
<a href='http://feeds.feedburner.com/IAmUkon'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/IAmUkon?bg=123D60&amp;fg=ffffff&amp;anim=1' style='border: 0;' width='88' /></a></div> 
<div style='margin: 10px 0 0 6px;'> 
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=IAmUkon", "popupwindow", "scrollbars=yes,width=550,height=520");return true' style='margin: 0pt;' target='popupwindow'> 
<input name='uri' type='hidden' value='iamukon' /> 
<input name='loc' type='hidden' value='en_US' /> 
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...' /> 
<input alt='' class='button' title='' type='submit' value='Subscribe' /> 
</form> 
</div> 
</div>

Untuk URL dari sosial media nya silahkan di ganti ya, URL Facebook, Twitter, Google Plus, Pinterest, dan juga feed burner. Semoga artikel nya bermanfaat.