komputerdia.com - Dari sekian banyak jenis sajian kafe yang sanggup kalian pasang di situs atau blog, jenis sajian kafe inilah yang paling banyak dicari para blogger. Pasalanya jenis sajian kafe ini selain sanggup mengecil ketika kursor di scroll, sajian kafe atau sajian navigasi ini juga terlihat sangat professional serta user friendly.
Bagi kalian yang menginginkan janis sajian kafe dengan gaya yang lainnya, kalian sanggup mengulasnya pada artikel terkait dibawah ini :
Baca Juga :
- Cara Membuat Menu Bar Responsive Ketika Di Klik Kanan .
- Cara Membuat Menu Bar Responsive Blogger Tanpa Edit Html .
- Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog .
- Cara Membuat Menu Bar Responsive Dengan Tambahan Efek .
Membuat Menu Bar Mengecil Saat Di Scroll
- Silahkan kalian login ke akun blogger
- Masuk ke sajian template atau thema lalu cari arahan </head> .
- Copy dan tempelkan kedua arahan dibawah ini sempurna diatas kode </head> .
<style type='text/css'> header1 { width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #0683c9; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; } header1 h1#logo { font-family: "Oswald", sans-serif; font-size: 60px; font-weight: 400; line-height: 150px; display: inline-block; float: left; height: 150px; margin: 0; padding: 0; color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header1 nav1 { display: inline-block; float: right; } header1 nav1 a { line-height: 150px; margin-left: 20px; color: #9fdbfc; font-weight: 700; font-size: 18px; text-decoration: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /* smaller nav1 */ header1 nav1 a:hover { color: #ffffff; } header1.smaller { height: 75px; } header1.smaller h1#logo { width: 150px; height: 75px; line-height: 75px; font-size: 30px; } header1.smaller nav1 a { line-height: 75px; } @media all and (max-width: 660px) { header1 h1#logo { display: block; float: none; margin: 0 auto; height: 100px; line-height: 100px; text-align: center; } header1 nav1 { display: block; float: none; height: 50px; text-align: center; margin: 0 auto; } header1 nav1 a { line-height: 50px; margin: 0 10px; } header1.smaller { height: 75px; } header1.smaller h1#logo { height: 40px; line-height: 40px; font-size: 30px; } header1.smaller nav1 { height: 35px; } header1.smaller nav1 a { line-height: 35px; } } </style> <script type='text/j4vascript'> function init() { window.addEventListener('scroll', function(e){ var distanceY = window.pageYOffset || document.documentElement.scrollTop, shrinkOn = 200, header1 = document.querySelector("header1"); if ((distanceY) > (shrinkOn)) { $(header1).addClass("smaller"); } else { if ($(header1).hasClass("smaller")) { $(header1).removeClass("smaller"); } } }); } init(); </script> - Selanjutnya cari arahan <body> , dan tempelkan arahan dibawah ini sempurna dibawah arahan <body> .
<header1 class='site-header1'> <div class='container clearfix'> <h1 id='logo'> LOGO </h1> <nav1> <a href=''><b>Home</b></a> <a href=''><b>Menu</b></a> <a href=''><b>Data</b></a> </nav1> </div> </header1>
- Langkah terakhir silahkan kalian tekan tombol simpan atau save, dan lihat hasilnya.
- Bagi kalian yang tidak berhasil menciptakan sajian kafe ibarat ini, kemungkinan arahan template kalian tidak memiliki struktur arahan pemanggil jenis sajian kafe ibarat ini, maka untuk solusinya silahkan kalian tempelkan arahan dibawah ini sempurna diatas arahan </head> .
<script type='text/j4vascript'> //<![CDATA[ if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/j4vascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");} //]]> </script> - Simpan template kalian dan lihat hasilnya.
Sumber Referensi : https://mastamvan.blogspot.co.id/