Cara untuk membuat floating sidebar

Javascript jQuery

Bagaimana mengubah sidebar Anda menjadi sebuah bar yang mengambang?. Tutorial ini menjelaskan, cara mengubah sidebar yang ada untuk floating bar. Teknik ini dapat diterapkan untuk widget tunggal, bukan seluruh sidebar, sehingga widget hanya melayang saat kalaman digulung le atas atau ke bawah.

Hal ini dapat dibuat dengan menambahkan kode Javascript ke blog Anda. Pertama, cek apakah Anda telah memasukkan jQuery pada template blog Anda. Hal ini dapat dilakukan dengan langkah buka Template Blog> Edit HTML. Kemudian cari kode ini

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

Jika ada, maka baik. Jika tidak tambahkan kode di atas tepat di bawah kode ]]></b:skin>, cari menggunakan Ctrl + F dan pencarian.

Kemudian cari salah satu kode di bawah ini. Dalam template default

<div class='sidebar_wrapper'>

Atau dalam sebagian besar template blogger kustom (Jika Anda tidak dapat menemukannya, aau id Anda berbeda)

<div id='sidebar-wrapper'>

Sekarang salin kode di bawah ini dan tempel di atas kode </body>.

<script type="text/javascript">
        $(function() {
            var offset = $(".sidebar_wrapper").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $(".sidebar_wrapper").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(".sidebar_wrapper").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

Ganti teks yang berwarna merah dengan nilai yang anda ingin (jika Anda menggunakan template lain). Untuk template kustom, nilai bisa apa saja seperti sidebar-wrapper, misalnya. Jika id = "melayang", ganti kode warna merah dengan #melayang dan jika class = 'melayang', lalu ganti dengan .melayang. anda bisa memberi jarak atas dengan mengganti

nilai$(".sidebar_wrapper").stop().animate({
                        marginTop: 0
                    });

Menjadi

$(".sidebar_wrapper").stop().animate({
                        marginTop: 20
                    });

Demikian saja, semoga berguna dan sukses.......

Artikel Terkait

  • Klik kanan hanya berfungsi di tag pre
    Trik ini adalah bagian dari tujuan untuk melindungi content blog anda, mematikan fasilitas klik kanan dengan mengeset tag <body> menggunakan dasar oncontextmenu='return false;'. trik ini mematikan semua klik kanan dalam blog, lalu bagaimana caranya kita membuat sebuah ijin klik kanan yang berfungsi di area tertentu saja... kali ini saya…
  • Filter otomatis kata - kata kotor dalam komentar
    Adakalanya sebuah komentar yang masuk dalam blog anda memiliki kata - kata yang tidak pantas untuk di cantumkan dalam komentar dan ini mengganggu pengunjung lain yang berkomentar. umumnya tidakan berkomentar rendahan seperti ini dilakukan oleh orang yang tidak bertanggung jawab dan tidak memiliki etika yang baik yang tidak berani menampakkan d…
  • Blokir otomatis link aktif di dalam komentar
    Blogger memang sudah memberi fasilitas moderasi untuk mengontrol kegiatan komentar di dalamnya, namun jika blog anda tergolong sebuah blog yang memiliki aktifitas komentar yang ramai tidak mungkin anda akan memeriksa satu persatu, selain memakan waktu juga menambah pekerjaan. Tidak semua pengunjung blog memiliki itikad baik, santun dan memahami…
  • Memasang alert untuk mengaktifkan javascript
    Tutorial ini berguna untuk para pengunjung blog anda yang menon-aktifkan fungsi javascript di web browser mereka. misalnya, ketika blog anda tidak memiliki tampilan maksimal saat fungsi javascript di web browser pengunjung anda dinon-aktifkan, maka para pengunjung blog anda harus mengaktifkan fungsi javascript di web browser mereka dengan men…
  • Memgenal javascript dan cara menggunakan
    Dalam artikel ini Anda mempelajari dasar-dasar JavaScript dan membuat program JavaScript pertama Anda. Apa itu JavaScript? JavaScript adalah bahasa scripting yang digunakan untuk script sisi klien. JavaScript dikembangkan oleh Netscape pada tahun 1995 sebagai metode untuk memvalidasi bentuk dan menyediakan konten interaktif ke situs web. yan…
  • Mematikan link aktif di komentar dengan jQuery
    Jika Anda telah bosan berurusan dengan semua jenis komentar spam dan Anda begitu sibuk untuk meninjau semua komentar, maka trik blogger hack baru ini akan membantu Anda untuk itu dengan menghapus link yang disertakan dalam komentar dan menggantinya dengan teks biasa menggunakan jQuery. Cara Hapus Link Dalam Komentar Dengan jQuery 1. Masuk k…

2 komentar


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...