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.......

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...