Cara mudah membuat menu navigasi pada template blogger versi terbaru

bysufyan Yaan -
Pada pecobaan kali ini saya menggunakan template contempo - yakni salah satu template terbaru blogger, Contempo memang memiliki sidebar, dan saya menyembunyikannya karena saya akan mengganti atau menambahkan sidebar yang berfungsi sebagai menu navigasi agar tampilan template lebih simple dan fresh antar mukanya, ikut langkah demi langkahnya.

contoh rancangan layout side nav blogger
contoh salah satu rancangan desain sidebar+navbar blogger kami

Langkah pertama Tambahkan CSS. 

  1. Masuk kepengaturan dasbor blogger.
  2. Pilih tema
  3. Pilih edit HTML
  4. Cari kode berikut: ]]></b:skin>
Letakan kode css berikut tepat di atas kode ]]></b:skin> tadi:
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 10;
  left: 10;
  background-color: #f0f0f0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #333;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 17;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
/* fit images to container */.container img {    max-width: 100%;    height: auto;}
#header{margin-right:5px}
#header a{color:rgb(128, 128, 128);display:inline-block}
#header img{max-height:17px;max-width:300px;vertical-align:middle}
#header .description{display:block}
#header h1,#header h2{margin:0;font-size:42px;font-weight:500;font-family: 'Grenze Gotisch', cursive;letter-spacing:2px;text-transform:uppercase}
#header .widget{background-repeat:no-repeat;background-size:contain;background-position:center}

Selanjutnya cari kode </nav> dan letakan kode berikut tepat di atasnya:
<span onclick='openNav()' style='font-size:30px;cursor:pointer'><svg style='width:44px;height:44px' viewBox='0 0 24 24'> <path d='M20 2H8C6.9 2 6 2.9 6 4V16C6 17.11 6.9 18 8 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M20 16H8V4H20V16M4 6V20H18V22H4C2.9 22 2 21.11 2 20V6H4M9.77 12.84L12.6 10L9.77 7.15L11.17 5.75L14 8.6L16.84 5.77L18.24 7.17L15.4 10L18.23 12.84L16.83 14.24L14 11.4L11.17 14.24L9.77 12.84Z' fill='#555'/> </svg></span>

Langkah kedua Tambahakn HTML.

Cari kode <body> dan letakan kode berikut di bawahnya:

<div class='sidenav' id='mySidenav'>
  <a class='closebtn' href='javascript:void(0)' onclick='closeNav()'><svg style='width:44px;height:44px' viewBox='0 0 24 24'>
    <path d='M20 2H8C6.9 2 6 2.9 6 4V16C6 17.11 6.9 18 8 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M20 16H8V4H20V16M4 6V20H18V22H4C2.9 22 2 21.11 2 20V6H4M9.77 12.84L12.6 10L9.77 7.15L11.17 5.75L14 8.6L16.84 5.77L18.24 7.17L15.4 10L18.23 12.84L16.83 14.24L14 11.4L11.17 14.24L9.77 12.84Z' fill='#555'/>
</svg></a>
  <a href='#'>Beranda</a>
  <a href='#'>Privasi</a>
  <a href='#'>Perihal</a>
  <a href='#'>sitemap</a>
     <a href='#'>Link1</a>
     <a href='#'>Link2</a>
     <a href='#'>Link3</a>
     <a href='#'>Link4</a>
</div>

Langkah ketiga tambahkan Javascript.

Masih di halaman editorial HTML Blogger, cari kode </body> (penutup tag body) dan letakan Javascript berikut tepat di atasnya:
<script>
function openNav() {
  document.getElementById(&quot;mySidenav&quot;).style.width = &quot;250px&quot;;
}
function closeNav() {
  document.getElementById(&quot;mySidenav&quot;).style.width = &quot;0&quot;;
}
</script>

Langkah terakhir untuk merobah font header Blog, tambahkan kode font Google berikut dan letakan di atas kode </head>:

 &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@500&amp;display=swap&quot; rel=&quot;stylesheet&quot;/&gt; 

Save template. Selesai. Lihat DEMO
Template demo adalah template Contempo yang telah lebih di sederhanakan.

Penutup.

Gunanya navigasi menu pada sidebar adalah untuk menghemat dan meminimaliskan tampilan blog agar tampil lebih mobile..

Dan karena di terapkan pada template contempo yang notabene sudah memiliki sidebar bawaan, maka harus di atur lebar sidebar bawaan menjadi tinggal 2px saja melalui pengaturan 'Customize' atau 'sesuaikan'.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Tags

5 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Djangkaru BumiOktober 29, 2020

    Saya lihat demonya keren banget ya
    terimakasih atas turorialnya
    Salam sukses selalu

    BalasHapus
    Balasan
    1. kuanyuOktober 30, 2020

      setuju mas, keren banget malah

      Hapus
    2. Anissa AuliasariOktober 30, 2020

      Padahal itu hanya template contempo - di rombak

      Hapus
  2. kuanyuOktober 30, 2020

    dengan ini blog terlihat lebih simpel, karena menunya berada di samping

    BalasHapus
    Balasan
    1. sufyan YaanOktober 30, 2020

      Tujuannya adalah memenuhi standard Google, antar muka mobile yang menhemat ruang baca. Sehingga halaman mobile dapat di maksimalkan.

      Hapus
Lebih baru Lebih lama

Formulir Kontak