Scroller with a size range

Sebuah auto scroller yang super sederhana dan dapat bekerja sebagai auto scroller berdasarkan jarak (range), namun demikian bisa dimanfaatkan sebagai scroll to top controll dan scroll to bottom controll. Saat difungsikan sebagai scroll to top controll dan scroll to bottom controll, javascript ini amat mempermudah blogger untuk menggunakan. Sedikit akan lebih sulit jika kita menggunakan sebagai auto scroller yang berdasarkan range (jarak menggulung) karena harus melakukan perhitungkan (memperkirakan) titik pemasangan scroller dan titik targetnya.

D E M O

Menggunakan sebagai Scroll to top/bottom controll:

Javascript-1 :

<script type="text/javascript">
//<[CDATA[
m = 100000 /* pengatur range */
function fixedScrolldown(){
    for (GR = 1; GR <= m; GR++){
        parent.scroll(1,GR);
    }
}
function fixedScrollup(){
    for (GR = m; GR >= 1; GR--){
        parent.scroll(m,GR);
    }
}
//]]>
</script>

Kode CSS-1 :

<style type="text/css">
.GRfixed_top,.GRfixed_bottom{
        position:fixed;
        left:3px;
        bottom:0;
        font:Arial 12px;
        font-weight:bold;
        background:#CCC;
        color:#900;
        text-shadow:2px 2px 2px #888;
        border:1px solid #888;
        padding:3px 4px;
        cursor:pointer;
        opacity:0.7;
        z-index:20;
        filter:alpha(opacity=70);
        transition:0.7s ease-out;
        -o-transition:0.7s ease-out;
        -moz-transition:0.7s ease-out;
        -webkit-transition:0.7s ease-out;
        -ms-transition:0.7s ease-out; 
        display:block;
        margin:15px auto;
        text-align:center;        
}
.GRfixed_bottom{
        left:130px;
}
.GRfixed_top:hover,.GRfixed_bottom:hover{
        background:#900;
        color:#ddd;
        opacity:1.0;
        filter:alpha(opacity=100); 
        z-index:99;
}
</style>

xHTML-1 :

<input class="GRfixed_top" type=button value="Scroll to Bottom" onClick="fixedScrolldown()"/>
<input class="GRfixed_bottom" type=button value="Back to Top" onClick="fixedScrollup()"/>

Cara membuat :

1. Login ke Blogger.
2. Setelah halaman Dasbor (Dasboard) terlihat, klik "Design (Rancangan)".
3. Halaman baru kembali terbuka, klik "Edit HTML".
4. Klik "Add a Gadget (Tambah Gadget)".
5. Sebuah window baru terbuka, cari dan klik Gadget "HTML/Javascript
6. Sebuah "box HTML/Javascript" akan terbuka, copy seluruh kode (javascript-1), kode CSS-1 dan xHTML-1) dan pastekan ke dalam box.
7. Klik SIMPAN/SAVE.
8. Buka Blog dan coba hasilnya dengan klik "Button Scroll to Bottom Contoll" dan "Button Scroll to top Contoll" yang terletak di kiri-bawah halaman.
9. Selesai!

Menggunakan sebagai Scroller with a size range :

1. Simpan Javascript-2 dan Kode CSS-2 dengan cara seperti di atas (Add a Gadget).
2. Gunakan xHTML-2 di box Posting.
3. Atur range (di javascript » m = 1000)hingga jarak antara button controll dan target sesuai (tepat) dengan nilai range.
4. 
   

Javascript-2 :

<script type="text/javascript">
//<[CDATA[
m = 1000 /* pengatur range */
function GRdown(){
    for (GR = 1; GR <= m; GR++){
        parent.scroll(1,GR);
    }
}
function GRup(){
    for (GR = m; GR >= 1; GR--){
        parent.scroll(m,GR);
    }
}
//]]>
</script>

Kode CSS-2 :

<style type="text/css">
.GRtop,.GRbottom{
        display:block;
        margin:15px auto;
        text-align:center;
        font:Arial 12px;
        font-weight:bold;
        background:#CCC;
        color:#900;
        text-shadow:2px 2px 2px #888;
        border:1px solid #888;
        padding:3px 4px;
        cursor:pointer;
        opacity:0.7;
        z-index:20;
        filter:alpha(opacity=70);
        transition:0.7s ease-out;
        -o-transition:0.7s ease-out;
        -moz-transition:0.7s ease-out;
        -webkit-transition:0.7s ease-out;
        -ms-transition:0.7s ease-out;
        z-index:20;  
}
.GRfixed_top:hover,.GRfixed_bottom:hover{
        background:#900;
        color:#ddd;
        opacity:1.0;
        filter:alpha(opacity=100); 
        z-index:99;
}
</style>

xHTML-2 :

<input class="GRtop" type=button value="Scroll to Bottom" onClick="GRdown()"/>
Tuliskan teks di sini !
Tuliskan teks di sini !



























Tuliskan teks di sini !
Tuliskan teks di sini !
<input class="GRbottom" type=button value="Back to Top" onClick="GRup()"/>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Ngahad   LEGI,Maret,17,2012

» Happy Blogging - gubhugreyot «