Cara Menciptakan Sajian Dan Widget Melayang Fixed

Efek Gambar , trik blog    Comment   

Membuat salah satu widget melayang atau fixed di blog ketika discroll menciptakan blog menjadi lebih menarik dan mempermudah pengunjung. Pembaca blog tidak perlu menarik scroll untuk kembali melihat hidangan atau widget utama, pembaca tetap dapat melihatnya.

Sebelum mencoba trik ini, pastikan kau mengetahui instruksi CSS dan id widget yang akan dibentuk melayang nantinya. Contohkan instruksi CSS pada widget ibarat ini #top-wrapper dan id widget ibarat ini #HTML7. Karena setiap template blog berbeda-beda.

Cara Membuat Widget Sidebar Melayang Fixed
1. Login ke akun blogger.com
2. Pilih Template lalu Edit HTML
3. Tekan Ctrl F dan cari instruksi </body>
4. Letakan instruksi 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 instruksi warna merah dengan kode css dan id widget
6. Simpan template kalau sudah selesai.
Sumber https://www.kurniasepta.com/