Skip to main content

Cara Membuat Page Scroller ( Custom ScrollBar )

Oke...Lama juga ga posting nich...iseng-iseng dech coba posting yang satu ini...
Awalnya mondar-mandir cari-cari artikel, pas ketemu trik ini...kayaknya boleh juga nich buat ngehias blog, trik ini saya dapatkan di Dynamic Drive, namun saya otak-atik sedikit untuk menyesuaikan dengan format pada Blogger, karena trik ini spesialnya ditujukan buat para penggila web.

Tujuan postingan kali ini agar bisa menjadi alternatif dalam arti kata biar bisa membantu para pengunjung blog agar tidak lelah mengunjungi blog kita, apalagi ketika membuka halaman blog yang panjangnya minta ampun sampe puluhan hingga ratusan artikel, sehingga membuat lelah pengunjung blog untuk men-scroll halaman blog kita. ini cuma alternatif looohhh....

Lanjuuutttt...
Nah postingan kali ini mengangkat tentang Cara Membuat Auto Page Scroller di Blog kita. Untuk contohnya anda bisa mengarahkan cursor anda ke gambar seperti tanda panah ke atas dan kebawah di pojok kanan bawah pada halaman blog ini.


Naaahhh...sudah dicoba...???
Jika anda tertarik untuk menggunakannya, anda bisa mencoba cara-caranya dibawah ini :
  • Pertama-tama Login dulu ke Blogger
  • Masuk ke Layout/Tata Letak
  • Terus menuju ke Edit HTML
  • Jangan lupa download dulu templatenya, agar jika terjadi kesalahan bisa diperbaiki.
  • Nah...sekarang cari code </body> , biasanya letaknya paling bawah.
  • Copy code ini sebelum code </body> 

<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_8Jkyuz-Js3B9Lx5tMdLUJbaueAJ6Fmv0KJyTq1YTNfxG56b7DF0vPMp3nsTgzz6AKP8_vMAAncjGXcw7Npig0c2rhtRJr4ljaYz25ra3-d8ZX3CXGHBQrYQuao8PBzVuYbrWjikqy0g/s320/BUTTONUP.png" border="0"/></a><br/>
<a href="javascript:" onmouseover="myspeed=thespeed"
onmouseout="myspeed=0"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9D1XvlBAXqMUu025znPegAH58egJE2FjGduIu37ddzBOyNrdVrdDzhaNMpR2JWgY90RclHlWXD3W6NSYb7zvhzb7rml1Cl_QFdSgwaNZH7I4gTBQhWZ9eBm3EJKWTCUW0iwz4Pt2-Akg/s320/BUTTONDOWN.png" border="0"/></a>
</div>
<script>
var Hoffset=70
var Voffset=80
var thespeed=3
ieNOTopera=document.all&amp;&amp;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 &amp;&amp;
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>

  • Ganti tulisan berwarna merah dengan link gambar anda
  • Sesuaikan Angka berwarna biru(kecepatan scroll) dengan selera anda
  • Simpan dech....
  • Coba lihat hasilnya...

