Cara Membuat Tombol Share Sosial Media Buttons Melayang di Kiri Blog
Sesuai gambar diatas, yang dipanah kebawah. Merupakan Tombol Share Sosial Media Buttons. Merupakan Tombol Share kedua yang saya gunakan. Yang pertama adalah dibagian bawah postingan. Dan yang kedua adalah Tombol Share Sosial Button Melayang di Kiri Blog. Jika anda tertarik dan ingin memperganteng blog anda sebaiknya pasang.
Baca Juga : Cara Memasang Tombol Share Button, Responsive!
Mungkin tombol share ini sudah tidak asing lagi dikalangan web atau situs, karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya adalah agar pengunjung dapat membagikan sebuah postingan anda di Facebook atau Twitter bahkan juga Google Plus dan Sosial Media yang lainnya. Oke langsung saja kita praktekan..
Cara Pertama :
1. Buka Blogger - Login Blogger!
2. Dashboard - Tata Letak
3. Tambahkan Gadget Seterah dimana saja.
4. Pilih HTML Java Script.
5. Copy & Paste Kode berikut ini.
<!-- Floating social media buttons by MayCyber-Download --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px solid #808080;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
</div>
<!-- End Floating social media buttons by Maycyber-Download --></div>
<div id='floatingbuttons' title="Share this post!">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
</div>
<!-- End Floating social media buttons by Maycyber-Download --></div>
6. Simpan !
Dan Taraaaa, Jadilah Tombol Share Buttons Melayang di Kiri Blog.
Bagaimana? Mudah bukan! Sekian dari saya, Semoga Bermanfaat!
Related Post
kok ga bisa di copy mass??
ReplyDeleteMohon Maaf mas, untuk kotak script HTML biasa memang tidak bisa di copy&paste. Tapi mas bisa copy&paste kode script dengan kotak HTML Heiglight Syntax. Nanti akan segera update :-)
Delete