Cara Menambahkan Floating Sharing Bar di Blogger dan WordPress Blog

Cara Menambahkan Floating Sharing Bar di Blogger dan WordPress Blog

Cara Menambahkan Floating Sharing Bar di Blogger dan WordPress Blog . Diposting kali ini adalah tutorial tentang cara menambahkan floating ... 22.27.00

Cara Menambahkan Floating Sharing Bar di Blogger dan WordPress Blog. Diposting kali ini adalah tutorial tentang cara menambahkan floating bar media sosial untuk blogger. Dalam widget ini kami telah memasukkan Facebook, tombol seperti Google Plus, Tweet, likedin dan juga memiliki sebuah StumbleUpon, share bar button dan masing-masing dilengkapi dengan counter. Tutorial ini tidak menggunakan script apapun dan widget ini bekerja murni pada CSS dan HTML dan sepenuhnya kompatibel dengan semua browser. Anda dapat melihat widget ini sangat pas ke kiri posting blog. Kami membuatnya sangat mudah untuk diinstal pada blogger bahkan wordpress, sehingga Anda tidak perlu mengubah kode html blogger. Hanya drop seluruh kode ke dalam HTML / Javascript gadget.[ Floating Sharing Bar on Blogger And WordPress Blog ].

Langkah-langkah menambahkan Floating Sharing Bar ke blogger

1. Login ke dashboard blogger Anda.
2. Pilih blogger Tata Letak Anda.
3. Klik Add A Gadget.
4. Didalam Gadget, pilih HTML / Javascript.
5. Copy kode di bawah ini dan paste di dalam kotak konten.

    <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="xxxxxxxxxx" 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://thegressnews.blogspot.com/2013/09/cara-menambahkan-floating-sharing-bar-di-blogger-dan-wordpress-blog.html' rel='nofollow' style='color:#333;'>Get Here</a></p>
    </div>

Catatan: - Anda dapat mengganti xxxxxxxxx yang disorot dalam warna biru dengan nama pengguna twitter Anda ditunjukkan warna biru.


6. Simpan gadget.
7. Tarik gadget dan reposisi di bawah Posting Blog gadget. (Lihat Screenshot bawah)



8. Klik tombol Simpan.
9. Jika dalam kasus facebook tombol seperti tidak bekerja, tambahkan kode Javascript ini tepat sebelum menutup </ body>.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, 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);
}(document, 'script', 'facebook-jssdk'));</script>

Kustomisasi

Keselarasan vertikal:
Pada bagian css pengubahan nilai 30% untuk setiap kebutuhan blog Anda misalnya.

bottom: 25 %;  or bottom: 30%; or bottom: 35%;

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

Keselarasan Horizontal
Untuk menyelaraskan widget lebih ke arah kiri atau kanan kemudian ubah nilai ini.

margin-left: -60px;

Nilai negatif menekan tombol di sebelah kiri dari kolom blog utama, nilai positif mendorong ke kanan.

[source]