HOMECara Mudah Membuat Widget Floating Share Media sosial
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 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.
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips & Cara
 |
Artikel Terkait Dengan "Cara Mudah Membuat Widget Floating Share Media sosial "
8 comments:
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
Admin Tips & Cara
Menarik untuk disimak gan blog dan artikelnya...
ReplyDeleteArtikelnya sangat bermanfaat, mampir juga ke blog saya ya
Deletehttp://www.idcheat.com/
http://giribig.com/
udah punya gan...dari yang laen
ReplyDeleteWah makasih ya atas infonya, ternyata gitu to caranya masang...Itu untuk blogspot dan wordpress sama ya gan??
ReplyDeleteSalam kenal dari Pembicara Internet Marketing Bandung ya..
Kelas Dosen Jualan yow jelas beda to gan, blogspot menggunakan full HTML sedang wordpress pake PHP+HTML kok, wordpress pake plugin....
Deletemenarik sekali kang artikelnya :)
ReplyDeletesaya membuat http://tv.filomenaweb.com , mau dipasang widget ini, semoga yang ngelike byk hehe
Kukuh Amiin gan semoga blog agan ramai pengunjung....
Deleteterima kasih kang,,
ReplyDeleteartikelnya cukup membantu,,,
izin pake kan gan..??
ditunggu kunjungannya gan http://www.tutorsku.blogspot.com/
newbe gan..