Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Jumat, 12 Februari 2010

Cara Membuat Berhenti Naik Scroller

Kategori : ,
Berhenti Naik Scroller maksudnya adalah Tulisan dan link bisa naik ke atas dan berhenti sejenak secara continue dan apabila sobat mendekatkan kursor ke scroller tersebut maka scroller tersebut akan berhenti apabalia kursor di jauhkan dari scroller tersebut maka akan berjalan seperti semula, Nah kalau sobat bingung dengan penjelasan yang saya buat sendiri (maklum sedikit amatir) sobat bisa melihat demonya di sini.

Sekarang saya mulai senang karena blog oketrik sudah sedikit ramai dan sudah terindeks di Google perkembangan yang bisa di bilang sangat pesat padahal umur blog blom berumur 1,5 bulan. terima kasih atas sobat-sobat yang sering berkunjung di blog ini saya ucapkan sekali lagi terima kasih sebesar-besarnya dan mudah2an blog ini menjadi lebih ramai dari sebelumnya.

Oke selesai curhatnya sekarang kembali ke Cara Membuat Berhenti Naik Scroller. oke lihat langkah di bawah ini y sobat blogger semua :
  1. login ke blogger
  2. masuk ke Tata Letak ==>> Elemen Halaman
  3. lalu tambahkan sebuah Gadget dan pilih yang HTML/Javascript
  4. pindahkan kode di bawah ini ke dalamnya


    <style type="text/css">

    /*Example CSS for the two demo scrollers*/

    #pscroller1{
    width: 300px;
    height: 130px;
    border: 1px solid #00ff00;
    padding: 5px;
    background-color: black;
    }

    #pscroller2{
    width: 310px;
    height: 20px;
    border: 1px solid #00ff00;
    padding: 3px;
    }

    #pscroller2 a{
    text-decoration: none;
    }

    .someclass{ //class to apply to your scroller(s) if desired
    }

    </style>

    <script type="text/javascript">

    /*Example message arrays for the two demo scrollers*/

    var pausecontent=new Array()
    pausecontent[0]='<a href="http://www.Oketrik.blogspot.com">Oketrik</a><br />Disini anda bisa menemukan berbagai trik yang anda butuhkan dengan mudah dan simple.'
    pausecontent[1]='<a href="http://oketrik.blogspot.com/2010/01/alien-black-template.html">Alien Black Template</a><br />Template ini termasuk template yang seo friendly dan Fast loading.'
    pausecontent[2]='<a href="http://oketrik.blogspot.com/search/label/Trik%20Blog" target="_blank">Trik Blog</a><br />Kumupulan berbagai trik blog yang menarik.'

    var pausecontent2=new Array()
    pausecontent2[0]='<a href="http://oketrik.blogspot.com/2010/02/postingan-terbaru-berjalan.html">Postingan Terbaru Berjalan</a>'
    pausecontent2[1]='<a href="http://oketrik.blogspot.com/2010/01/memasang-smooth-scrolling-page.html">Memasang Smooth Scrolling Page</a>'
    pausecontent2[2]='<a href="http://oketrik.blogspot.com/2009/12/memasang-fixed-menu.html">Memasang Menu Melayang Yang Cantik</a>'

    </script>

    <script type="text/javascript">

    /***********************************************
    * Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/

    function pausescroller(content, divId, divClass, delay){
    this.content=content //message array content
    this.tickerid=divId //ID of ticker div to display information
    this.delay=delay //Delay between msg change, in miliseconds.
    this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
    this.hiddendivpointer=1 //index of message array for hidden div
    document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
    var scrollerinstance=this
    if (window.addEventListener) //run onload in DOM2 browsers
    window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
    else if (window.attachEvent) //run onload in IE5.5+
    window.attachEvent("onload", function(){scrollerinstance.initialize()})
    else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
    setTimeout(function(){scrollerinstance.initialize()}, 500)
    }

    // -------------------------------------------------------------------
    // initialize()- Initialize scroller method.
    // -Get div objects, set initial positions, start up down animation
    // -------------------------------------------------------------------

    pausescroller.prototype.initialize=function(){
    this.tickerdiv=document.getElementById(this.tickerid)
    this.visiblediv=document.getElementById(this.tickerid+"1")
    this.hiddendiv=document.getElementById(this.tickerid+"2")
    this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
    //set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
    this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
    this.getinline(this.visiblediv, this.hiddendiv)
    this.hiddendiv.style.visibility="visible"
    var scrollerinstance=this
    document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
    document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
    if (window.attachEvent) //Clean up loose references in IE
    window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
    setTimeout(function(){scrollerinstance.animateup()}, this.delay)
    }


    // -------------------------------------------------------------------
    // animateup()- Move the two inner divs of the scroller up and in sync
    // -------------------------------------------------------------------

    pausescroller.prototype.animateup=function(){
    var scrollerinstance=this
    if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
    this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
    this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
    setTimeout(function(){scrollerinstance.animateup()}, 50)
    }
    else{
    this.getinline(this.hiddendiv, this.visiblediv)
    this.swapdivs()
    setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
    }
    }

    // -------------------------------------------------------------------
    // swapdivs()- Swap between which is the visible and which is the hidden div
    // -------------------------------------------------------------------

    pausescroller.prototype.swapdivs=function(){
    var tempcontainer=this.visiblediv
    this.visiblediv=this.hiddendiv
    this.hiddendiv=tempcontainer
    }

    pausescroller.prototype.getinline=function(div1, div2){
    div1.style.top=this.visibledivtop+"px"
    div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
    }

    // -------------------------------------------------------------------
    // setmessage()- Populate the hidden div with the next message before it's visible
    // -------------------------------------------------------------------

    pausescroller.prototype.setmessage=function(){
    var scrollerinstance=this
    if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
    setTimeout(function(){scrollerinstance.setmessage()}, 100)
    else{
    var i=this.hiddendivpointer
    var ceiling=this.content.length
    this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
    this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
    this.animateup()
    }
    }

    pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
    if (tickerobj.currentStyle)
    return tickerobj.currentStyle["paddingTop"]
    else if (window.getComputedStyle) //if DOM2
    return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
    else
    return 0
    }

    </script>

    <script type="text/javascript">

    //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

    new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
    document.write("<br />")
    new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)

    </script>


    Penjelasan :
    • kode yang berwarna Kuning bisa sobat ganti :
      pscroller1
      • Width ==>> kode ini menunjukan lebar dari widget pertama atau yang di atas
      • Height ==>> kode ini menunjukan tinggi dari widget pertama atau yang di atas
      • Border ==>> kode ini menunjukan warna dan tebal tipisnya garis tepi widget pertama atau yang di atas
      • Background ==>> kode ini menunjukan warna latar belakang widget pertama atau yang di atas

      pscroller2
      • Width ==>> kode ini menunjukan lebar dari widget kedua atau yang di bawah widget pertama
      • Height ==>> kode ini menunjukan tinggi dari widget kedua atau yang di bawah widget pertama
      • Border ==>> kode ini menunjukan warna dan tebal tipisnya garis tepi widget kedua atau yang di bawah widget pertama
    • kode yang berwarna biru dan hijau bisa sobat ganti dengan keinginan sobat.

  5. Setelah itu simpan dech dan lihat hasilnya

Nah mudah bukan Cara Membuat Berhenti Naik Scroller. oiya saya hampir lupa kalau trik ini saya dapat dari dynamic drive. Sekarang blog sobat benar2 terlihat profesional dan bahkan bisa di lihat sebagai situs yang profesional. Mungkin hanya sekian dari oketrik mohon maaf kalau ada kesalahan atau kata2 yang kurang berkenan saya akhiri dengan mengucap Happy Blogging.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

9 Komentar untuk Cara Membuat Berhenti Naik Scroller

mantab coy...

keep sob!! OK! deh sob ke tKp aza~~

salam kenal sahabat.
inspiratif banget blognya,minta ijin untuk pake templatenya boleh gak sobat?

oya sekalian mau nanya, di blog saya klo comment pembaca ditampilin, kotak komentarnya gak tampil. Begitu jg sebaliknya. Mohon saran sobat. Boleh liat dulu blog saya biar tau dimana problemnya. Trimakasih.

@Shine ==>> silahkan pakai Templatenya sob, tinggal atur ajach di Pengaturan ==>> Komentar : pilih yang tampilkan trus penempatan Formulir komentar : Dissemat di bawah entri. Terima kasih

trimakasih sob,sdh saya coba dan disemat dibawah entri tp hasilnya ga berubah. Maklum msh sangat pemula sob. Blm ada sebulan belajar ngeblog

kan asik tuh klo kayak punya sobat ini. Ada kolom komentarnya dan ada jg komentar sobat2 bs tampil diatasnya

Wew keren mas trik nya...wah ni situs langsung aku bookmarks...hihihi buat nyoba nyoba trik yg lain nanti..
Thanks banget deh....

Artikel yg bagus..
Info baru bt saya ..


ditunggu backlink nya az..
Terima Kasih..

manta gan,izin kopas yah gan,kalau gak boleh maksa ..hehehhehe makasih gan...