Cara membuat widget email subscribe v.5.0

Sobat bloger yang masih memperdulikan style blognya, kali ini saya akan memberikan satu script yang memang menarik untuk dimuat diblog/web anda. Email Subcribe kali ini sangat cocok untuk keperluan blog/web anda. Script kali ini saya buat atas permintaan sohib saya yang jauh di negri orang, Kebetulan dia memang seorang manusia yang simpel dan tidak perlu ribet. Makanya kali ini saya membuat script ini dengan berbagai fitur antara lain:

Fitur yang dipakai

• Form Email Subcribe
• Link Feedburner
• Translate icon
• Google +
• Facebook
• Twitter
• RSS

Tutorial kali ini dapat anda gunakan untuk keperluan blog dan juga web yang penting dia berbasih code HTML

Oke semua fitur sudah saya jelaskan sekarang kita menuju TKP :

• Login ke akun anda
• untuk blogger pilih tata letak / layout
• Tempatkan sesuai selera, Pilih element laman anda dengan tambah gadget (add gadget)
• Copas code dibawah ini

<style type='text/css'>
.social a{color: #000000;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {
    color: #333;
    border-color: #FF6600;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    background-color: #FFFF99;
}
.social a:active{color:#000;border-color: #444;}
.sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}
.emailform{margin:16px 0 0; display:block; clear:both;}
.emailtext{margin:10px 0 0;background:#faf7bf ;}
.emailtext:hover{background: #f3f3f3 ;}
.emailtext:focus{outline:none;}
.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:1px 5px; border:1px solid #666;cursor:pointer;background:#fca205}
.sub-button:hover{color:#444;border-color: #999;background:#ccc}

.google_translate img { margin-right:1px;
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.style13 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
}
.style14 {
    font-size: 14;
    font-weight: bold;
}
.email-subscribe-emailbox form {width:250px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
    .email-subscribe-emailbox input.emailu {background: #ccffff;border: 1px solid #BEBEBE;margin-left: -5px;float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;color: #BE7E7E;padding: 7px 10px 8px;width: 250px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 14px;font-weight: bold;}
    .email-subscribe-emailbox input.emailu:focus {color: #333;}
    .email-subscribe-emailbox input.submitu {
    -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 8px 10px;
font-weight: bold;
font-size: 13px;
margin-bottom: 1px;
float: right;
cursor: pointer;
}
    .email-subscribe-emailbox input.submitu:hover {text-decoration: none;}
    .kirimDefault {border: 0px solid #dedede;text-shadow: #3d3d3c 1px 1px 0;background-color: #026766;background: linear-gradient(center top,#026766 0,#026766 250px);background: -webkit-linear-gradient(center top,#026766 0,#026766 100%);background: -moz-linear-gradient(center top,#026766 0,#026766 100%);background: -o-linear-gradient(center top,#393433 0,#393433 250px);background: -ms-linear-gradient(center top,#026766 0,#026766 250px);background: linear-gradient(center top,#026766 0,#026766 100%);}
    .kirimDefault:hover {background-color: #026766;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#026766),color-stop(1,#026766));
    background: linear-gradient(center top,#026766 0,#026766 100%);
    background: -moz-linear-gradient(center top,#026766 0,#026766 100%);
    background: -o-linear-gradient(center top,#0096ff 0,#0096ff 100%);
    background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);
    background: linear-gradient(center top,#0096ff 0,#0096ff 100%);
    font-variant: small-caps;
    color: #FF0000;
}
    .style1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
}
.rivaistyle{/* Rivai Blog  */
list-style-type:none;
margin:0;
padding:0;
}
.rivaistyle li{
display:inline;
width: 60px;
height:60px;
}
.rivaistyle li img{
width: 30px;
height: 30px;
border:0;
margin-right: 4px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.rivaistyle li img:hover{
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
-o-transform:scale(1.2);
}
</style>
<center>
<table width="270" border="0" cellpadding="2" cellspacing="2">
  <!--DWLayoutTable-->
  <tr>
    <td width="262" height="80" align="left" valign="top"  ><div align="justify"><small><small><small><a href='http://feeds.feedburner.com/RivaiSilaban' target='_blank' title='feedburner'><b><small><small><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4FRC3xJewusIs5NZe7YFwgHXwIEfWEW7o_TTrfWID_I-6XVHN-XTD2fG41DlLDdnJO6WnHeeX-HwJ9BcCrKMfv2N6w0a76LTZh32Z_f4cbCwNhhrqfI2li7YoUue_nbEuxLzseZzftg/s1600/Newspaper-db2.png" width="72" height="72" align="right" /></small></small></b></a></small></small></small><small class="style13"> Jika anda suka dengan<br />
      artikel ini <span class="social"><a href='http://feeds.feedburner.com/RivaiSilaban' title='feedburner' target='_blank' class="style14"> click disini</a></span> atau silahkan berlangganan artikel terbaru dari kami</small></div></td>
  <tr>
    <td height="36" align="center" valign="top" ><div>
      <div>
       
        <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivAqg-MFX5ClSzBbTTajISGleEAgz52PTmDdMaZH-9FZxn2pjzMvGjkbRFzv1vY_Y31BchHOAAKKan8t1bg_23XtFPx-GgiZpmd89AK3v3EmzO8amVuSVJcOkxHxGh5zDNUJXelT_aMEo/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
       
        <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Y_Nv7pT4_ZfoeqJd72Hgbxq9m_TVWjjZqXFOm5viy2Byo4LHViCo8Tgvt43_bV5tC99bYCD9K6LYV4cLgyo4yvR432obh7wrzBV-KJMnQSSXLi31H-lATTfsPzPVdGeqI63YnvsO-I4/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
       
        <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5MDTNLLFnU2DhN4iPweJrmS4ZmFRShggWb-woX2Cx6lovTRpC3lJ27zycp5knoa2_26ULQUzh7LQ-68vv1g1o49fJ8W8HiwioCQ63Uz6TeXDt0sB9P6cJUvbZnpJ5G_3Zgy-Cy-hQH5P6/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
       
        <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJuLCcxUzew5-ojP7iL9zdegc2qjB0O-hiKkV38N01_zot0IJ6vbpTS0__bQSNisGEVDdA6quLLEn3pDJCaRGxSDRaKzKueY-KXZlJfuAZH2vR4ri7gfMx_di6HiuZJ-UMVD1liatWHN2g/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
       
        <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNrMOKbUCo5lt-FHyAsglwBXAip2I2VOt7g_xK-tz3yStWIyeg_IhZUZkGNBBFheOSuTd0aBUdWFZGzmseoYs3wXTaVMtlvoYpLxkw5-rMXHf08lyzwmZOArqd9LAbz7sxk5-eAXki9jc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
       
        <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig-j2nKt4v0W1teqKzYz1Z_V1UwgbgqoC8zXCxq05KQRqxFdRup3RNT-Puhf7phrIrYu54rl02EULYOu2p2ze_83ND7jI0izSJeUpXA0S3sjDyWsrXmZWSFlU-LXFrwzIMZ7IndZ7VZNE/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
       
        </div>
    </div></td>
  <tr>
      <td height="95" align="left" valign="top"  ><div class="email-subscribe-emailbox">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RivaiSilaban', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
          <table width="250px">
            <!--DWLayoutTable-->
            <tbody><tr>
              <td height="46" colspan="2" align="right" valign="top" class="email-subscribe-emailbox"><div align="center">
                <input name="uri" value="RivaiSilaban" type="hidden" />
                <input name="loc" value="en_US" type="hidden" />
                <input class="emailu" name="email" placeholder="Enter your email..!!" type="text" />     
              </div></td>
                                                     </tr>
              <tr>
                <td width="138" height="33" valign="top"><div class="rivaistyle">
                  <center>
                    <li><a href="https://plus.google.com/108560124605502700357"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiz2KfevnWsz_NggapVFDCLhh3bhci70qRj9-xAe1uF4QRxQOTufB-XHChsNSvWU6tSHpVdynw-PWvjDWnDHhO-x7XbSkC8yZ7kl7eyV1VZ2MimTtkuFpNCTy0ieFvU5KZtdcGOKkqmlM/s1600/gplus.png" width="24" height="24" title="Add to G+" /></a><a href="https://www.facebook.com/rivaisilaban"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruQZg4boF9diQvgzFiojfNiqJJlh-5hTBNWGnnt93o-oFfGPX4uMdWdCadrhC89YghVbC3lLaErR81V1a8qwyO7fqasj0aqAvGTcBuYvXJCOKvXCHFeKgf2uLobLMBdeQBbj6PXABLpw/s1600/facebook.png" width="24" height="24" title="Add to Facebook" /></a><a href="https://twitter.com/Rivai_Silaban"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmcn3ripx9JS8Cw70vQtTzPeEIovudL8B2DwJqBB1MmTsxsAB83fk6TXj4Dn74QKIr0dF6e8NREXzgFZuGunDE4rfM-CXn6lGyLRC_2jvceHZyhwBuZCaX0knhsSv2CRjBe2yi2iNiWv8/s1600/twitter.png" width="24" height="24" title="Add to Twitter" /></a><a href="http://feeds.feedburner.com/RivaiSilaban"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zcE6z2QFmrohUIGyo26c6v0ap0X7b0cusn8tRw_JCwTZuFDKzOk11uP8UDaQNhXUUlXSJOwUafF_OgsW9kgFlsgx1HNI3NRZRohHlV19uBpj5gkPjtADABI1LCQDLlQw1CTS881pKz8/s1600/RSS-icon.png" width="24" height="24" title="Add RSS Feed" /></a></li>
                    </center>
                </div></td>
                <td width="102" align="right" valign="top"><input class="submitu kirimDefault" value="Subscribe" type="submit" /></td>
              </tr>
           </tbody></table>
        </form>
      </div></td>
  </tr></tr></tr></table>
</center>

Keterangan scrip :

[ https://www.facebook.com/rivaisilaban ] ganti dengan link anda sesuai dengan namanya.

Tulisan biru adalah fungsi translet.

[ RivaiSilaban ]   ganti dengan ID Feedbuener anda, bila anda belum punya silahkan buat akun anda.

Semoga cript ini dapat bermanfaat buat sobat sobat bloger, bila ada kekurangan dan kesalahan scripnya silahkan komentari melalui kotak komentar dibawah dengan ikhlas saya akan membantu.Bila anda butuh untuk tampilan email subcribe yang lain silahkan lihat disini

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:23 AM