Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Menu dan Widget Melayang Fixed

Membuat salah satu widget melayang atau fixed di blog saat discroll membuat blog menjadi lebih menarik dan mempermudah pengunjung. Pembaca blog tidak perlu menarik scroll untuk kembali melihat menu atau widget utama, pembaca tetap bisa melihatnya.

Sebelum mencoba trik ini, pastikan kamu mengetahui kode CSS dan id widget yang akan dibuat melayang nantinya. Contohkan kode CSS pada widget seperti ini #top-wrapper dan id widget seperti ini #HTML7. Karena setiap template blog berbeda-beda.

Cara Membuat Widget Sidebar Melayang Fixed
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode </body>
4. Letakan kode berikut ini di atasnya

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<SCRIPT>
$(document).ready(function() {
var div = $(&#39;#top-wrapper,HTML7&#39;);
var start = $(div).offset().top;
$.event.add(window, &quot;scroll&quot;, function() {
var p = $(window).scrollTop();
$(div).css(&#39;position&#39;,((p)&gt;start) ? &#39;fixed&#39; : &#39;static&#39;);
$(div).css(&#39;top&#39;,((p)&gt;start) ? &#39;0px&#39; : &#39;&#39;);
});
});
</SCRIPT>

5. Ganti kode warna merah dengan kode css dan id widget
6. Simpan template jika sudah selesai.

28 komentar untuk "Cara Membuat Menu dan Widget Melayang Fixed"

  1. Kereenn dah tips yang satu ini,,,
    pengen nyobak jadinya...
    tpi pertamax dulu ah,,,
    salam.

    BalasHapus
  2. Salam-salam deh buat blogspot ini isinya menarik, maju terus dan selalu menginformasikan hal-hal yang bermanfaat jangan bosan-bosan.

    BalasHapus
  3. mantap gan..
    kunjungan dong gan..

    BalasHapus
  4. Makasih untuk langkah-langkahnya, semoga bermanfaat untuk yang lain juga..

    BalasHapus
  5. Hai gan pada kesenpatan kali ini saya akan menyimak kembali informasi yang ada berikan, ini sungguh infomasi yang bagus pertama kali aku baca memiliki manfaat unggul sangat luar biasa semoga kedepanya lebih bagus lagi untuk menginformasikan hal-hal yang baru.

    BalasHapus
  6. Makasih untuk informasinya, sangat membantu, di tunggu informasi bermanfaat lainnya. salam kenal..

    BalasHapus
  7. Salam blogspot semuanya. saya sudah menyimak informasinya keren bermanfaat, dan menakjubkan. semoga semakin sukses ajah deh.

    BalasHapus
  8. Terimakasih atas sajian informasi nya, sangat membantu semoga bermanfaat " salam Sehat "

    BalasHapus
  9. widih mantep bener nih gan makasih bisa saya coba ya gan

    BalasHapus
  10. Apakabar semuanya ?? Semoga baik-baik saja. Wah tadi saya sudah menyimak semua informasinya terimakasih ya semoga informasiny lebih menarik lagi dn bermanfaat.

    BalasHapus
  11. membaca postingan diatas patut dijadikan motivasi buat saya atas prestasinya, makasih banyak gan atas sharenya, di tunggu share selanjutnya salam

    BalasHapus
  12. boleh langsung di praktekan dong ya^^ terimakasih mau berbagi ilmu^^

    BalasHapus
  13. terima kasih gan atas infonya nich

    BalasHapus
  14. jangan lah melupakan sholat

    BalasHapus
  15. id widget sama kode css nya mana gan?

    BalasHapus
  16. selamat beraktivitas. . .mari kita awali aktivitas hari ini dengan menyimak informasi yang aktual di halaman yang sangat luar biasa ini !!!

    BalasHapus
  17. infonya sangat bermanfaat sekali gan, makasih. beritanya bagus dan sangat menarik sekali untuk di baca.

    BalasHapus
  18. Ada cara seperti itu juga ya? Terima kasih banyak..

    BalasHapus
  19. Nice and very helpful information i have got from your post. Even your whole blog is full of interesting information which is the great sign of a great blogger.

    Toshiba - Satellite 15.6" Laptop - 8GB Memory - 750GB Hard Drive - Mercury Silver

    Toshiba - Satellite 15.6" Laptop - 4GB Memory - 500GB Hard Drive - Satin Black (C55A5243NR)

    BalasHapus
  20. wuah hebat banget yang punya blog ini. salam kenal gan

    BalasHapus
  21. bnyak ilmu yang saya dapat dari blog ini.

    Salam Kenal Dari Kami galeri-obat.com Menjual Aneka Produk Kesehatan Pria Dan Wanita Terlengkap Dan Terlaris.

    Obat Pembesar Penis

    Jual Obat Pembesar Penis

    Obat Pembesar Penis Alami

    Obat Pembesar Penis Permanen

    Obat Pembesar Penis Herbal

    Vimax

    Vimax Asli Canada

    Agen Resmi Vimax

    Vimax Asli

    Vimax Pills

    ----------------------------------------------------

    Obat Pembesar Penis KLG

    Jual Obat Pembesar Penis KLG

    KLG Herbal

    Pembesar Penis KLG

    ------------------------------------------------

    Obat Pembesar Alat Kelamin Pria

    Neosize xl

    Jual Neosize xl

    Jual Neosize xl asli

    --------------------------------------------

    Obat Pembesar Alat Vital Pria

    Vigrx Plus

    Jual Vigrx Plus

    Vigrx Plus Original

    BalasHapus
  22. Tutarni : Terima kasih atas tutorial yang sangat bermanfaat, semoga bisa menambah ilmu blogger pemula kayak saya :)

    BalasHapus
  23. Thank Gan Tipsnya

    http://jamutradisionalmujarab.com/obat-jerawat-tradisional/

    BalasHapus

Berlangganan via Email