Pernahkah anda melihat sebuah blog atau website yang pada bagian menubar atau navigationbar nya saat anda embaca artikel sampai bawah tetap berada diatas? Jika pernah maka itulah yang dinanmakan 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>
Lumayan mudah sih tapi terkadang tidak semua langsung cocok disemua template blog harus ada editing terlebih dahulu. Untuk melihat demo bagaimana sticky itu terjadi klik dibawah ini.
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;
}<body>
<div class="sticky-header"><a href="http://yuktebarilmu.blogspot.com">Home</a> | About | <a href="http://yuktebarilmu.blogspot.com">Contact</a></div>
<div class="content-scroll">
<p>
Hello My Name is Marwan Abdul Anwar</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus massa dolor, facilisis at ante a, ornare lobortis est. Proin a accumsan tortor, non lacinia lorem. Etiam suscipit nisl id eros porta, et mollis orci consequat. Curabitur vitae eleifend nulla, in semper neque. Nulla tincidunt sollicitudin nibh, quis pharetra nisl vestibulum id. In hac habitasse platea dictumst. Sed fermentum purus id molestie convallis. Aliquam quam turpis, ultrices vel dapibus a, convallis sit amet nunc. Donec eleifend augue sed quam tincidunt, in posuere nisi dignissim. Phasellus bibendum odio dui, sit amet venenatis augue aliquam et. Morbi non condimentum velit. In non sem convallis, porta dolor vitae, volutpat justo. Vestibulum rutrum pellentesque augue, quis aliquet velit tincidunt ut.
Praesent et purus dui. Maecenas efficitur nec augue ut faucibus. Suspendisse lobortis purus eget magna porta viverra. Fusce convallis sed nisi nec blandit. In elementum neque at metus mollis iaculis. Cras tincidunt quam in feugiat feugiat. Vivamus lobortis enim vitae arcu rutrum iaculis. Curabitur posuere libero et diam ornare, ut iaculis urna interdum. Aliquam at ex in ipsum euismod gravida. In accumsan hendrerit massa nec viverra. Ut volutpat ultricies tincidunt. Donec non lobortis purus. Sed non mauris vel tortor venenatis facilisis vitae in libero. Suspendisse sagittis accumsan lacus vel lobortis. Curabitur et laoreet sem. Donec eget aliquet erat.</p>
</div>
</body>
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. Untuk melihat demo bagaimana sticky itu terjadi klik dibawah ini.
Terima kasih anda telah membaca artikel Membuat Sticky Pada Menu Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.
0 Response to "Membuat Sticky Pada Menu Blog"
Post a Comment
Jika ada kurang paham atau mau memberikan tambahan ilmu tentang hal serupa segera layangkan pada kolom komentar. Karena ilmu yang kita miliki mesti kita amakan karena itu akan berbuah pahala bagi pengamal dan pemberi ilmunya.
"Barangsiapa yang menunjuki kepada kebaikan maka dia akan mendapatkan pahala seperti pahala orang yang mengerjakannya.” (HR. Muslim no. 1893).
Kode Emoticon :