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

  • Membuat efek linknudge pada label blog
    Salam sobat blogger, masih senantiasa berbagi untuk sobat semua dan kali ini saya akan share tentang membuat efek linknudge pada label posting blogger. walau pun trik ini sebenarnya dapat di terapkan menggunakan css yang pernah saya tulis disini, namun saya kali ini akan berbagi trik membuat linknudge menggunakan jquery. Blogging CSS SE…
  • Membuat posting di homepage warna warni
    salam sahabat blogger yang ganteng - ganteng dan cantek, kali ini saya mau share tentang cara bagaimana agar tampilan postingan di halaman depan atau homepage kita bisa berwarna warni. buat sobat blogger yang tertarik dengan tampilan ini dan ingin memasang di blognya agar tampil menarik tanpa mengganti template silahken di coba dan di kreasika…
  • Menerapakan jquery lightbox evolution
    Salam sobat blogger membuat postingan untuk share kali ini buat sobat yang masih bingung tentang jquery lightbox evolution. jquery lightbox ini saya gunakan di template ini pada konversi kode dan kontak bisa sobat lihat seperti apa itu jquery lightbox. untuk sobat yang tertarik dan ingin menerapkan ini untuk blognya saya akan memberikan trik…
  • Nivo Slider, jquery slider dengan 9 efek transisi
    Saya ingin memperkenalkan Nivo Slider jquery kepada Anda. Ini plugin Jquery mengagumkan untuk slider dengan 9 efek transisi yang unik, dan terlihat sangat profesional seperti slide show Flash. Salah satu slider yang paling mengesankan yang pernah saya lihat. Demo Bagaimana tentang efek? Keren? Plugin ini telah diuji untuk sebagian besa…
  • Membuat javascript random teks
    Random teks adalah sebuah tulisan atau kutipan tertentu yang di tampilkan secara acara acak ketika halaman telah sepenuhnya di muat, trik random teks ini cocok untuk membuat sebuah kutikan atau tulisan tertentu yang ingin anda tampilkan secara berbeda dan saya menerapkan trik ini pada tips di blog ini. untuk lebih jelasnya silahkan anda klik l…
  • Cara membuat tag pre di blogger
    Tag pre adalah sebuah elemen yang di gunakan untuk membungkus baris kode selain penggunaan menggunakan tag blokquote, tag pre umunya di gunakan oleh blog yang menyajikan barik kode tertentu pada sebuah artikel atau baris kode lainnya. buat sahabat yang masih bingung silahkan lihat gambar atau blog ini. Cara untuk membuat tag pre memang susah s…

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