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.

Yang Keren Lainnya :

Cara Membuat Widget Twitter Follow Box di Blo...

Cara Mengganti Favicon Blog

Cara Membuat Favicon Online

Cara Membuat Widget Jumlah Pengunjung dengan ...

Cara Membuat Widget Facebook Like Box di Blog