Widget berlangganan responsive dan keren untuk blog

Widget berlangganan responsive, PURJIANTO.WEB.ID sangatta Kutai Timur – Widget bagi sebagian blogger memang sangat di perlukan seperti widget recent post yang saya pasang di purjianto.web.id ini bukan bawaan dari blogger namun saya pasang dengan code seperti widget berlangganan pada artikel ini.

Widget berlangganan responsive dan keren untuk blog

Untuk mempermudah pembaca yang ingin selalu mengetahui artikel terbaru kita, tentu kita harus memasang feedburner sebagai media berlangganan pembaca yang sering berkunjung ke blog kita, cukup dengan memasukkan email mereka dapat kiriman email secara otomatis ketika kita memposting artikel di blog atau website kita.

Cara memasang Widget berlangganan responsive dan keren untuk blog juga cukup mudah, silahkan copy paste kode dibawah ini pada blog kalian

Penting ( yang bertanda merah silahkan kalian rubah sesuai dengan keinginan kalian :

1. Widget : 100% artinya ukuran akan menyesuaikan lebar sidebar widget kalian, jika kalian ingin cara yang manual silahkan ganti % menjadi px
2. Border : 0px untuk membuat garis tepi silahkan ganti angka 0 menjadi 1
3. Link : silahkan ganti dengan link Facebook, twitter, google+ dan rss kalian
4. Uri : bisa kalian dapat dari feedburner.com

<style>
#sidebar-subscribe-box{width:100%;border:px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/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(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/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%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<br/>
<a class="social-icons" href="https://www.facebook.com/pur.jianto.7"><img src="https://4.bp.blogspot.com/-klbXGj2lAic/WLvIgumr7GI/AAAAAAAABAs/kJHeUKhEN_s_oj0l8QNsJ17wx9z8iwz1QCLcB/s1600/purjianto-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/purjianto99"><img src="https://3.bp.blogspot.com/-PbzuMwlbTbE/WLvIhWpWzyI/AAAAAAAABA4/w5BH8SRDYccHiTteJicPA0h2HoSxkdx8gCLcB/s1600/purjianto-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/u/0/106161069246989202960/posts"><img src="https://4.bp.blogspot.com/-BHxD8OsAXlg/WLvIgze3qhI/AAAAAAAABA0/gV_O8E4x_h0di03h5H6oLvj42TVcNmJ7QCLcB/s1600/purjianto-googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/web/nvUP"><img src="https://2.bp.blogspot.com/-WEwt5mY9bkQ/WLvIg3a6WQI/AAAAAAAABAw/V21ctfdTFSAgsrGx0f0SqATUu_dx8xNKACLcB/s1600/purjianto-rss.png" /></a>
<p>Dapatkan Update Informasi Terbaru purjianto !!</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=web/nvUP" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=web/nvUP', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="web/nvUP" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda di sini.."/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="BERLANGGANAN" /></form>
</div></div></div>