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 membuat share media sosial widget di blogger
Cara membuat share media sosial widget di blogger WordPress
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)
7. Klik tombol Save
Jika tombol share facebook tidak bekerja tambahkan kode Javascript ini sebelum tag </ body>
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.
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 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>
#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)
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>
<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.
