membuat tombol counter number melayang samping dengan html

Cara membuat tombol share floating di samping halaman web anda.

Pada gambar tersebut menjelaskan bahwa counter number ada di kiri tampilan web anda, dengan demikian anda dapat mempermudah pengecekan counter number terakhir yang ada di system surat ataupun system antrian anda.

berikut code html pembuatan counter number melayang di kiri website:

Contoh 1:
<!-- Counter Number -->
<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;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 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.col/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script>
  <!-- Medium Button -->
 
  <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
   <div class="addbuttons"><a href="#" title="cara membuat tombol share floating di blogspot">
   
<? 
  $this->db->from('no_surat');
$qry = $this->db->get();
foreach($qry->result() as $rowpt){
$no = $rowpt->no;
  ?>
  <span class="getfloat">.: Counter Number :.</span><div style="clear:both"></div><span class="sharebuttons"><h1><b><? echo $no;?></b></h1></span></a> </div> </div>
<? } ?>
<!-- Counter Number -->



Contoh 2:

<!-- Floating social media buttons -->
<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;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.col/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">
<a href="" title="Melayang">
<span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> 
</div>
</div>
<!-- Floating social media buttons -->