Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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.

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 «

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot