Blog Personal tentang tips Blogging dan Internet Marketing

Cara Membuat Sticky Widget Pada Navbar

Sticky, apa sih? Oh ternyata menghentikan salah satu elemen atau beberapa elemen sekaligus pada suatu blog. Cara kerjanya, jika blog digulirkan ke bawah maka elemen yang dikenakan fungsi sticky tidak akan ikut bergulir alias diam di tempat. Jadi kaya gitu kira-kira fungsi dan cara kerja sticky widget.

Okey, berikut tahap pengerjaannya:

Pertama masuk ke blog Anda jangan blog tetangga ya, lalu pilih blog mana yang akan digunakan untuk sarana latihan. Jika sudah, pilih TEMPLATE lalu pilih EDIT HTML. Selanjutnya Anda akan melihat sekumpulan kode HTML, CSS, dan JQuery berkumpul jadi satu yang membentuk suatu blog Anda.

Cari kode ]]></b:skin>, lalu copas (copy dan paste) kode dibawah ini dan sematkan di atas kode ]]></b:skin>

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#menu .widget-content {padding:0;margin:auto;}
Kemudian cari kode </body> lalu copas kode dibawah ini dan sematkan di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("menu");
//]]>
</script>
menu merupakan elemen yang akan dikenakan fungsi sticky. Jadi jika Anda ingin menggantinya, cari id mana yang akan dikenakan. LIHAT HASILNYA
Ayo Like Facebooknya
Tag : Blogging

Share this:

Share this with short URL: Get Short URLloading short url

Berlangganan :
Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari langsung di pesan kotak masuk.

feedburner


Anda telah membaca artikel :
Cara Membuat Sticky Widget Pada Navbar
Semoga bermanfaat, Terima kasih.
Cara style text di komentar Disqus:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

Tidak ada komentar

Back To Top