Image link :
UP :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_8Jkyuz-Js3B9Lx5tMdLUJbaueAJ6Fmv0KJyTq1YTNfxG56b7DF0vPMp3nsTgzz6AKP8_vMAAncjGXcw7Npig0c2rhtRJr4ljaYz25ra3-d8ZX3CXGHBQrYQuao8PBzVuYbrWjikqy0g/s320/BUTTONUP.png
DOWN :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9D1XvlBAXqMUu025znPegAH58egJE2FjGduIu37ddzBOyNrdVrdDzhaNMpR2JWgY90RclHlWXD3W6NSYb7zvhzb7rml1Cl_QFdSgwaNZH7I4gTBQhWZ9eBm3EJKWTCUW0iwz4Pt2-Akg/s320/BUTTONDOWN.png
    SELAMAT MENCOBA
    SEMOGA BERMANFAAT
    TERIMA KASIH

    (sumber : www.dynamicdrive.com )

    Comments

    1. pertamax wah sangat keren.... langsung rizky coba

      ReplyDelete
    2. sob kok g kelihatan hasilnya, coba deh lihat blog aq

      ReplyDelete
    3. @Rizky2009 : Sorry sob...kemaren lupa ganti konsep link gambarnya...nah...skrg udah di tampilkan tuch...sok silakan di garap....
      Thanx sudah mencobanya....

      ReplyDelete
    4. ikutan masang ahh hehehe makasih friends

      ReplyDelete
    5. Thanks sob infona, langsung ane praktekin deh ...

      ReplyDelete
    6. Thanx Sobat2 semuanya atas commentnya..
      Thanx juga buat partisipasi untuk mencobanya...
      Moga2 bisa selalu bermanfaat...
      Thanx for all...

      ReplyDelete
    7. nice posting....tutorialnya mantaab man, tak coba ya

      ReplyDelete
    8. perlu dicoba,,

      slm kenal sob,kunjungan balik nih...
      thanks,

      ReplyDelete
    9. tukeran link sob...
      link sobat sudah saya pasang di blog saya.. thx :D

      ReplyDelete
    10. teruskan dengan spirit baru...bagus nih ilmunya biar sahabat blogger kita bisa memilih apa yang dia perlukan !

      ReplyDelete
    11. Thanx sobat....silahkan dicoba...semua memang dihadirkan untuk sharing saja...semoga bermanfaat...

      ReplyDelete
    12. wah, G E O R G E O U Z master komeng nich... :-*
      slain itu isi postingannya sangat bermutu... :-*
      ai lop yu G E O R G E O U Z... much3... hohoho :o :D

      MASQULIN.BLOGSPOT.COM

      ReplyDelete
    13. @ Arief : wheeee....kl master komeng...ntar uhhuuuyyy dong...thanx ya sob atas supportnya...sama2 belajar sob...tp kl much3-nya...jangan dong...ntar jeruk mamam jeruk tuch....heheheheheeeeee....
      @ Iqbal : thanx banget sob supportnya....

      ReplyDelete

    Post a Comment

    Silahkan tulis komentar anda pada kolom diatas, namun diharapkan jangan melakukan spamming, hindari komentar yang mengandung unsur SARA, berkata kasar serta hal2 negatif lainnya, Terima Kasih, Semoga bermanfaat

    Popular Posts

    Cara Membuat Random Posting Title Berjalan (Marquee)

    Setelah kemaren sempat memposting " Cara menampilkan Top Comment Berjalan (Marquee) " , nah, kali ini mencoba memaparkan "Cara Membuat Random Posting Title Berjalan (Marquee)" . Postingan kali ini juga untuk menjawab pertanyaan dari sobat blogger pada waktu yang lalu sempat bertanya kalau cara membuat Recent Postingnya bagaimana? Thanx ya buat sobat Ngeposting ni yee + sobat yang satu lagi saya lupa (karena beliau bertanya via shoutbox dan sekarang shoutbox sudah saya ganti, jd maaf kl saya lupa yaaa...) karena pertanyaan anda memberikan saya ide untuk membuat postingan yang baru, abisnya saya sempat bingung mau membuat postingan apalagi yaaa....heheheheheeee.... Sebenarnya mau dikasi judul Recent Posting Title .....namun rasanya kurang pas kl mau bilang tentang tool ini Recent Posting Title , karena tool ini menghadirkan judul-judul posting blog kita secara acak bukan menampilkan judul postingan terbaru pada blog kita. Tapi ga apa-apa dech, ada baiknya juga si

    Cara Pasang Kotak Komentar/Comment Form Facebook di Blogger

    Cara Membuat Kotak Komentar/Comment Form Facebook di Blogger | Mungkin Tips ini udah bukan hal baru lagi, namun jika niat ingin berbagi, tidak ada kata terlambat. Berikut ini ingin mensharingkan cara membuat Kotak Komentar/Comment Form Facebook yang akan di tampilkan di Blogger. Jadi Kotak komentar yang sudah secara default ada di blogger dirubah atau ditambah dengan aplikasi kotak komentar/Comment form yang disediakan oleh Facebook. Fungsi kotak komentar Facebook ini adalah sebagai pengganti atau alternatif lain bagi pengunjung blog kita untuk memberikan komentar di blog kita, karena memungkinkan untuk pengunjung blog selain pengguna Blogger/Wordpress/Typepad/Open id untuk memberikan ide/komentar/saran/kesan untuk blog kita. Dikarenakan pengguna Facebook semakin meningkat jumlahnya, jadi bisa dipastikan hampir semua pengunjung blog memiliki akun Facebook. Untuk melihat demo Kotak komentar Facebook, silakan lihat Disini Berikut ini cara membuat/memasang kotak komentar Facebook di

    Thumbnail Related Posting with Marquee (Berjalan)

    Setelah kemaren memposting tentang cara membuat Related Posting menggunakan Daftar list berdasarkan Label dan Related Posting menggunakan Gambar(Thumbnail) . Nah kali ini sedikit berkaitan dengan Related Posting menggunakan Gambar(Thumbnail) . Nah, untuk menampilkan Related Posting menggunakan Gambar anda bisa lihat disini cara membuatnya. Namun ada sedikit kekurangan dari Related posting ini, yaitu anda tidak bisa menampilkan Related postingnya dalam jumlah yang banyak , jumlah yang ditampilkan sebatas ukuran lebar halaman posting saja, seperti halnya blog ini, hanya bisa menampilkan 4 judul serta gambar dari related posting tersebut. Lalu bagaimana cara menampilkan related posting tersebut dalam jumlah yang banyak...??? Oke, yang ingin di sharingkan kali ini mencoba mengangkat tentang menggunakan metode Marquee pada thumbnail related posting. Untuk contoh anda bisa lihat kebawah posting ini. Setelah mengutak-atik sedikit, sampai sempat sedikit error, hingga akhirnya saya mem

    Cara Menampilkan Top Comment Berjalan (Marquee)

    Wahhh...lama juga ga posting nich...akhirnya kangen juga sama blog setelah beberapa hari tidak menjamahnya karena ada sedikit kesibukan diluar. Oke langsung saja ke postingan , sebenarnya postingan kali ini adalah untuk menjawab pertanyaan sobat blogger, saya lupa namanya karena beliau bertanya via shoutbox blog ini yang lama, dan pada akhirnya shoutbox saya di banned, dan sekarang berganti dg Cbox, jadi maaf ya jika saya lupa, maklum memori sudah lemot. kalau tidak salah beliau bertanya bagaimana cara membuat Top Comment berjalan seperti di blog ini ? dan saya menjawab Coming soon sobat( Kayak film baru aja ) Oke, setelah kemaren sempat memposting cara menampilkan Top Comment di Blog , nah... sekarang mencoba membeberkan cara alternatif kedua untuk menampilkan Top Comment di blog dengan tampilan yang sedikit berbeda. Cara alternatif yang kedua ini menggunakan metode tulisan berjalan (Marquee) . makanya postingan kali ini saya beri nama Cara Menampilkan Top Comment Berjalan (Ma

    Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan

    Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan | Sempat bingung menentukan judul artikel yang satu ini, tapi yang jelas gambarannya seperti dibawah ini, Pernah lihat halaman blognya Kang Rohman (kolom-tutorial.blogspot.com), jika diperhatikan, ketika pada halaman beranda/Home page, bagian artikel/posting terletak di sebelah kiri dan sidebar berada di sebelah kanan, dan ketika masuk ke halaman postingnya, halaman artikel akan berada di sebelah kanan dan sidebar di sebelah kiri. Nah, untuk membuat halaman tersebut agar bisa berpindah-pindah ternyata cukup simpel. ternyata yang dibutuhkan hanya sedikit penambahan pada struktur CSS nya saja. berikut cara-caranya : Login ke Blogger Langsung menuju ke Design/Rancangan Klik Edit HTML centang tulisan "Expand Widget Template" Cari kode berikut : ]]></b:skin> Letakkan kode berikut ini setelah kode diatas  <style type='text/css'> <b:if cond='data:blog.pageType == &quot;item&quot;&

    Blogger Lebih Asik dengan New Posting Editor

    Nah...saat sekarang ini, para Blogging mania diberi kemudahan lagi oleh Blogger. Sebuah Posting Editor Baru telah di luncurkan. disini kita diberi kemudahan lagi dalam memposting entry. Adapun fitur-fitur yang telah diperbaharui sebagai berikut : New Toolbar Full safary 3 support Improved Handling Image Improved Raw HTML Geotagging Vertical Resizing Easy link editing in Compose mode Placeholder image for tags Preview dialog  Untuk lebih jelasnya dapat anda lihat Disini Nah...untuk dapat menggunakan New Posting Editor ini ( bagi anda yang masih menggunakan Posting editor lama ), berikut ini cara mengaktifkan New Posting Editor nya : Login dulu ke Blogger Masuk ke Setting/Pengaturan Pada halaman dasar, scroll hingga ke bawah, cari Setting Global   Pilih Editor yang diperbaharui Simpan Settingan anda Selesai Dech... Selamat menggunakan Posting Editor yang baru Sukses untuk semua Blogger...!!!