telah di uji coba [bekerja]
Compatible Browsers ;IE7, IE8, IE9, Firefox, Safari, Chrome
<div id="sticky">
<!--BUTTON KIRI-->
<!--tab 1 menu-->
<ul id="example-1" class="sticklr">
<li>
<a href="#" class="icon-tag" title="isi kalimat"></a>
<ul>
<li class="sticklr-title"><a href="#">isi judul</a> </li>
<li><a href="/" class="icon-amazon">1 isi sesuatu disini</a></li>
<li><a href="/" class="icon-flickr">2 isi sesuatu disini</a></li>
<li><a href="/" class="icon-facebook">3 isi sesuatu disini</a></li>
<li><a href="/" class="icon-google">4 isi sesuatu disini</a></li>
</ul>
<ul>
<li><a href="/" class="icon-reddit">5 isi sesuatu disini</a></li>
<li><a href="/" class="icon-lastfm">6 isi sesuatu disini</a></li>
<li><a href="/" class="icon-technorati">7 isi sesuatu disini</a></li>
<li><a href="/" class="icon-yahoo">8 isi sesuatu disini</a></li>
<li><a href="/" class="icon-dribbble">9 isi sesuatu disini</a></li>
</ul>
</li>
<!--tab 2 search-->
<li><a href="#" class="icon-zoom" title="Search"></a>
<ul>
<li><form action="http://www.google.com/search" method="GET">
<input type="text" name="q" value="" placeholder="ubah,,link ini ke google.." /><!-- Type then press Enter..-->
</form></li>
</ul>
</li>
<!--tab 3 menu-->
<li><a href="#" class="icon-sitemap" title="isi kaliamat"></a>
<ul>
<li class="sticklr-title"><a href="#">isi judul</a></li>
<li><a href="/" class="icon-amazon">ActiveDen</a></li>
<li><a href="/" class="icon-flickr">AudioJungle</a></li>
<li><a href="/" class="icon-facebook">ThemeForest</a></li>
<li><a href="/" class="icon-google">VideoHive</a></li>
<li><a href="/" class="icon-reddit">GraphicRiver</a></li>
</ul>
</li>
<!--tab 4 email-->
<li><a href="#" class="icon-login" title="Sign-in"></a>
<ul>
<li class="sticklr-title"><a href="#">ubah ini hanya contoh</a>
</li>
<li>
<form action="http://www.google.com/" method="POST">
<input type="text" name="username" value="" placeholder="username" />
<input type="password" name="password" value="" placeholder="password" />
<input type="submit" name="submit" value="Submit" />
</form>
</li>
</ul>
</li>
<!--tab 5 kalender-->
<li>
<a href="#" class="icon-calendar" title="Calendar"></a>
<ul>
<li class="sticklr-title"><a href="#">ubah tipe , hanya contoh</a></li>
<li>
<table class="calendar">
<tr><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr><tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr><tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr><tr><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td></td><td></td></tr>
</table>
</li>
</ul>
</li>
<!--tab 6 notifikasi-->
<li><a href="#" class="icon-email" title="Notification"><span class="notification-count">3</span></a>
<ul>
<li class="sticklr-title"><a href="#">Notification (3)<br />
ubah , hanya contoh</a></li>
<li>
<form action="" method="POST">
<input type="text" name="search" value="" placeholder="Someone is typing.." />
</form>
</li>
<li><a href="#" class="icon-user">00:32 Hello!</a></li>
<li><a href="#" class="icon-user">23:52 Not really works</a></li>
<li><a href="#" class="icon-user">22:07 Just example use</a></li>
</ul>
</li>
</ul>
<!--BUTTON SCROLL-->
<ul id="example-3" class="sticklr">
<li><a href="#" class="icon-login" title="Site switcher"></a>
<ul>
<li class="sticklr-title"><a href="#">Show on hover</a></li>
<li><a href="http://themeforest.net/?ref=amatyr4n" class="icon-amazon">ActiveDen</a></li>
<li><a href="http://codecanyon.net/?ref=amatyr4n" class="icon-flickr">AudioJungle</a></li>
<li><a href="http://themeforest.net/?ref=amatyr4n" class="icon-facebook">ThemeForest</a></li>
<li><a href="http://codecanyon.net/?ref=amatyr4n" class="icon-google">VideoHive</a></li>
</ul></li>
<li><a href="#" class="icon-user" title="Site switcher"></a>
<ul>
<li class="sticklr-title"><a href="#">Right-side panel</a></li>
<li><a href="http://codecanyon.net/?ref=amatyr4n" class="icon-reddit">GraphicRiver</a></li>
<li><a href="http://themeforest.net/?ref=amatyr4n" class="icon-lastfm">3DOcean</a></li>
<li><a href="http://codecanyon.net/?ref=amatyr4n" class="icon-technorati">CodeCanyon</a></li>
<li><a href="http://themeforest.net/?ref=amatyr4n" class="icon-yahoo">Tuts+</a></li>
<li><a href="http://themeforest.net/?ref=amatyr4n" class="icon-dribbble">PhotoDune</a></li>
</ul>
</li>
<li><a href="#" class="icon-twitter" title="Share"></a>
<ul>
<li class="sticklr-title"><a href="#">Sharing is caring</a></li>
<li><div class="sticklr-custom" style="padding:10px">
<div style="height:20px"><glusone size="medium"></glusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</div>
</div>
</li>
<li>
<div class="sticklr-custom" style="padding:10px">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" style="float:none;">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</li>
<li>
<div class="sticklr-custom" style="padding:10px">
<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>
<a class="DiggThisButton DiggCompact"></a>
</div>
</li>
<li>
<div class="sticklr-custom" style="padding:10px">
<a href="http://twitter.com/amatyr4n" class="twitter-follow-button" data-show-count="false" style="height:20px">Follow @amatyr4n</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</li>
<li>
<div class="sticklr-custom" style="padding:10px">
<iframe src="http://www.facebook.com/plugins/like.php?send=false&layout=button_count&show_faces=false&action=like&colorscheme=light" scrolling="no" frameborder="0" style="border:none; width:150px; height:20px;"></iframe>
</div>
</li>
<li>
<div class="sticklr-custom" style="padding:10px">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share" data-counter="right"></script>
</div>
</li>
<li>
<div class="sticklr-custom" style="padding:10px">
<su:badge layout="1"></su:badge>
<script type="text/javascript">(function(){var li = document.createElement("script"); li.type = "text/javascript"; li.async = true; li.src = "https://platform.stumbleupon.com/1/widgets.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(li, s);})();</script>
</div>
</li>
</ul>
</li>
<li><a href="https://www.google.com/search?q=sticklr+wp" class="icon-google" title="External link" target="_blank"></a>
</li>
</ul>
<!--BUTTON KANAN-->
<ul id="example-2" class="sticklr">
<!--tab 1-->
<li><a href="#testimonials" class="icon-networking32" title="testimonials"></a>
<ul>
<li class="sticklr-title"><a href="#">ISI JUDUL</a></li>
<li><a href="/" class="icon-reddit">GraphicRiver</a></li>
<li><a href="/" class="icon-lastfm">3DOcean</a></li>
<li><a href="/" class="icon-technorati">CodeCanyon</a></li>
<li><a href="/" class="icon-yahoo">Tuts+</a></li>
<li><a href="/" class="icon-dribbble">PhotoDune</a></li>
</ul>
</li>
<!--tab 2-->
<li><a href="#download" class="icon-product32" title="Download"></a>
<ul>
<li class="sticklr-title"><a href="#">DOWNLOAD</a></li>
<li><a href="/" class="icon-reddit">GraphicRiver</a></li>
<li><a href="/" class="icon-lastfm">3DOcean</a></li>
<li><a href="/" class="icon-technorati">CodeCanyon</a></li>
<li><a href="/" class="icon-yahoo">Tuts+</a></li>
<li><a href="/" class="icon-dribbble">PhotoDune</a></li>
</ul>
</li>
<!--tab 3-->
<li><a href="#features" class="icon-login32" title="Features"></a>
<ul>
<li><a href="/" class="icon-reddit">ISI JUDUL</a></li>
<li><a href="/" class="icon-lastfm">3DOcean</a></li>
<li><a href="/" class="icon-technorati">CodeCanyon</a></li>
<li><a href="/" class="icon-yahoo">Tuts+</a></li>
<li><a href="/" class="icon-dribbble">PhotoDune</a></li>
</ul>
</li>
<!--tab 4-->
<li><a href="#" class="icon-feed32" title="Search"></a>
<ul>
<li class="sticklr-title"><a href="#">Search</a></li>
<li><form action="http://www.google.com/search" method="GET">
<input type="text" name="q" value="" placeholder="Type then press Enter.." />
</form>
</li>
</ul>
</li>
<!--tab 5 ubah menjadi back top dan down-->
<li><a href="#testimonials" class="icon-heart32" title="Testimonials"></a></li> <!--down-->
<li><a href="#page" class="icon-top32" title="Back to top"></a></li> <!--top-->
</ul>
</div>
<!--/body>
</html-->
<!--bagian kotak hiddden button kiri-->
<style type="text/css">
/* body {
background: red;
}
*/ .sticklr .notification-count {
display: block;
width: 12px;
height: 12px;
background: #555;
box-shadow: 0 0 3px #999;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color: #f0f0f0;
cursor: default;
font-size: 10px;
line-height: 12px;
text-indent: 3px;
position: absolute;
top: 2px;
left: 20px;
z-index: 96;
}
.sticklr .calendar td {
width: 15px;
padding: 5px;
}
.sticklr .calendar td:hover {
background: #eaeaea;
font-weight: bold;
}
</style>
<!--/head-->
<!--body-->
<!--head-->
<link rel="stylesheet" type="text/css" media="screen,projection" href="http://www.sticklr.net/jquery-sticklr-1.4-light-color.css" />
<!--script button kanan scroll dan button kiri , hilang bila dihapus-->
<script type="text/javascript" src="http://www.sticklr.net/jquery-1.4.3.min.js"></script>
<!--cuma button fixed kanan yg muncul-->
<script type="text/javascript" src="http://www.sticklr.net/jquery-sticklr-1.4.pack.js"></script>
<!--bagian kotak hiddden button kiri-->
<script type="text/javascript" src="http://www.sticklr.net/jquery.localscroll-min.js"></script>
<!--button fixed kanan-->
<script type="text/javascript">
$(document).ready(function(){
$('#example-1').sticklr({
showOn : 'click',
stickTo : 'left'
});
$('#example-2').sticklr({
showOn : 'hover',
stickTo : 'right',
size : 32
});
$('#example-3').sticklr({
animate : true,
relativeTo : 'top',
showOn : 'hover',
stickTo : 'right'
});
$.localScroll();
});
</script>
Tambahkan komentar Komentator
Konversi KodeOOT