CARA MEMBUAT WIDGET SUBSCRIBE

CARA MEMBUAT WIDGET SUBSCRIBE

Hellow sobat bloger, kembali lagi seperti hari hari yang terdahulu, kali ini saya akan memposting dan menerangkan cara pembuatan Widget Subcribe v.3 yang baru saja saya rilis. Fitur fitur pada widget subcribe yang baru saya buat ini untuk Versi yang semakin menarik dipandang mata untuk menghiasi blog/web sobat bloger. Fitur fitur widget Subcribe  :

• Facebook
• Google +
• Twitter
• RSS
• FeedCount ( Feedburner )
• See Stat  ( Who.amoung.us )
• Form Subcribe ( Feedburner )

Oke langsung saja menuju TKP.

• Login ke Dasbor
• Pilih Layout  Tata Letak.
• Tambahkan Gadget ( letaknya tergantung anda ) pilih HTML/JavaScript
• Copas code dibawah ini

 <style>

    #rivai_socialwidget {

   border: 1px solid #BDBABA;

width: 290px;

margin-left: -7px;

    }

    .rivai-social{

    padding: 10px 10px 10px 10px;

   border-bottom: 1px solid #EBE2E2;

    }

    .rivai-social img:hover{opacity:0.2}

    .googleplus {

    background: #00fffc;

    border-top: 1px solid white;

    border-bottom: 1px solid #ebebeb;

    font-size: 12px;

    color: #000;

    padding: 9px 11px;

    ine-height: 1px;

    font-family: Verdana, Geneva, sans-serif;

    }

    .TZ {

    background: #ffffff;

    border-top: 1px solid white;

    font-size: 12px;

    color: #000;

    padding: 9px 11px;

    line-height: 1px;

    font-family: Verdana, Geneva, sans-serif;

    }

    .TZ span {

    color: #000;

    font-size: 11px;

    position: absolute;

    margin: -12px 100px;

    width: 310px;

    }

    #widgetbox .author-credit a {

    font-size: 10px;

    font-size: 10px;letter-spacing: 1px;

    color: #1E598E;

    text-decoration: none;

    }

    .email-subscribe-emailbox {

   padding: 5px 13px;

font-family: "Arial","Helvetica",sans-serif;

border-top: 1px solid silver;

border-image: initial;

height: 42px;

background: #fdf68c;

width:none;

    }

    .email-subscribe-emailbox form {width:100%;-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: #d1fff8;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: #999;padding: 7px 10px 8px;width: 100%;-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;}

    .TZDefault {border: 0px solid #dedede;text-shadow: #3d3d3c 1px 1px 0;background-color: #0112b4;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0112b4),color-stop(1,#0112b4));background: -webkit-linear-gradient(center top,#0112b4 0,#0112b4 100%);background: -moz-linear-gradient(center top,#0112b4 0,#0112b4 100%);background: -o-linear-gradient(center top,#ffca00 0,#0112b4 100%);background: -ms-linear-gradient(center top,#0112b4 0,#0112b4 100%);background: linear-gradient(center top,#0112b4 0,#0112b4 100%);}

    .TZDefault:hover {background-color: #0096ff;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0096ff),color-stop(1,#0096ff));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#0096ff 0,#0096ff 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%);}

    </style>

    <div id="rivai_socialwidget">

    <!-- Begin Widget -->

    <div class="rivai-social">

    <!-- social ico -->

    <center>

    <a style="margin-right: 10px;" href="https://www.facebook.com/wayan.susandiarta" target="_blank" rel="nofollow">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghTyqRd1m-7dW8TfWdp4osRvvZgyfsxmsCVVAMGAzwNIH319VLbW0l4D_VRiJAVPVGmbEdpJgtChef8ytjLGeR8RFEjlFLsosKTGcZwLiurtj9QQ6M-NCD9XR7XjR1Lj6DRiz07g8cr8w/s1600/facebook.png" title="Facebook" /></a>

    <a style="margin-right: 10px;" rel="me" href="https://plus.google.com/u/0/104348512139625492677" target="_blank">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJa_LPCAZmTwyCmBEaemMvO7pWdk72gtVqxmpU_WS_a_bPyzwsZVNNn6W6cJYt88v_1jHsPUO_J0sbeZiU0dxHtFk-klivdvJqMhdGQQhR-cZEaFD-GrYAkTAnYTbwBJ5uqF94nk61Bg/s1600/gplus.png" title="Google Plus" /></a>

    <a style="margin-right: 10px;" href="https://twitter.com/@susandiarta" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMBBjH32Tin-yRvyBJEUGQGADQxNAjm5dEAxl5GwPZTmvromHFsRUJBQZlH9izrAm5s1rmT_zqifjCCZlfbyx4JBFAzAhAJQd_e7-NUVHX5meK80H00IuP57kDlBnzraW4_hyphenhyphenmzFUbKVY/s1600/twitter.png" title="Twitter" /></a>

    <a style="margin-right: 10px;" href="http://feeds.feedburner.com/caragratis" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGUOR4iSBgWm1IyAW3w0EXH3hciMuBQr80rV7QPiV4VxjkKYG8i7oxGaYOdG0Ns318JRAOQrW36bLVQ28-JJFbAPY50eZ8WDatugKkcgTqjIXgqZksNSYLbCduOAAx1Uwdo0AxJ8QIng/s1600/RSS-icon.png" title="RSS Feed" /></a>

    </center>

    </div>

    <center>

<div style=';margin-top:5px;'>

    <a href="http://feeds.feedburner.com/caragratis"><img src="http://feeds.feedburner.com/~fc/rivaisilaban?bg=660000&amp;fg=99FF00&amp;anim=1" height="26" width="88" style="border:0" alt="Fellow Readers" /></a> 

<script id="_wauuzz">var _wau = _wau || []; _wau.push(["classic", "6lh1kwyjwbn6", "uzz"]);

(function() {var s=document.createElement("script"); s.async=true;

s.src="http://widgets.amung.us/classic.js";

document.getElementsByTagName("head")[0].appendChild(s);

})();</script></div>

    </center>

    <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=caragratis', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">

    <table width="100%">

    <tbody><tr>

    <td>

    <input class="emailu" name="email" placeholder="Email anda..." type="text" />

    </td>

    <td width="70px">

    <input class="submitu TZDefault" value="Subscribe" type="submit" />

    </td>

    </tr>

    </tbody></table>

    <input name="uri" value="caragratis" type="hidden" />

    <input name="loc" value="en_US" type="hidden" />

    </form>

    </div></div>

Keterangan Gambar

1. Tilisan Bolt Warna Merah ganti dengan URL Social anda sesuai gambar.
2. Code yang diblog warna hijau ganti dengan code FEEDCOUNT anda
3. Code yang diblog warna pink ganti dengan code STAT ONLINE anda
4. Code yang diblog warna biru ganti dengan ID FEEDBURNER anda

H ellow sobat bloger, kembali lagi seperti hari hari yang terdahulu, kali ini saya akan memposting dan menerangkan cara pembuatan Widget Sub...