Gabungan Widget Like Facebook, Follow Twitter, dan Google+ untuk Blog

Saya pernah membagikan cara membuat widget tombol like facebook, tombol follow me twitter, dan tombol google +1. Kali ini saya akan bagikan salah satu hasil penggabungan widget-widget tersebut dalam satu buah widget, dengan ditambah satu widget lagi yaitu follow on google+.
Tujuan dibuatnya widget ini adalah, mengumpulkan widget-widget sosial pada satu area, sehingga pengunjung akan lebih mudah menemukan widget sosial pada Blog sobat. Selain itu juga agar tata letak widget terlihat rapih, karena widget-widget sosial ini diletakan dalam sebuah tampilan kotak, dan dalam tampilan kotak tersebut setiap widget-nya memiliki ruang masing-masing. OK, untuk lebih jelasnya coba perhatikan screenshot widget tersebut di bawah ini.

Bagaimana? sobat suka dan ingin menerapkanya di blog sobat? Silakan ikuti langkah-langkah berikut ini.
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut.

<style>
        /* Social Widget */
        #ForYouFree-bar {
            border: 0;
            margin-bottom: 10px;
            margin: 0 auto;
                width:300;
        }
        .fb-likebutton {
            background: #fff;
            padding: 10px 13px 0 10px;
            border-right: 1px solid #D8E6EB;
           border-left: 1px solid #D8E6EB;
           border-bottom: 1px solid #D8E6EB;
            margin:0px;
                height:45px;
        }
        .googleplus {
            background: #F5FCFE;
            border-top: 1px solid #FFF;
            border-bottom: 1px solid #ebebeb;
            border-right: 1px solid #D8E6EB;
            border-left: 1px solid #D8E6EB;
            border-image: initial;
            font-size: .90em;
            font-family: "Arial","Helvetica",sans-serif;
            color: #000;
            padding: 9px 11px;
            line-height: 1px;}
        .googleplus span {
            color: #000;
            font-size: 11px;
            position: absolute;
            display:inline-block;
            margin: 9px 70px;}
        .g-plusone {    float: left;}
    .gplus {
            background: #fff;
            padding: 0px;
            border: 0px solid #C7DBE2;
            margin-bottom:-13px;}

        .twitter {
            background: #EEF9FD;
            padding: 10px;
            border: 1px solid #C7DBE2;
            border-top: 0;}
</style>

    <!--begin of social widget-->
<div style="margin-bottom:10px;">
<div id="ForYouFree-bar" >

    <!-- Google Plus-->
    <div class="gplus"> <link href="http://plus.google.com/116159611196713950391" rel="publisher" />

    <!-- Place this tag where you want the badge to render -->
<g:plus href="http://plus.google.com/116159611196713950391" width="300" height="69" margin="0px" theme="light"></g:plus>
</div>

    <div class="fb-likebutton">
    <!-- Facebook -->
    <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com/braderblog&amp;send=false&amp;layout=standard&amp;width=230&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=142184962628769" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:80px;" allowtransparency="true"></iframe>
</div>

    <div class="googleplus">
    <!-- Google -->
<g:plusone size="standard" annotation="inline" width="300" href="http://regibrader-free.blogspot.com"></g:plusone>
</div>

    <div class="twitter">
    <!-- Twitter -->
<a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/Regy_Brader">Ikuti @Regy_Brader</a>
<script>!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></div>