Memasang Smooth Scrolling Page

Smooth Scrolling Page adalah salah satu tools blog yang berfungsi sama dengan back to top dan back to bottom, tools tersebut bermanfaat untuk mempercantik blog dan membuat kenyamanan kepada pengunjung.

Perbedaan dari Smooth Scrolling Page dengan back to top dan back to bottom adalah scrolingnya artinya Smooth Scrolling Page kembali ke atas atau kebawah dengan perlahan tidak dengan back to top dan back to bottom kembali dengan cepat.

Trik ini saya dapatkan dari blog dkwny2031 yang dia dapat dari Dynamic Drive. dalam pemasanggannya sangat mudah dan simple, hanya memasukan kodenya kedalam tag penutup body. Sobat ingin tools ini?? ikuti saja langkah-langkah di bawah ini :

1. Masuk ke blogger
2. Mari kita menuju Tata letak ==>> Edit HTML
3. Jangan lupa Backup Template sobat agar tidak terjadi hal yang tidak di inginkan
4. Cari kode </body> lalu taruh kode di bawah ini tepat di bawahnya :
   
   
   <div id="staticbuttons" style="position:absolute;">
   <a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
   src="http://www.sigmirror.com/files/51707_ytmap/up.png" border="0"></a><br>
   <a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
   src="http://www.sigmirror.com/files/51708_mtjpd/down.png" border="0"></a>
   </div>
   
   <script>
   
   //Page Scroller (aka custom scrollbar)- By Dynamic Drive
   //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
   //This credit MUST stay intact for use
   
   var Hoffset=90 //Enter buttons' offset from right edge of window (adjust depending on images width)
   var Voffset=100 //Enter buttons' offset from bottom edge of window (adjust depending on images height)
   var thespeed=20 //Enter scroll speed in integer (Advised: 1-3)
   
   var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
   var myspeed=0
   
   var ieHoffset_extra=document.all? 15 : 0
   var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons
   
   function iecompattest(){
   return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
   }
   
   function positionit(){
   var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
   var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
   var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
   var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight
   
   if (document.all||document.getElementById){
   cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
   cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
   }
   else if (document.layers){
   cross_obj.left=dsocleft+window_width-Hoffset
   cross_obj.top=dsoctop+window_height-Voffset
   }
   }
   
   function scrollwindow(){
   window.scrollBy(0,myspeed)
   }
   
   function initializeIT(){
   positionit()
   if (myspeed!=0){
   scrollwindow()
   }
   }
   
   if (document.all||document.getElementById||document.layers)
   setInterval("initializeIT()",20)
   
   </script>
   
   Penjelasan :
   
   • Hoffset=70 adalah untuk menentukan penempatan gambar secara Horizontal, makin kecil ukurannya makin ke kanan
   • Voffset=80 adalah untuk menentukan penempatan gambar secara Vertical, makin kecil ukurannya makin ke bawah
   • thespeed=20 adalah untuk menentukan kecepatan Scrooling (bergerak), makin besar makin kencang
5. Apabila kode diatas tidak berfungsi atau bermasalah, sobat harus meng-Encode terlebih dahulu untuk di pasang di bawah tag </body>
6. Simpan dech dan lihat hasilnya

Mudah bukan Memasang Smooth Scrolling Page di blog?? dan gimana hasilnya berhasil?? Bagaimana trik blog yang ini?? Tinggalkan pesan y untuk artikel ini.

Membuat Back To Top Dengan CSS

Back To Top mungkin hampir semua blogger sudah mengenalinya. Tools yang satu ini memang bisa dibilang dapat menyamankan para pengunjung blog kita karena dengan adanya tools ini maka apabila pengunjung blog sedang berada di paling bawah blog maka hanya dengan mengklik tombol Back To Top ini pengunjung dapat dengan mudahnya langsung kembali ke atas.

lagi pula tanpa dijelaskan juga mungkin sobat semua dapat mengetahui manfaat tools ini dari namanya yaitu Back To Top. Memang semua blogger atau para master blogger semua sudah membagikan ilmu tentang ini namun kebanyakan menggunakan javascript nah sedangkan banyak orang yang bilang kalau memakai javascipt itu membuat blog kita menjadi berat atau lambat untuk di akses. Setelah muncul opini yang seperti itu maka saya mempunyai inisiatif untuk membuat tools ini ringan, namun bagaimana? akhirnya saya menemukannya yaitu dengan tidak menggunakan javascript namun menggunakan CSS dan HTML saja, untuk melihat demonya sobat dapat melihat di pojok kanan bawah yang bergambar panah ke atas, silahkan tekan tombol itu. sekarang kita lihat cara pembuatannya.

1. Login ke blogger
2. lalu masuk ke Tata Letak >> Rancangan >> Edit HTML
3. setelah itu cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya
   
   
   #csstop {
   overflow: hidden;
   float:right;
   width:50px;
   height:50px;
   clear:both;
   }
   
   
4. setelah itu cari kode </body> lalu tambahkan pula kode di bawah ini tepat di atasnya
   
   <a id="csstop" href="#"><img src="http://i1189.photobucket.com/albums/z423/jonsstyle/113018.gif" alt="jonsstyleofblogger.blogspot.com"/></a>
   
   
5. Setelah itu sobat dapat menyimpannya dan melihat hasilnya

Back To Top dengan CSS dengan Back To Top dengan Javascript? lebih baik yang mana menurut sobat semua? silahkan tinggalkan pesan atau pendapat sobat di kotak komentar yang sudah di sediakan di bawah ini. Terima kasih dan Happy Blogging.