GO Blog

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