Cara Membuat Gabungan Widget Like Facebook, Follow Twitter, Follow on Google+, dan Google+ Untuk Blog

Hai sobat blogger, Apa kabar? kali ini saya akan share Cara Membuat Gabungan Widget Like Facebook, Follow Twitter, Follow Google, dan Google+ Untuk Blog. Sebelumnya saya sudah pernah share cara membuat tombol like facebook , tombol twitter follow box , dan tombol google +1 . Kali ini kita akan menggabungkan semua widget ini menjadi satu widget.
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.
Sumber informasi yang di tulis miring : RegiBrader-Free.Blogspot.com .

Screenshot :

Klik Untuk memperbesar, Save untuk mendownload.

Tertarik membuatnya? Simak tutorialnya dibawah ini.

1. Login ke blog sobat
2. Klik TATA LETAK
3. Klik TAMBAH GADGET
4. Klik HTML/JAVACRIPT
5. Pada kolom konten, isikan kode dibawah ini.

<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/101719595472639209632" rel="publisher" />

    <!-- Place this tag where you want the badge to render -->
<g:plus href="http://plus.google.com/101719595472639209632" 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/pages/Berbagi-Info-Bermanfaat/599741753370599&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://berbagilmubersamaraffi.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/BerbagiInfo_ID">Ikuti @BerbagiInfo_ID</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>

Keterangan Kode:

Biru : Ganti dengan ID Google Plus sobat.
Biru Muda : URL Alamat FansPage Facebook sobat. bagi yang belum punya FP, sobat bisa klik disini (cara ini tercampur dalam satu posting dengan cara membuat Facebook Like Box.
Orange : Ganti dengan URL blog sobat.
Pink : ID Twitter sobat.

ID Google Plus :

Klik Untuk Memperbesar

URL FP Facebook :

Klik Untuk Memperbesar

ID Twitter :

Klik Untuk Memperbesar

6. Setelah semua sudah diedit, terakhir SAVE
7. Lihat hasilnya.

Semoga Info ini Bermanfaat.