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>

Saya hanya share widget dengan script yang telah ada, yang telah dibuat kawan Blogger lain sebelumnya. Widget ini cocoknya dipasang pada sidebar dengan lebar sekurang-kurangnya 300px. Kecuali untuk para Blog master, mungkin widget ini bisa dipasanng dimanapun ia inginkan. Silakan, edit lebih lanjut widget ini jika memang sobat bisa.

Namun saya tidak khawatir, kebanyakan Blogger menggunkan sidebar yang tidak kurang dari 300px.
Keterangan:
Ubah kode berwarna merah dengan url Blog sobat.
Ubah kode berwarna hijau dengan ID Twitter sobat.
Ubah kode berwarna orange dengan ID Google Plus sobat.

Ubah kode berwarna biru dengan alamat halaman Fanspage Facebook sobat.
Kalau sobat belum punya halaman Fanspage Blog sobat di Facebook, tentunya sobat harus buat dulu. Silakan baca panduanya, klik disini.

6. Jika kode telah diletakan dan selesai disesuaikan, maka klik Simpan.

Silakan lihat hasilnya, semoga berhasil.

Ranking: 5