Monday, December 4, 2017

√ Cara Menciptakan Sajian Di Blog Melayang Ketika Di Scroll

Memiliki blog dengan tampilan yang keren merupakan idaman semua sebagian blogger, salah satu yang ketika ini sedang banyak di bicarakan para blogger di group-group facebook ataupun forum blogger yaitu template VioMagz. didalam pembicaraan tersebut banyak blogger yang memuji-muji template tersebut alasannya yaitu mempunyai tampilan yang keren dengan fitur hidangan navigasi melayang. Nah pada kesempatan kali ini saya ingin sedikit menyebarkan gosip mengenai Cara Membuat Menu di Blog Melayang Ketika blog di Scroll kebawah.Memiliki blog dengan tampilan yang keren merupakan idaman semua sebagian blogger √ Cara Membuat Menu di Blog Melayang Saat di Scroll


Memang sejak hadirnya template VioMagz, aneka macam teman-teman blogger yang mengganti template blognya dengan template buatan mas sugeng tersebut. tak terkecuali blog yang saya miliki yaitu Cara aQbar. salah satu alasan kenapa saya ingin memakai template tersebut yaitu alasannya yaitu template VioMagz mempunyai tampilan hidangan yang sederhana namun tetap elegan ditambah lagi hidangan blog melayang ketika di scroll.


Menu navigasi pada blog merupakan fitur penting untuk memudahkan visitor mengunjungi halaman lainya yang ada di blog kita. jikalau pengunjung sudah merasa dipermudah dengan fitur tersebut maka secara otomatis blog kita akan mempunyai nilai SEO lebih dimata google, alasannya yaitu google intinya sangat suka dengan blog yang memudahkan pengunjungnya.


Cara Membuat Menu di Blog Melayang Saat di Scroll


Jika kau tertarik untuk merubah hidangan navigasi blog kau menjadi melayang. silahkan ikuti panduan Cara Membuat Menu di Blog Melayang Saat di Scroll dibawah ini.


Baca Juga: 


Hal pertama yang harus kau lakukan untuk menciptakan hidangan navigasi melayang yaitu membuka halaman dasboard blogger kamu, kemudian pilih hidangan tema kemudian klik edit HTML.


Kemudian cari aba-aba </head> untuk mempermudah pencarian aba-aba tersebut, ketikan kombinasi tombol CTRL+F pada keyboard kau kemudian masukan kode </head> dan tekan enter.


Jika aba-aba sudah kau temukan letakan aba-aba jQuery dibawah ini sempurna dibawah kode </head>


<script async='' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/j4vascript'></script>


Namun jikalau template yang kau sudah terdapat script tersebut lewati langkah ini.


Cari lagi aba-aba </body> kemudian letakan aba-aba dibawah ini diatasnya.


<script type='text/j4vascript'>
$(document).ready(function() {
var stickyNavTop = $('#header-navigation').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#header-navigation').css({ 'position': 'fixed', 'top':0, 'z-index':9999, 'width':'100%' });
} else {
$('#header-navigation').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>


Note: Ganti aba-aba #header-navigation sesuai dengan ID atau CLASS pada template anda


Sebagai citra supaya kau gampang menemukan ID atau CLASS, biasanya tampilan HTML pada hidangan mempunyai bentuk struktur menyerupai aba-aba dibawah ini, Nah ID itulah yang harus kau masukan kedalam JavaScript.


<nav id='header-menu'>
<ul>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
</nav>


Nah itulah panduan mudah Cara Membuat Menu di Blog Melayang Saat di Scroll, Oia sedikit gosip saja, bergotong-royong nama ID atau Class yang saya contohkan diatas akan berbeda-beda dengan template yang kau gunakan. oleh alasannya yaitu itulah kau harus mengekspor templatenya supaya menemukan ID/CLASS yang akan kau setting melayang.



Sumber aciknadzirah.blogspot.com
on