scrollbar button up down disertai sistim grab

scrollbar button up down disertai sistim grab



tampilan ketika berada di atas ruang posting


tampilan ketika berada disidebar .

widget ini bukannya gratis seperti widget web si penjual yang telah saya posting ,
namun saya tetap berusaha agar ia dapat bekerja walau tetap di widget HTML/JAVASCRIPT .
tujuaannya selain gratis , juga mempermudah kalian untuk memakainya .

gambar diatas adalah tampilan asli dari widget tsb , namun disini saya menggantiya dengan recent comment , saya berharap dengan demikian kalian dapat mencobanya di bagian lain .
ini tampilan editnya




perhatikan saja keterangan dan susunannya .
tidak rumit untuk dimengerti .

terkadang script saling mematikan fungsi , maka apabila kalian memasangnya maka perhatikan widget lain , apakah ia juga berfungsi atau tidak .

saya telah menyertakan script asli web tsb yang disertai link driver , kalian tinggal pilih mana yg mau digunakan .

perhatikan susunan widget tsb karna ada keterangan disetiap bagian tertentu .
mau mengalihkan script itu ke driver kalian atau semacamnya silahkan .

<div id="scrollbar3">
<div class="scrollbar">
<div class="content">

<!----WIDGET KOMENTAR TERBARU---------->
<style type="text/css" scoped>
ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}
.sakahayang_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.sakahayang_recent_comments li .avatarImage{padding:2px;background:#B1B1B1;-webkit-box-shadow:0 1px 1px #000000;-moz-box-shadow:0 1px 1px #000000;box-shadow:0 1px 1px #000000;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{border-radius: 5px; border-right: 5px; border-left: 5px;}
.sakahayang_recent_comments li img{padding:0px;position:relative;/*overflow:hidden;*/display:block;}
.sakahayang_recent_comments li span{margin-top:4px;display: block;font-style: italic;line-height: 1.4;}
</style>

<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 20,
showAvatar = true,
avatarSize = 20,
roundAvatar = true,
characters = 0,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=50,
adminBlog='admin';
//]]>
</script>

<script type="text/javascript" src="http://googledrive.com/host/0B68pyZLfRQeCMHFSU1JNM05oa0E"></script> <script type="text/javascript" src="http://teater88.blogspot.com/feeds/comments/default?alt=json&amp;callback=sakahayang_recent_comments&amp;max-results=50"></script>
<!-----SELESAI--------->
</div>
</div>

<!--BUTTON ADA 3 -->
<!--1 tutup button t BISA KALIAN BUKA KEMBALI
<div class="scroll_button top" normal="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBEwJDVMljdk4qJcY9kc1nYW6OfXy8hGgMRcsWi1jA-uCAbytK04iD4Nkg8oFJlUmc9Jt-KMyfVTRAIm0nInxYqmaD09QV6mYwwPX-vzwu11e2Y0G671fHUTx0fiSLUN1nfW8OoPNZdHs/s1600/top.png" over="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXUfoPYULLHasG6vLWMCZWag_XiKYTxCBEyF-khb6_iSnpe3-fC3bM06pzeH7SRtc1KORZopL-CzNbnmKKZETV0oaH-wMu1oFp_n3BJMfaRfpCA-FhagT0nkaloiIIdfbI23vDq9rauM/s1600/top+over.png">
</div>
-->

<!--2--->
<div class="scroll_button up" normal="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlh0r3Wwo2FMbzSN2b6bT0kVWVsyN9Er1GoZ1uWUWeTV8Bah6YmOjALW6QIFS6Oe6bHW1J0u2QzQUYfKfOypyzwkQfPgSKI2uOjlVLlTPyqu9-t7fGt8vOuieegpoUUaHalPIvdbK3ZTk/s1600/up.png" over="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3433OY9sFdEZ1p1yaa6fncaOIR0LjpyBsX4BKHnbS88Pjsvhb7oS_NwMnzrB8QzIpPcLzf8tlv9qqFSFkv-q3NcUHVqxiTj1P7F2-UJC2QiPspo9H18sgoaJwOqpdwOLqp8SXu9rhT6I/s1600/up+over.png">
</div>

<!--3-->
<div class="scroll_button down" normal="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0IhW1f2zI6jUezuMpKQ-FiWkrECPY0cH6LSv6NSsDEBN3712xq-GCGg3iWE6s24GsWLthlurmT6iYYRyLUBtlfBIz2LaVwey98o9qjjWfvXmu9QmouW1-wzGoJTIKRGGdG9BdThKlU9g/s1600/down.png" over="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB8Q6sybIQDcJ3ZBtXMFVuR8AL-zckQCn-RVkM_at2T39lnqKli0Bk2XAklvZ07kRcxa3HFctLQuCRY_3JOqvMS4YOpmr_h9kpP4wpSYHnrAbAIYyTbEGMEYJbBEvG9KzKspEW4U4XS08/s1600/down+over.png">
</div>
</div>

<style>
.scrollbar .content{
position: absolute;
}
.scrollbar {
overflow:hidden;
position: absolute;
}
.scrollbar.grab{
cursor: url/*(https://0.s3.envato.com/files/15906721/cursors/openhand.cur)*/ , move !important;
cursor: -moz-grab;
cursor: move;
}
.scrollbar.grabbing{
cursor: url/*(https://0.s3.envato.com/files/15906721/cursors/openhand.cur)*/ , move !important;
cursor: -moz-grabbing;
cursor: move;
}
div.scrollbar_dragger {
position: relative;
}
div.scrollbar_dragger.vertical {
float:right;
}
div.scrollbar_dragger.horizontal {
}
div.scrollbar_dragger *{
margin:0;
padding:0;
font-style:normal;
text-decoration:none;
}
div.scrollbar_dragger .back{
-webkit-transition: background-color 0.5s ease-out;
-moz-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;
cursor:pointer;
position:absolute;
background-color:#E6E6E6;
}
div.scrollbar_dragger .back.over{
background-color:#CCCCCC;
}
div.scrollbar_dragger .dragger{
-webkit-transition: background-color 0.5s ease-out;
-moz-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;
cursor:pointer;
position:absolute;
height:100px;
}
div.scroll_button{
height:30px;
width:30px;
position: relative;
margin:5px 0px;
margin-right:3px;
float:right;
cursor:pointer;
}
div.scroll_button span.hover{
height:30px;
width:30px;
position: absolute;
cursor:pointer;
}
</style>

<script>
/* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
*
* Version: 3.0.2
*
* Requires: 1.2.2+
*/
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
</script>

<!--script type="text/javascript" src="https://0.s3.envato.com/files/15906721/jquery/jquery-1.6.2.min.js"></script ASLI-->
<script src="https://googledrive.com/host/0B6NRsLHpHmOvcGk4Vlhvc1BiMEk" type="text/javascript"/></script>

<!--script type="text/javascript" src="https://0.s3.envato.com/files/15906721/jquery/jquery.ba-resize.min.js"></script ASLI-->
<script src="https://googledrive.com/host/0B6NRsLHpHmOvU20zTzdValM2QkE" type="text/javascript"/></script>

<!--script src="https://0.s3.envato.com/files/15906721/js/pngFixer.js"> </script ASLI-->
<script src="https://googledrive.com/host/0B6NRsLHpHmOvSHNhVC1GN1FxSkk" type="text/javascript"/></script>

<!--script src="https://0.s3.envato.com/files/15906721/js/scrollbar.min.js"></script ASLI-->
<script src="https://googledrive.com/host/0B6NRsLHpHmOvODV0YW16SDBEcVk" type="text/javascript"/></script>

<!--script src="https://0.s3.envato.com/files/15906721/js/buttons.js"></script ASLI-->
<script src="https://googledrive.com/host/0B6NRsLHpHmOvLTJXVDdyV2pKbGM" type="text/javascript"/></script>

codecanyon ... bagaimana , masih ingin widget dari codecanyon ... tunggu saja postingannya..
ada ratusan widget disana .. tak lama blog ini di blokir ..hahahahaha..

mau lihat demo , cepat pasang susunannya di blog kalian .

SILAHKAN DI EDIT
Previous Post
Next Post

post written by:

- ALUMNI SMP 30 - SMK LANIANG JURUSAN PERAWAT

0 Comments: