Membuat Widget Berlangganan dengan Tampilan Keren dan Elegant 1

Salah satu widget yang membuat keren blog adalah widget berlangganan. Siapa yang gak suka jika blognya memiliki pengunjung tetap? Apalagi widgetnya bentuknya keren dan matching. Maka pada kesempatan ini, Ngonline06 akan berbagi widget berlangganan dengan tampilan yang keren.

Cara membuatnya pun sangat mudah. Sahabat cukup membuat add html pada layout dan tulis saja kode berikut ini.

 <style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDo3y18txU1x45N2X2UxPLkr5b0TWcgEuq_GCC0Kk_FCDC2ntR8HLMtAtV9Ku6dFM7a-ix5qJM5zhCqBROxZos7zrKjwS21Z538G9sJQ9WJIQUjFE7k_dArt_Q6i9mchfq3qbrAmB6cWY/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPswRB6x4Z6bLl4TK1cpsi_P_3A0gsC6lfkYvsNd9Grw_n8plB8CUVujxoYEfHwXOjhgTUxsXiw9Lvc5lZiB19wAHrV6wuOnhuV3lo5vao3oAy-rpxRfpGYoKG-2-CDB93VH_8cABD9e4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<p>Dapatkan Update Terbaru Ngonline06 !!</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda disini"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="BERLANGGANAN" /></form>
</div></div></div>

Silahkan ganti kata yang berwarna merah sesuai dengan kreasi dan nama blog sahabat semua. Semoga sukses ya dalam membuat widget berlangganan yang keren dan elegant.

Jika sahabat ingin membuat widget berlangganan seperti di atas dengan dilengkapi juga tombol sosial media seperti facebook, google plus, twitter, silahkan lihat Membuat Widget Berlangganan dengan Tampilan Keren dan Elegant 2