Cara Mudah Membuat Widget Floating Share Media sosial

Posted By : Posted on - 5:25:00 AM with 8 comments

Cara Mudah Membuat Widget Floating Share Media sosial - Hari ini saya akan share tutorial tentang cara menambahkan share bar media sosial floating di blogger. Dalam widget ini telah memasukkan Facebook like, tombol share, Google Plus, Tweet, linkedin dan StumbleUpon, tombol di bar di masing-masing media sosial dilengkapi dengan counter atau penghitung. Saya tidak menggunakan script dan widget ini bekerja murni pada CSS dan HTML dan sepenuhnya kompatibel dengan semua browser internet.

Baca juga artikel terkait lainnnya:
- Membuat Widget FB Like
- Membuat floating FB Like
- Membuat Floating Langganan Email RSS

Anda dapat melihat widget media sosial statis di sebelah kiri posting blog saya. Saya telah memastikan untuk menjaga proses instalasi semudah mungkin. Kami membuatnya sangat mudah untuk diinstal pada blogger bahkan wordpress, sehingga Anda tidak perlu mengedit kode html blogger Anda. Hanya copy dan pastekan ke dalam HTML / Javascript di kotak gadget.

Cara Mudah Membuat Widget Floating Share Media sosial

Cara membuat share media sosial widget di blogger

  • Login ke akun dashboard blogger Anda.
  • Klik Layout.
  • Klik Tambahkan sebuah Gadget, pilih HTML / Javascript.
  • Salin kode di bawah ini dan pastekan di dalam kotak konten.

Cara membuat share media sosial widget di blogger WordPress

  • Log in ke Dashboard> Appearance> Widgets> Widgets Tersedia.
  • Tarik widget Text ke sidebar.
  • Paste dalam kode.
  • Simpan.

 <style type="text/css">
    #floating_bar {
    background-color:#fff;
    position:fixed;
    padding:0 0 3px 0;
    bottom: 30%;
    margin-left:-60px;
    float:left;
    border: 1px dotted #f7f7f7;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    z-index:10;
    }
    #floating_bar {
    clear:both;
    }
    </style>
    <div id='floating_bar'>
    <div style='margin:10px 0 5px 13px;' id='like'>
    <div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
    </div>
    <div style='margin:0px 0 0 10px;' id='gplusone'>
    <g:plusone size="tall"></g:plusone>
    </div>
    <div style='margin:5px 5px 5px 6px;'>
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="sharetipsdancara" data-lang="en" data-count="vertical">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </div>
    <div style='margin:5px 5px 5px 5px;' id='linkedin'>
    <script src='http://platform.linkedin.com/in.js' type='text/javascript'></script>
    <script data-counter='top' type='IN/Share'></script>
    </div>
    <div style='margin:0 0 10px 11px; id='su'>
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
    </div>
    <p style='line-height:0px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://sharetipsdancara.blogspot.com/2014/09/cara-mudah-membuat-widget-floating.html' rel='nofollow' style='color:transparent;'> Get Widget</a></p>
    </div>

Catatan: Ganti nama yang saya tandai dengan warna hitam tebal (sharetipsdancara) dengan nama pengguna twitter Anda.
Untuk menyelaraskan widget lebih ke arah kiri atau kanan kemudian edit nilai ini. margin-left: -60px;

5. Simpan gadget
6 Tarik gadget dan reposisi di bawah Blog Posts gadget. (Lihat Screenshot bawah untuk mendapatkan widget seperti yang ada di blog ini)
Cara Mudah Membuat Widget Floating Share Media sosial

7. Klik tombol Save

Jika tombol share facebook tidak bekerja tambahkan kode Javascript ini sebelum tag </ body>

     <div id = "fb-root"> </ div>
     <script> (function (d, s, id) {
       js var, Fjs = d.getElementsByTagName (s) [0];
       if (d.getElementById (id)) return;
       js = d.createElement (s); js.id = id;
       js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
       fjs.parentNode.insertBefore (js, Fjs);
     } (dokumen, 'skrip', 'facebook-jssdk')); </ script>


Kustomisasi

Vertical Alignment:
Pada bagian css mengubah nilai 30% untuk yang lain yang merupakan kebutuhan blog Anda misalnya.

bottom: 25%; atau bottom: 30%; atau bottom: 35%;

Untuk memperbaiki jarak bahkan ketika jendela diubah ukurannya, menentukan nilai dalam px (pixel) bukan%.

Penyelarasan Horizontal
Untuk menyelaraskan widget lebih ke arah kiri atau kanan kemudian edit nilai ini. margin-left: -60px; Nilai negatif mendorong tombol di sebelah kiri kolom blog utama, nilai positif mendorong ke kanan.

Silahkan jika mempunyai saran kritik atau kesulitan dalam memasang widget ini silahkan berkomentar di kotak form komentar yang telah disediakan. Dengan senang hati saya akan menjawab dan membantu pertanyaan anda. Semoga artikel diatas berguna da bermanfaat, terima kasih.

8 comments:

  1. Menarik untuk disimak gan blog dan artikelnya...

    ReplyDelete
    Replies
    1. Artikelnya sangat bermanfaat, mampir juga ke blog saya ya
      http://www.idcheat.com/
      http://giribig.com/

      Delete
  2. Wah makasih ya atas infonya, ternyata gitu to caranya masang...Itu untuk blogspot dan wordpress sama ya gan??
    Salam kenal dari Pembicara Internet Marketing Bandung ya..

    ReplyDelete
    Replies
    1. Kelas Dosen Jualan yow jelas beda to gan, blogspot menggunakan full HTML sedang wordpress pake PHP+HTML kok, wordpress pake plugin....

      Delete
  3. menarik sekali kang artikelnya :)
    saya membuat http://tv.filomenaweb.com , mau dipasang widget ini, semoga yang ngelike byk hehe

    ReplyDelete
    Replies
    1. Kukuh Amiin gan semoga blog agan ramai pengunjung....

      Delete
  4. terima kasih kang,,
    artikelnya cukup membantu,,,
    izin pake kan gan..??
    ditunggu kunjungannya gan http://www.tutorsku.blogspot.com/
    newbe gan..

    ReplyDelete

Ketentuan Berkomentar:

1. Menautkan link aktif (anchor text) pada komentar secara otomatis akan kami hapus
2. Gunakan fasilitas Name/URL untuk menempatkan link anda
3. Dilarang berkomentar diluar topik artikel (SARA, pornography, provokasi,promosi produk)
4. Dilarang komentar spam
5. Berkomentarlah dengan baik dan sopan
6. Komentar yang tidak sesuai dengan poin diatas tidak akan dipublikasikan


                                                                                                   Terima Kasih, Admin Tips & Cara