Cara ini akan membuat halaman blog tampil unik, sederhana dan minimalis. Sebabnya tampilannya akan beradaptasi (adaptif dan responsif) dengan segala ukuran layar perangkat, mau itu laptop, tablet, maupun hape. Pada laptop dan tablet (ketika posisi landscape) tampilan menu akan tampak horizontal di atas halaman, sedangkan pada layar genggam ukuran hape tampilan menu berubah menjadi buka dan tutup hamburger menu yang intuitif ( beranimasi ).
Navbar ini dapat di terapkan ke template terbaru seperti contempo, essensial dan varian lainnya dengan sedikit trik. Baiklah sekarang kita cobaan ke template essensial dan Contempo karena dua template ini strukturnya sangat mirip alias identik.
- Masuk ke pengaturan atau dasbor blog
- cari menu theme atau tema
- Pilih edit HTML
1. CSS
Setelah masuk ke halaman editor HTML template blogger, cari kode </head> letakkan kode CSS berikut di atas kode tadi:
<style>.nav {width: 100%;height: 65px;position: fixed;line-height: 65px;text-align: center;z-index: 9999}.nav div.logo {float: left;width: auto;height: auto;padding-left: 3rem;}.nav div.logo a {text-decoration: none;color: #555;font-size: 2.5rem;}.nav div.logo a:hover {color: #00E676;}.nav div.main_list {height: 65px;float: right;}.nav div.main_list ul {width: 100%;height: 60px;display: flex;list-style: none;margin: 0;padding: 0;}.nav div.main_list ul li {width: auto;height: 60px;padding: 0;padding-right: 3rem;}.nav div.main_list ul li a {text-decoration: none;color: #777;line-height: 60px;font-size: 1.5rem;}.nav div.main_list ul li a:hover {color: #00E676;}.navTrigger {display: none;}.nav {padding-top: 20px;padding-bottom: 20px;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}/* Media qurey section */@media screen and (min-width: 768px) and (max-width: 1024px) {.container {margin: 0;}}@media screen and (max-width:768px) {.navTrigger {display: block;}.nav div.logo {margin-left: 15px;}.nav div.main_list {width: 100%;height: 0;overflow: hidden;}.nav div.show_list {height: auto;display: none;}.nav div.main_list ul {flex-direction: column;width: 100%;height: 100vh;right: 0;left: 0;bottom: 0;background-color: #111;/*same background color of navbar*/background-position: center top;}.nav div.main_list ul li {width: 100%;text-align: right;}.nav div.main_list ul li a {text-align: center;width: 100%;font-size: 3rem;padding: 20px;}.nav div.media_button {display: block;}}/* Animasi *//* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */.navTrigger {cursor: pointer;width: 30px;height: 25px;margin: auto;position: absolute;right: 30px;top: 0;bottom: 0;}.navTrigger i {background-color: #777;border-radius: 2px;content: '';display: block;width: 100%;height: 4px;}.navTrigger i:nth-child(1) {-webkit-animation: outT 0.8s backwards;animation: outT 0.8s backwards;-webkit-animation-direction: reverse;animation-direction: reverse;}.navTrigger i:nth-child(2) {margin: 5px 0;-webkit-animation: outM 0.8s backwards;animation: outM 0.8s backwards;-webkit-animation-direction: reverse;animation-direction: reverse;}.navTrigger i:nth-child(3) {-webkit-animation: outBtm 0.8s backwards;animation: outBtm 0.8s backwards;-webkit-animation-direction: reverse;animation-direction: reverse;}.navTrigger.active i:nth-child(1) {-webkit-animation: inT 0.8s forwards;animation: inT 0.8s forwards;}.navTrigger.active i:nth-child(2) {-webkit-animation: inM 0.8s forwards;animation: inM 0.8s forwards;}.navTrigger.active i:nth-child(3) {-webkit-animation: inBtm 0.8s forwards;animation: inBtm 0.8s forwards;}@-webkit-keyframes inM {50% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(45deg);}}@keyframes inM {50% {transform: rotate(0deg);}100% {transform: rotate(45deg);}}@-webkit-keyframes outM {50% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(45deg);}}@keyframes outM {50% {transform: rotate(0deg);}100% {transform: rotate(45deg);}}@-webkit-keyframes inT {0% {-webkit-transform: translateY(0px) rotate(0deg);}50% {-webkit-transform: translateY(9px) rotate(0deg);}100% {-webkit-transform: translateY(9px) rotate(135deg);}}@keyframes inT {0% {transform: translateY(0px) rotate(0deg);}50% {transform: translateY(9px) rotate(0deg);}100% {transform: translateY(9px) rotate(135deg);}}@-webkit-keyframes outT {0% {-webkit-transform: translateY(0px) rotate(0deg);}50% {-webkit-transform: translateY(9px) rotate(0deg);}100% {-webkit-transform: translateY(9px) rotate(135deg);}}@keyframes outT {0% {transform: translateY(0px) rotate(0deg);}50% {transform: translateY(9px) rotate(0deg);}100% {transform: translateY(9px) rotate(135deg);}}@-webkit-keyframes inBtm {0% {-webkit-transform: translateY(0px) rotate(0deg);}50% {-webkit-transform: translateY(-9px) rotate(0deg);}100% {-webkit-transform: translateY(-9px) rotate(135deg);}}@keyframes inBtm {0% {transform: translateY(0px) rotate(0deg);}50% {transform: translateY(-9px) rotate(0deg);}100% {transform: translateY(-9px) rotate(135deg);}}@-webkit-keyframes outBtm {0% {-webkit-transform: translateY(0px) rotate(0deg);}50% {-webkit-transform: translateY(-9px) rotate(0deg);}100% {-webkit-transform: translateY(-9px) rotate(135deg);}}@keyframes outBtm {0% {transform: translateY(0px) rotate(0deg);}50% {transform: translateY(-9px) rotate(0deg);}100% {transform: translateY(-9px) rotate(135deg);}}.affix {padding: 0;background-color: #333;}.myH2 {text-align:center;font-size: 4rem;}.myP {text-align: justify;padding-left:15%;padding-right:15%;font-size: 20px;}@media all and (max-width:700px){.myP {padding:2%;}}</style>
2. HTML
Masih di halaman editor HTML template Blogger letakkan kode HTML berikut di bawah
kode </head>:
<nav class='nav'>
<div class='container'>
<div class='logo'>
<a href='/'><data:blog.title/></a>
</div>
<div class='main_list' id='mainListDiv'>
<ul class='navlinks'>
<li><a href='#'>About</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<span class='navTrigger'>
<i/>
<i/>
<i/>
</span>
</div>
</nav>
<section class='home'>
</section>
<div style='height: 100px'>
<!-- just to make scrolling effect possible -->
</div>
<!-- Perlu Jquery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'/>
<script src='js/scripts.js'/>
<!-- Function used to shrink nav bar removing paddings and adding black background -->
<script>
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.nav').addClass('affix');
console.log("OK");
} else {
$('.nav').removeClass('affix');
}
});
</script>
3. JS
Masih di dalam halaman editor HTML template Blogger cari kode </body> dan letakkan kode berikut di atas kode tadi:
<script>$('.navTrigger').click(function () {
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
</script>
Selesai dan Save template
Kesimpulan dan catatan:
Pada demo kami telah membuang header bawaan, ikon panah dll. Untuk pertanyaan silahkan di diskusikan melalui kolom komentar di bagian bawah postingan ini. Oh ya satu lagi kelebihan Navbar ini, yakni ia fixed berada di atas header halaman Blogger kita ketika halaman di gulir naik dan turun.