Membuat Widget Social Subscrebe di Blogger

Membuat Widget Social Subscribe di Blogger - Mungkin Widget  Email Subscribe dari Feedburner masihlah sangat biasa atau simpel, tapi dengan sedikit penambahan CSS didalam widget tersebut akan Membuat Widget Email Subscribe menjadi lebih keren dan sobat bisa merubah setiap desain atau warnanya menjadi lebih menarik. Nahh kali ini saya akan  berbagi widget email subscribe tetapi dengan multi fungsi yaitu saya menambahkan tombol sosial media seperti tombol facebook, twitter, google plus dan Rss feedburner. Oke langsung saja ke tutorialnya dibawah ini.

Demo

Cara Memasang Widget Social Subscribe di Blogger.

1. Login ke akun blogger seperti biasa.
2. Masuk ke bagian Tata Letak lalu pilih Add Widget
3. Pilih HTML/Javascript
4. Copy kode dibawah ini dan paste

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" class="login" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=pintasku', 'popupwindow', 'scrollbars=yes,width=520,height=520');return true" target="popupwindow">
<ul class="subscribe-faceblog">
<li><a href="URL Facebook sobat" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVv7kVRH5CfjE1zcI8BETFr3Ipa1v7eeG2IkbAno8Q7O-h3e-YFLMOI_N_rSzaAd3sDBbCLMPQv81hH1UJpoK_Ad95eIihbkjOACc-29fqL5BcIGf8gtOXck5Lrs-qAMpnrBk-ZesmzGc/s1600/facebook+tng.png" title="Follow Us on Facebook" /></a></li>
<li><a href="URL Twitter Sobat" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCTujkXv4vhiHarPuG6qyPleRfd22_WsIIOBd9TMwI5AVCNCju-aj-Uv44PCmB1KWV76pq9J6DCMAd3y2SEx5H1tUIgybxE8FyScRRoGibFfIyC-naw6yG0l4fzNOkSDf0QZmmW_AFjzk/s1600/twitter+tng.png" title="Follow Us on Twitter" /></a></li>
<li><a href="URL Google Plus sobat" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4aaA0r0SdoxSh4slklczwuhkkMsxt5OE0iqatzU9NhxtGBN2KI6AythJMnBHPmmjD-e-NyflWnczD5Vv4AnmdUXHLJfTWeDe-AFbxPEXJX-arY09hhkPxPC05yXqngjz7N6nfxaGBUBc/s1600/google+tng.png" title="Follow Us on G+" /></a></li>
<li><a href="URL Feedburnet sobat" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSF1cfIDg49reuw6W3_ZQZDiTB5WOL1REidvlc5kXdfHAn833p-SxEDDuA9dWVk1gjgcY2jBEruelQ2yFu1163F0XtsI16unwcpmrZMAeegtsqrCbdQYDbjjpP5yw39-DigZG-EpNNCok/s1600/rss+tng.png" title="Subscribe Us on RSS Feed" /></a></li>
</ul>
<input name="uri" type="hidden" value="pintasku" />
<input class="txtsubscribe" 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 name="loc" type="hidden" value="en_US" />
<input class="btsubscribe" type="submit" value="Subscribe" />
</form>
</center>
<style>
.login {
padding: 18px 10px;
width: 300px;
background: #F8F8F8;
background-clip: padding-box;
border: 1px solid #D7DBD7;
}
.txtsubscribe {
background: #F8F8F8;
border: 1px solid rgb(197, 192, 192);
color: #999;
font-weight: bold;
padding: 7px 15px 7px 5px;
text-decoration: none;
width: 160px;
margin-top: 10px;
}
.btsubscribe {
background: #353635;
border: 1px solid #848B84;
color: #FFF;
cursor: pointer;
font-weight: bold;
margin-left: 5px;
padding: 6px;
text-decoration: none;
margin-top: 10px;
}
.subscribe-faceblog{
list-style-type:none;
margin:0;
padding:0;
}
.subscribe-faceblog li{
display:inline;
width: 60px;
height:60px;
}
.subscribe-faceblog li img{
width: 40px;
height: 40px;
margin-right: 5px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.subscribe-faceblog li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>


Keterangan : Ganti Tulisan Berwarna merah dengan ID Feedburner dan Warna Biru Dengan URL Sosial Media agan

5. Save dan Lihat Hasilnya.