Cara Membuat Tombol Share Lengkap Di BLOG (Plih Warnamu Sendiri)

Pagi sob,pagi ini saya mau update postingan tentang Memasang Tombol Share Melayang Dan Pilih Warnamu Sendiri sebelumnya saya pernah membahas Cara Cepat Membuat Tombol Share Di Blog. sobat blogger pasti tau dong tombol share??? bagi yang belum tauj, tombol share adalah tombol yang kita gunakan untuk membagikan dan mempromosikan postingan atau blog web kita ke facebook,twitter,dsb. bahkan tombol share ini bisa di gunakan oleh teman atau pembaca kita yang mrnyukai postingan dan blog/web kita untuk memproosikan web/blog kita!!
dah pada ngerti kan??? ok dah ini saya ada beberapa tombol share melayang dan beberapa warna,silahkan sobat pilih.sesuai selera sobat.

Cara Pemasangannya:
1.Masuk ke akun blog sobat.
2.Pilih tab Rancangan.
3.Lalu Klick Tambah Gadget.
4.Pilih HTML/Java Script.
5.Masukkan salah satu kode script di bawah ini.

Silver

<!-- Floating social media buttons by http://shootsoul.blogspot.com/ --> <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; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:15%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-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; color:#fff; font-size:9px; text-align:center; padding-top:5px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#fff; background:none; } .addbuttons a:hover { color:#fff; background:none; } .sharebuttons { font-size:8px; } </style> <div id='floatingbuttons' title="Share this post!"> <div class='floatbutton' id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <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 --> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> </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"> <a href="http://shootsoul.blogspot.com/2012/09/cara-membuat-tombol-share-lengkap-di.html" title="Add floating social media share buttons to your blog!">Get floating<br /><span class="sharebuttons">share buttons</span></a> </div> </div> <!-- end Floating social media buttons by http://shootsoul.blogspot.com/ -->

Red

<!-- Floating social media buttons byhttp://shootsoul.blogspot.com/ --> <style> #floatingbuttons { background: #C12424; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424)); background: -moz-linear-gradient(top, #F54F4F, #C12424); border: 1px solid #B31919; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:15%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-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; color:#fff; font-size:9px; text-align:center; padding-top:5px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#fff; background:none; } .addbuttons a:hover { color:#fff; background:none; } .sharebuttons { font-size:8px; } </style> <div id='floatingbuttons' title="Share this post!"> <div class='floatbutton' id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <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 --> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> </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"> <a href="http://shootsoul.blogspot.com/2012/09/cara-membuat-tombol-share-lengkap-di.html" title="Add floating social media share buttons to your blog!">Get floating<br /><span class="sharebuttons">share buttons</span></a> </div> </div> <!-- end Floating social media buttons by http://shootsoul.blogspot.com/ -->

Blue

<!-- Floating social media buttons by http://shootsoul.blogspot.com/ --> <style> #floatingbuttons { background: #295698; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3980E6), color-stop(1, #295698)); background: -moz-linear-gradient(top, #3980E6, #295698); border: 1px solid #1E4A8A; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:15%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-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; color:#fff; font-size:9px; text-align:center; padding-top:5px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#fff; background:none; } .addbuttons a:hover { color:#fff; background:none; } .sharebuttons { font-size:8px; } </style> <div id='floatingbuttons' title="Share this post!"> <div class='floatbutton' id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <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 --> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> </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"> <a href="http://shootsoul.blogspot.com/2012/09/cara-membuat-tombol-share-lengkap-di.html" title="Add floating social media share buttons to your blog!">Get floating<br /><span class="sharebuttons">share buttons</span></a> </div> </div> <!-- end Floating social media buttons by http://shootsoul.blogspot.com/ -->

Black

<!-- Floating social media buttons by http://otowebsite.blogspot.com --> <style> #floatingbuttons { background: #333; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #656565), color-stop(1, #333)); background: -moz-linear-gradient(top, #656565, #333); border: 1px solid #222; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:15%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-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; color:#fff; font-size:9px; text-align:center; padding-top:5px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#fff; background:none; } .addbuttons a:hover { color:#fff; background:none; } .sharebuttons { font-size:8px; } </style> <div id='floatingbuttons' title="Share this post!"> <div class='floatbutton' id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <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 --> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> </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"> <a href="http://shootsoul.blogspot.com/2012/09/cara-membuat-tombol-share-lengkap-di.html" title="Add floating social media share buttons to your blog!">Get floating<br /><span class="sharebuttons">share buttons</span></a> </div> </div> <!-- end Floating social media buttons by http://shootsoul.blogspot.com/ -->

