Cara Memasang Tombol Shere Berbagai Warna di Samping Blog

       tombol share adalah tombol yang kita gunakan untuk membagikan dan mempromosikan postingan atau blog web kita ke facebook,twitter,dsbbahkan tombol share ini bisa di gunakan oleh teman atau pembaca kita yang mrnyukai postingan dan blog/web kita untuk memproosikan web/blog kita!! udah 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://www.asah-ilmu.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://www.asah-ilmu.com/2014/03/cara-memasang-tombol-shere-berbagai.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://www.asah-ilmu.com/ -->

Red

<!-- Floating social media buttons by http://www.asah-ilmu.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://www.asah-ilmu.com/2014/03/cara-memasang-tombol-shere-berbagai.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://www.asah-ilmu.com/ -->

Blue

<!-- Floating social media buttons by http://www.asah-ilmu.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://www.asah-ilmu.com/2014/03/cara-memasang-tombol-shere-berbagai.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://www.asah-ilmu.com/ -->

Black

<!-- Floating social media buttons by http://www.asah-ilmu.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://www.asah-ilmu.com/2014/03/cara-memasang-tombol-shere-berbagai.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://www.asah-ilmu.com/ -->

Green

<!-- Floating social media buttons by http://www.asah-ilmu.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://www.asah-ilmu.com/2014/03/cara-memasang-tombol-shere-berbagai.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://www.asah-ilmu.com/ -->

Orange

<!-- Floating social media buttons by http://www.asah-ilmu.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://www.asah-ilmu.com/2014/03/cara-memasang-tombol-shere-berbagai.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://www.asah-ilmu.com/ -->

Yellow

<!-- Floating social media buttons by http://www.asah-ilmu.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://www.asah-ilmu.com/2014/03/cara-memasang-tombol-shere-berbagai.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 byhttp://www.asah-ilmu.com/ -->

White

<!-- Floating social media buttons by http://www.asah-ilmu.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://www.asah-ilmu.com/2014/03/cara-memasang-tombol-shere-berbagai.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://www.asah-ilmu.com/ -->

6.Simpan/save.

Sekarang lihat hsilnya.