Cara Membuat Sidebar Auto Slide Melayang

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Membuat Sidebar Auto Slide Melayang dan semoga artikel ini bermanfaat.


Cara Membuat Sidebar Auto Slide Melayang, untuk memaksimalkan tampilan sidebar sobat cara ini mungkin bisa sobat coba. dengan membuat sidebar auto slide maka sidebar tersebut akan selalu mengikuti scroll sehingga akan selalu nampak. sobat bisa lihat contohnya di blog ini, namun mungkin bila sidebarnya terlalu banyak widget cara ini kurang baik juga karena widget yang melebihi layar computer/laptop akan tidak bisa dilihat, nah dengan demikian maka sobat perlu memasang terlebih dahulu tutorial Membuat Efek Accordion Sidebar dengan JQuery agar tampilan jadi maksimal.
Ok, kita lanjut saja pada tutorial Cara Membuat Sidebar Auto Slide Melayang, namun sebelum berlanjut ke penerapannya sobat perlu diperhatikan dulu templatenya khususnya mengenai ID sidebarnya, seperti pada tutorial ini saya menggunakan ID sidebar "#rsidebar-wrapper" nah buat template sobat sesuaikan saja, apabila sobat kesulitan mencari ID sidebar sobat bisa menggunakan ad-on Firebug bagi pengguna mozilla.

Berikut langkah membuat sidebar Auto Slide Melayang:

Seperti biasa saja pada edit HTML template sobat cari kode </head> kemudian letakan kode dibawah ini tepat diatas kode tersebut.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){var offset=$(&quot;#rsidebar-wrapper&quot;).offset();var topPadding=10;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&quot;#rsidebar-wrapper&quot;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$(&quot;#rsidebar-wrapper&quot;).stop().animate({marginTop:0})}})});
</script>
Bila template sobat telah terpasang library JQuery seperti kode yang digaris bawah maka sobat hapus saja kode yang digaris bawah tersebut.
Kemudian perhatikan kode yang berwarna merah  #rsidebar-wrapper adalah kode ID sidebar, sobat sesuaikan dengan ID sidebar sobat.
Bila sudah selesai simpan template sobat dan lihat hasilnya.
Sekali lagi keberhasilan membuat sidebar Auto Slide Melayang ada pada kode ID sidebar, untuk itu jangan salah memasang IDnya.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Membuat Sidebar Auto Slide Melayang kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered
feedburner

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 19:21

16 komentar :

  1. cara mencari ID sidebarnya gimana sob?

    BalasHapus
    Balasan
    1. cara mudah mengetahui ID sidebar adalah dengan membuka halaman edit HTML template jangan mencentang expand template kemudian scroll kebawah hingga menemukan deretan kode widget nah sebelum deretan kode widget ada ID sidebar. atau bisa juga menggunakan add-on Firebug buat pengguna mozilla.

      Hapus
  2. ga bisa, kenapa ya? da ikutin langkah2 nya

    BalasHapus
  3. mas boleh bantu saya ga? kalu mau buat kayak punya mas seperti Tutorial Terbaru, Tutorial Populer, Tutorial Kategori dll, gmna iya mas? ajarin lah, terima kasih

    BalasHapus
  4. gak bisa gan, padahal semua langkah sudah benar... gimana dong ? apanya yg salah ..
    follow balik blog aku ya :
    mnafarin.blogspot.com

    BalasHapus
  5. keren mas,tapi sayang saya gagal mulu pasangnya,,hew
    kurang teliti aja kali ya,hahaha
    ijin copasnya mas azzam..
    http://catatansaif.blogspot.com/

    BalasHapus
  6. mantab mas artikelnya,,, ijin nitip link :D
    mebel jepara

    http://elliamebeljepara.com/

    BalasHapus
  7. Terimakasih banyak atas informasi dan ilmunya dalam postingan ini om

    BalasHapus
  8. Mantap artikelnya mas.
    sangat bermanfaat pula.
    thanks ya mas

    Visite My Web :

    1.-- http://vimaxfarma.com/

    2.-- http://asiongfarma.com/

    3.-- http://agenvimaxnusantara.com/

    BalasHapus
Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |