Widget Subscribe Gelap

Widget subscribe gelap ini mempunyai karakter tampilan kokoh dan elegan. Widget ini juga dilengkapi dengan button sosial media yang berfungsi untuk mempublikasikan jaringan anda, seperti facebook, twitter, feeds blog, google plus, dan youtube, sehingga memudahkan pengunjung ketika ingin mengakses jaringan yang ditawarkan. Cara pembuatannya cukup mudah dan tidak memberatkan loading blog. Sebelumnya saya ucapkan terima kasih kepada blogger trix atas kode widget ini. Sekarang mari kita bahas cara pasang widget subscribe gelap untuk blogspot. Ikuti langkah berikut.

LIHAT DEMO WIDGET SUBSCRIBE GELAP ELEGAN

Log ke blogger
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<style>
#btrix-newsletter{ width:290px;background:#2e3639; color:#fff; padding:20px; font-size:14px;  margin-bottom:20px;  -moz-box-shadow: 2px 2px 2px #000000;-webkit-box-shadow: 5px 5px 5px #000000;box-shadow: 5px 5px 5px  #000000;border:double 5px #000000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
#btrix-newsletter .btrix-title {  margin-bottom:10px;margin-top:-10px; }
.btrix-title{margin-left: 8px;font-size:25px; font-weight:bold; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;padding:1px 8px 2px 8px;text-align:center;border:1px solid #151819;color:#fff;background:#222729;display:inline-block;}
#footer-subscribe-btn {width:116px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
position:relative;left:135px;}
.footer-submit-btn {margin-left:50px;margin-top:-5px;margin-bottom:-50px;border: none;color: #fff;text-transform: uppercase; font-size: 13px;padding: 5px 18px 5px;background: #e93a30;border-radius: 30px;-webkit-border-radius: 30px;
-moz-border-radius: 30px;font-weight: bold;-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;-ms-transition: background .2s linear;-o-transition: background .2s linear;transition: background .2s linear;cursor: pointer}
.footer-submit-btn:hover { background:#e51111;}
#fastsearch ,#footer-subscribe-email{background:#62686b;color:#fff;font-size:14px;border:none;
box-sizing:border-box;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;outline:none;padding:0px 15px; height:30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#fastsearch.inactive ,
#footer-subscribe-email.inactive {color:#b5b7b8;}
#footer-subscribe-email {width:100%;}
#sb-nl-members-count {  font-size:12px; font-weight:bold;text-align:center;width:150px;margin:0 0 -36px 0 ;display:inline-block;
</style>

<br />
<div id="btrix-newsletter">
<div class="btrix-title">
Get Email Updates</div>
<div class="btrix-nl-text">
<center>
Subscribe to Get Latest Updates Free</center>
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USERNAME-FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="inactive footer-text-field" id="footer-subscribe-email" name="EMAIL" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Your email address" />
<input name="uri" type="hidden" value="USERNAME-FEEDBURNER" />
<input name="loc" type="hidden" value="en_US" />
<br />
<div id="sb-nl-members-count">
<table border="0">
<tbody>
<tr>
<td style="padding-right: 4px;"><a href="http://twitter.com/USERNAME" target="_blank" title="Follow Me On Twitter">
<img src="http://1.bp.blogspot.com/-Q4L6phRaHaA/UOKc13ilEwI/AAAAAAAAGLM/qZrVGXriT2s/s1600/bloggertrix.com-twitter-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://feeds.feedburner.com/USERNAME" target="_blank" title="Subscribe Via RSS">
<img src="http://2.bp.blogspot.com/-Y0dHt53dw40/UOKc1B3zfJI/AAAAAAAAGLE/QZzG4hMqUNU/s1600/bloggertrix.com-rss-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://www.facebook.com/USERNAME" target="_blank" title="Find Us On Facebook">
<img src="http://4.bp.blogspot.com/-xELUzYYkYY0/UOKcz34EO2I/AAAAAAAAGK0/AZz0lNN6Sos/s1600/bloggertrix.com-facebook-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="https://plus.google.com/ID-GOOGLE PLUS" target="_blank" title="Add me on Google+">
<img src="http://3.bp.blogspot.com/-bWbBG7yV2dQ/UOKc0ohrt1I/AAAAAAAAGK8/6m2c4idvyBc/s1600/bloggertrix.com-google-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://youtube.com/USER-ID" target="_blank" title="youtubr subscribe">
<img src="http://1.bp.blogspot.com/-eZFb46_b9RQ/UOKc2hK48BI/AAAAAAAAGLU/pwTmG2--j4o/s1600/bloggertrix.com-youtube-icon.png" style="height: 25px; width: 25px;" /></a>
</td></tr>
</tbody></table>
</div>
<input class="footer-submit-btn" id="footer-subscribe-btn" type="submit" value="Subscribe" />

<div class="clr">
</div>
</form>
</div>

Selanjutnya edit tulisan merah dengan cetak tebal sesuai petunjuk. Klik Simpan dan lihat hasilnya. Demikian tutorial memasang widget subscribe gelap untuk blogspot. Semoga berguna bagi kita semua, amin. Selamat mencoba dan sukses selalu.

Source Code: Bloggertrix

"keep spirits and do the best"