Kamis, 08 Januari 2015

Cara Membuat Widget Gabungan Fb, Google Plus dan Twitter Dalam Satu Tempat


Jika anda memperhatikan contoh widget di sebelah kiri, dan anda membandingkannya  dengan widget di sebelah kanan artikel ini, maka terlihat sama persis !!! Benar, karena memang skripnya memang sama, dan widget itulah yang saya pasang untuk mengkombinasikan 3 media sosial dalam 1 kotak sekaligus alias "3 in 1." Tiga media sosial itu adalah yang paling populer dan umum digunakan para blogger untuk menjaring pengunjung dan pelanggan, yakni fb, Twitter dan Google plus. Model ini isinya telah saya modifikasi dengan pilihan aneka warna blog dan ukurannya. Di bawahnya juga saya sertakan model 2 sebagai alternatif jika anda menginginkan model umum.

1. Kelebihan widget "3 in 1" ini adalah:

1.Hemat tempat; karena 3 sosial media yang biasa berdiri sendiri-sendiri, digabung menjadi satu.
2.Meringankan loading blog; jelas lebih cepat dibandingkan jika harus menampilkan 3 macam widget satu persatu.
3.Disukai pengunjung; karena dengan sekali pandang bisa menjangkau catatan tiga medsos sekaligus. 
4.Lebih menarik; karena bisa mengutak-atik warna berbeda untuk setiap medsos.

2. Cara Memasang Skrip Model 1

Anda bisa memasang skrip berikut, syaratnya telah mempunyai akun fanpage fb, Google Plus dan Twitter, jika belum, silakan membuat dulu, sebelum melanjutkan langkah berikutnya, yakni:

1. Login ke blog 
2. Klik TATA LETAK
3. Klik TAMBAH GADGET
4. Klik HTML/JAVACRIPT
5. Pada kolom konten, copas 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%2F
www.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="Mas-kepo.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:
Kuning: warna background, jika hendak merubahnya klik Daftar Warna
Biru : Ganti dengan ID Google Plus anda.
Merah : Ganti  dengan URL Alamat FansPage Facebook anda.
Coklat : Ganti dengan URL blog anda.
Ungu : Ganti dengan ID Twitter anda.
6. Save / Simpan.


Model 2 (Umum)

Model ini adalah yang paling banyak dipakai oleh para blogger, widget sosial di dalamnya juga memiliki isi yang sama: Googel plus, Facebook dan Twitter, anda akan sering menjumpainya dibanyak blog. contoh hasilnya adalah sebagai berikut:

Jika anda menentukan pilihan model 2 ini, silakan anda copas skripnya, sebagai berikut:

    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>

Keterangan:
Ubah kode berwarna merah dengan url Blog anda.
Ubah kode berwarna hijau dengan ID Twitter anda.
Ubah kode berwarna Coklat dengan ID Google Plus anda.
Semoga bermanfaat.
Sumber:

http://mas-kepo.blogspot.com/
http://regibrader-free.blogspot.com/2013/08/gabungan-widget-like-facebook-follow.html

2 komentar:

  1. Salam...
    Menkoversi medsos ke dalam blog.web memang sangat bermanfaat untuk kesehatan trafik.
    Sukses selalu buat web, Mas!

    BalasHapus
  2. terima kasih telah berbagi pengetahuan tentang Cara Membuat Widget Gabungan Fb, Google Plus dan Twitter Dalam Satu Tempat... sangat bermanfaat ilmunya..

    BalasHapus