Cara Gampang Menciptakan Widget Floating Share Media Sosial

Cara Praktis Membuat Widget Floating Share Media sosial - Hari ini saya akan share tutorial perihal cara menambahkan share kafe media umum floating di blogger. Dalam widget ini telah memasukkan Facebook like, tombol share, Google Plus, Tweet, linkedin dan StumbleUpon, tombol di kafe di masing-masing media umum dilengkapi dengan counter atau penghitung. Saya tidak memakai 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 sanggup melihat widget media umum statis di sebelah kiri posting blog saya. Saya telah memastikan untuk menjaga proses instalasi semudah mungkin. Kami membuatnya sangat gampang untuk diinstal pada blogger bahkan wordpress, sehingga Anda tidak perlu mengedit arahan html blogger Anda. Hanya copy dan pastekan ke dalam HTML / Javascript di kotak gadget.

Cara menciptakan share media umum widget di blogger

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

Cara menciptakan share media umum 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=' ' 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 lalu edit nilai ini. margin-left: -60px;

5. Simpan gadget
6 Tarik gadget dan reposisi di bawah Blog Posts gadget. (Lihat Screenshot bawah untuk mendapat widget menyerupai yang ada di blog ini)

7. Klik tombol Save

Jika tombol share facebook tidak bekerja tambahkan arahan 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 bab 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 saat jendela diubah ukurannya, memilih nilai dalam px (pixel) bukan%.

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

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

Share this post