Cara Membuat Berhenti Naik Scroller

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