Green

<!-- Floating social media buttons by http://shootsoul.blogspot.com/ --> <style> #floatingbuttons { background: #80A81C; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A1D423), color-stop(1, #80A81C)); background: -moz-linear-gradient(top, #A1D423, #80A81C); border: 1px solid #739619; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:15%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-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; color:#fff; font-size:9px; text-align:center; padding-top:5px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#fff; background:none; } .addbuttons a:hover { color:#fff; background:none; } .sharebuttons { font-size:8px; } </style> <div id='floatingbuttons' title="Share this post!"> <div class='floatbutton' id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <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 --> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> </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"> <a href="http://shootsoul.blogspot.com/2012/09/cara-membuat-tombol-share-lengkap-di.html">Get floating<br /><span class="sharebuttons">share buttons</span></a> </div> </div> <!-- end Floating social media buttons by http://shootsoul.blogspot.com/ -->

Orange

<!-- Floating social media buttons by http://shootsoul.blogspot.com/ --> <style> #floatingbuttons { background: #C15F24; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F58D4F), color-stop(1, #C15F24)); background: -moz-linear-gradient(top, #F58D4F, #C15F24); border: 1px solid #B35319; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:15%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-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; color:#fff; font-size:9px; text-align:center; padding-top:5px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#fff; background:none; } .addbuttons a:hover { color:#fff; background:none; } .sharebuttons { font-size:8px; } </style> <div id='floatingbuttons' title="Share this post!"> <div class='floatbutton' id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <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 --> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> </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"> <a href="http://shootsoul.blogspot.com/2012/09/cara-membuat-tombol-share-lengkap-di.html" title="Add floating social media share buttons to your blog!">Get floating<br /><span class="sharebuttons">share buttons</span></a> </div> </div> <!-- end Floating social media buttons by http://shootsoul.blogspot.com/

Yellow

<!-- Floating social media buttons by http://shootsoul.blogspot.com/ --> <style> #floatingbuttons { background: #FFF19D; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF8CA), color-stop(1, #FFF19D)); background: -moz-linear-gradient(top, #FFF8CA, #FFF19D); border: 1px solid #F1E7AC; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:15%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-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; color:#fff; font-size:9px; text-align:center; padding-top:5px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#000; background:none; } .addbuttons a:hover { color:#000; background:none; } .sharebuttons { font-size:8px; } </style> <div id='floatingbuttons' title="Share this post!"> <div class='floatbutton' id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <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 --> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> </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"> <a href="http://shootsoul.blogspot.com/2012/09/cara-membuat-tombol-share-lengkap-di.html" title="Add floating social media share buttons to your blog!">Get floating<br /><span class="sharebuttons">share buttons</span></a> </div> </div> <!-- end Floating social media buttons by http://shootsoul.blogspot.com/

White

<!-- Floating social media buttons by http://shootsoul.blogspot.com/ --> <style> #floatingbuttons { background: #F9F9F9; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9)); background: -moz-linear-gradient(top, #fff, #F9F9F9); border: 1px solid #ccc; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:15%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-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; color:#000; font-size:9px; text-align:center; padding-top:5px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#000; background:none; } .addbuttons a:hover { color:#000; background:none; } .sharebuttons { font-size:8px; } </style> <div id='floatingbuttons' title="Share this post!"> <div class='floatbutton' id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <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 --> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> </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"> <a href="http://shootsoul.blogspot.com/2012/09/cara-membuat-tombol-share-lengkap-di.html" title="Add floating social media share buttons to your blog!">Get floating<br /><span class="sharebuttons">share buttons</span></a> </div> </div> <!-- end Floating social media buttons by http://shootsoul.blogspot.com/

6.Simpan/save.
Sekarang lihat hsilnya.
baca juga articles saya yang lainnya ya sob.