Pada saat share ama mahaguru masterendi ada salah satu widget yang menarik.Widget yang ingin saya bagikan kali ini adalah widget subscribe email ditambah dengan icon twitter, facebook dan RSS feed, yang pastinya menarik. Gambar dibawah adalah gambar demo dari widget ini.
Untuk sobat yang tertarik ingin mencoba berikut langkah-langkah mudah Membuat form subscribe dengan icon :
1. Login ke dasbor blog sobat
2. Buka tata letak
3. Add gadget --> HTML/JavaScript
4. Copy dan paste kode berikut ke dalam kotak tersebut
<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 280px;
margin:10px 0 0 20px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/pages/mastercommunity" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dVIXwRsymESv_OG7aFgqzSgLv95YNquGkMpEa5j9E_ggzI6dE0GtKqtZQAKMthMaea2ifnmAY5KjV9YKoWinO7MW5Bpr50XjODwGFXWK3q2DULVwmSfx8TBvkVX_SeiulPFGON1GeknX/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/muhammadendi" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju7F9NKEe8jwGFjf2Wx4gwWgtRFj5uT0wW8o6VuWwsXGmO-HPJKPbkb6KWpWXSq2rtFuCCgjtfBIgGAB1WjDQ5R0xU1cEeFWvCI_E3SxI2GcOp1YwuViSSEo2V7g8n2VM_RkdxlEJphnqL/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/masterendi" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1rxHF9rBFHkJi9uyLHLFzw9y42y23NyAvYaoOsDJgXLtd6bCSeBC0ZA6vFiCD-Ds8BgwTUrM9BDV9qwwqIMkAPIJt6fkMq0Te5wx13_avBCBXcg-TIWAl8qWSzJZKTlvkepsECJ0F7rqA/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/108953853716795793495/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicR4FDhJ4BJ-G__Z8r-QkyCN6odk2ovAEhWXc036-ohCZrUM74ZRkUJ8iIJWLc05ICvOxeWdskrW0SprPb7k5rhkxIG0clIb4tQexu33UCpYu44D9IwEqXPVNlnGqqFN7UHpaVYdTnJH3Q/s1600/google-48.png" /></a></td>
</tr></table>
</div>
<style>
.rssbuttontable
{
border: 1px solid #E6E6E6;
background: #FFDCB1;
float: center;
width: 270px;
margin-left:10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
height: 35px;
float: left;
display: inline;
margin-top:5px;
margin-bottom:5px;
}
input.Subscriberssbutton
{
background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600));
border: 1px solid #FF6600;
text-transform: none;
font:bold 13px arial;
color: #fff;
height: 30px;
padding: 4px 2px 5px 2px;
margin: 0px 0 0x 0px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
display: inline;
}
</style>
<table class="rssbuttontable">
<tr>
<td>
<a rel="nofollow" href="http://feeds.feedburner.com/masterendi"><img src="http://feeds.feedburner.com/~fc/masterendi?bg=FF6600&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" />
</a>
</td>
<td>
<input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open('http://feedburner.google.com/fb/a/mailverify?uri=masterendi', 'popupwindow', 'scrollbars=yes,width=650,height=570');return true" /></td></tr></table>
Keterangan:
ganti username warna merah sesuai dengan username akun sobat.
5. SAVE dan lihat hasil.
