Membuat Sajian Kafe Responsive Mengecil Ketika Di Scroll Atau Di Gulir Kebawah

bang2 sutara - 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 :

Membuat Menu Bar Mengecil Saat Di Scroll

Silahkan kalian login ke akun blogger
Masuk ke sajian template atau thema lalu cari instruksi </head> .
Copy dan tempelkan kedua instruksi 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/javascript'>     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 instruksi <body> , dan tempelkan instruksi dibawah ini sempurna dibawah instruksi <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 menyerupai ini, kemungkinan instruksi template kalian tidak memiliki struktur instruksi pemanggil jenis sajian kafe menyerupai ini, maka untuk solusinya silahkan kalian tempelkan instruksi dibawah ini sempurna diatas instruksi </head> .

<script type='text/javascript'> //<![CDATA[ if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" 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/