Membuat Banner Full Fanspage cantik

Sahabat Singo's Blog, pagi yang cerah ini tapi suasana suram di PKL saya ingin membagikan tips sederhana bagaimana cara membuat gadget fanspage yang aduhai..oklah.. tanpa basa-basi langsung caps cus...


Langkah pertama anda masuk ke menu design>page elements>add a gadget>HTML/javascript..


lalu masukkan kode di bawah ini:
-----------------------------------------------------------------------------------------------------------------------------
<style type="text/css">
/*<!CDATA[*/
#w2b-mashable{width:320px;margin:auto;padding:0;}
.w2b-googleplus {height: 57px;}
.w2b-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.w2b-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.w2b-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.w2b-twitter a.twitter-follow-button {display: block;}
.w2b-twitter iframe {margin: 9px 11px;}
.w2b-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.w2b-sociallinks a {text-shadow: 1px 1px white;}
.w2b-sociallinks .w2b-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.w2b-sociallinks .w2b-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-EP6wfOWEMcurMYhfWW05a1VOLHYXSsP-TP5GcgraaBwjSwqWV3CbMHM258Rg3lMWNEvK3v9VpHC9d80b7NX-2GBMsxrVII-7AnvkIG2hvm57iVl-zPb6rI0vRsgH-4CdVQ1N96UkSEbE/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.w2b-sociallinks .w2b-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.w2b-sociallinks .w2b-social li a:hover {text-decoration: underline;}
.w2b-sociallinks .w2b-social li.twitter {background-position: 0 -150px !important;}
.w2b-sociallinks .w2b-social li.facebook {background-position: 0 -450px !important;}
.w2b-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.w2b-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;}
.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.w2b-emailbox input.emailu:focus {color: #333;}
.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.w2b-emailbox input.submitu:hover {text-decoration: none;}
.w2bDefault {border: 1px solid #cc7c00;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.w2bDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="w2b-mashable">
    <div class="w2b-googleplus">
        <script type="text/javascript">
        /*<![CDATA[*/
        window.___gcfg = {lang: 'en'};
        (function(){
            var po = document.createElement("script");
            po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(po, s);
        })();
        /*]]>*/
        </script>
        <div class="g-plus" data-href="https://plus.google.com/101044849861470073015" data-width="300" data-height="69" data-theme="light"></div>
    </div>
    <div class="w2b-facebook">
        <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FSingos-Blog%2F140694495993878&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
    </div>
    <div class="w2b-gplusone">
        <script type="text/javascript">/*<![CDATA[*/
          (function() {
        var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
        po.src = "https://apis.google.com/js/plusone.js";
        var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
          })();/*]]>*/
        </script>
        <div class="g-plusone" data-size="medium" data-href="http://nyem2nyem.blogspot.com/"></div>
        <span>Recommend on Google</span>
    </div>
    <div class="w2b-twitter">
        <a href="https://twitter.com/sandyhackers" class="twitter-follow-button" data-show-count="true">Follow @sandyhackers</a>
        <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
    </div>
    <div class="w2b-sociallinks">
        <ul class="w2b-social">
        <li class="twitter"><a href="http://www.twitter.com/sandyhackers">Twitter</a></li>
        <li class="facebook"><a href="http://www.facebook.com/singo07">Facebook</a></li>
        </ul>
    </div>
    <div class="w2b-emailbox">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=suaragemilang&apos', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
        <table width="100%">
            <tr>
            <td>
                <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
            </td>
            <td width="64px">
                <input class="submitu w2bDefault" type="submit" value="Subscribe"/>
            </td>
            </tr>
        </table>
        <input name="uri" type="hidden" value="singo07"/>
        <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>
    <div class="w2b-moresubs">
       
    </div>
    </div>
----------------------------------------------------------------------------------------------------------------------------------
-ganti warna  orange dengan lebar widget blog anda
-ganti warna hijau dengan tinggi widget ini 
-ganti warna merah dengan url fanspage, twitter dan Google+ Anda...


hehehheheheh
sekian klo kepengin bantuan comeng ajwah....
jadinya pasti keren....