Manfaat Buah Alpukat Yang Luar Biasa Untuk Tubuh Kita Menjadi Sehat

pada tanggal
0

Membuat Menubar Sampai Bawah ( Sticky ), Menubar atau Navigationbar

pada tanggal

IZB - Pernahkah anda melihat sebuah blog atau website yang pada bagian menubar atau navigationbar nya saat anda membaca artikel sampai bawah tetap berada diatas? Jika pernah maka itulah yang dinamakan dengan Sticky lebih tepatnya sih efek yang ditimbulkan sticky itu.

Lalu cara membuatnya bagaimana? Sejauh ini saya masih kesulitan dalam menerapkan pada blog saya jika anda bisa membantu hubungi saya namun untuk mencoba membuatnya anda cukup ikuti tutorial dibawah ini.

Pertama anda masukan kode dibawah ini tepat diatas ]]><./b:skin>

.sticky-header { background-color: #fcd683; ; color: #fff; width:100%; position: fixed; top: 0; left: 0; margin: 0; padding: 10px; text-align:left; letter-spacing: 3px; } .content-scroll{ height:1000px; padding:100px 0px 0px 50px; } .content-scroll p{ height:50px; }

Lalu anda masukan kode dibawah tepat diatas dimana kode yang anda ingin menjadi sticky. Saya ambil contoh untuk membuat bagian sticky pada bagian top navigation bar


<body>

<div class="sticky-header"><a href="https://izbone.blogspot.com">Home</a> | About | <a href="https://izbone.blogspot.com">Contact</a></div>

<div class="content-scroll">

<p>

Hello My Name is IZB</p>

<p>TESTING TESTONG</p>

</div>

</body>


Selanjutnya anda tinggal Simpan dan lihat hasilnya. Jika berantakan coba diatur kembali dengan inspeksi element pada homepage.

INGAT! Sebelum mengedit bagian ini sebaiknya anda backup terlebih dahulu template anda jika anda tidak ingin pusing ketika mengalami masalah saat terjadi.

Lumayan mudah sih tapi terkadang tidak semua langsung cocok disemua template blog harus ada editing terlebih dahulu.

Comments

Post a Comment