Skip to main content

CARA MEMBUAT SIDE NAVBAR PALING KEREN UNTUK BLOGGER

tampilan side navigasi pada mobile
tampilan side navigasi pada mobile
drawing by Anissa
Selamat malam teman teman, pada tulisan tulisan sebelumnya saya telah memberikan panduan perihal bagaimana membuat navbar responsif yang dapat dengan mudah di terapkan ke dalam template bawaan blogger. Diantaranya:
  • Cara membuat navbar slide down untuk template blogger
  • Cara membuat navbar mobile vertikal untuk template blogger
  • Cara membuat navbar menu gulir plus kotak pencarian untuk template blogger
  • Cara membuat navbar dengan menu dropdown plus kotak pencarian untuk template blogger
  • Cara membuat navbar blogger mirip situs CNN
  • Dan masih banyak lagi, seolah blog ini adalah spesialis tutorial dan trik membuat menu navigasi atau navbar untuk blogger
Namun kali ini saya ingin memberikan panduan cara membuat side navigasi atau side navbar sesuai judul blog, navbar ini letaknya di sebelah kiri halaman blog, perhatikan contoh berikut:

Trik ini saya utak atik dari halaman w3school, coba deh klik link berikut dan ingat, jika ingin melihat hasilnya jangan lupa klik 'RUN' di atas menu ya...Cobalah klik demo dibawah ini:
CARA MEMBUAT SIDE NAVBAR PALING KEREN UNTUK BLOGGER
Kalau kalian sudah klik 'RUN' tombol warna hijau akan tampil hasil pekerjaan saya seperti pada gambar berikut di bawah, kalian juga pasti akan bisa melakukan hal yang sama.

Cara menerapkannya:

1. CSS

Login ke Blogger.
  1. Pilih blog untuk diperbarui.
  2. Di menu sebelah kiri, klik Tema.
  3. Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
  4. Cari kode </head>
Letakan kode CSS berikut tepat diatas kode </head>:
<style>
body {
  font-family: "Lato", sans-serif;
  background: #d0d0d0;
}
.sidenav {
  display: none;
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 101;
  top: 50;
  left: 5;
  background: linear-gradient(-50deg, #ee5952, #ea3a7e, #20aadb, #23e0b3);background-size: 200% 150%;-webkit-animation: Gradient 10s ease infinite;-moz-animation: Gradient 10s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:10 50%}}@keyframes Gradient{0%{background-position:10 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
  overflow-x: hidden;
  }
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #fff;
  display: block;
}
.sidenav a:hover {
  color: #f1f1f1;
}
.sidenav .closebtn {
  position: absolute;
  top: 230;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.avatar {
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
</style>

2. HTML

Letakan kode berikut tepat dibawah kode </head>:
<div id="mySidenav" class="sidenav">  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><svg style="width:34px;height:34px" viewBox="0 0 24 24">    <path fill="#ff0000" d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" /></svg></a>  <a href="#">Perihal</a>  <a href="#">Blog</a>  <a href="#">Klien</a>  <a href="#">Kontak</a></div><center><img src="https://1.bp.blogspot.com/-DIZ630fJ_Fk/XfjgrYmnj4I/AAAAAAAApw8/BKhOtKtQheUKC92Mt6rdmlrVqNex3a0lgCLcBGAsYHQ/s1600/sasa.web" alt="Avatar" class="avatar"><img src="https://1.bp.blogspot.com/-EgEjdBF6ovA/XfWx7dmKVxI/AAAAAAAApvY/4VFPIsKVh9UD75su2QauiLNoEPmvo2YnACLcBGAsYHQ/s1600/20191215_110326.jpeg" alt="Avatar" class="avatar"><img src="https://1.bp.blogspot.com/-R7HFNDhGS8M/XfuZIk5NUvI/AAAAAAAApzc/A79j9uOMDR0sKKB6i1JO8Xm5yHRm6VGlACLcBGAsYHQ/s1600/adel.jpg" alt="Avatar" class="avatar"></center><div style="padding-left:16px">

3. Javascript

Terakhir letakan kode Javascript berikut ini tepat di atas kode </body>:
<script>function openNav() {  document.getElementById("mySidenav").style.display = "block";}
function closeNav() {  document.getElementById("mySidenav").style.display = "none";}</script>
Save tema 

Mungkin Anda Suka:

Comments

  1. Sebenarnya aku baca semua artikelnya, cuma giliran CSS code-code itu aku lewatin, pernah coba mencernah yang postingan sebelumnya kalau ga salah membuat Navgar Blogger seperti CNN tetep ga ngeh, hahaha.
    Kata ornag kalau ga faham kga usah memaksakan diri.

    ReplyDelete
  2. Aku kurang paham masalah CSS, html, ataupun javascript, masih pakai template bawaan dan template yang sudah jadi dari orang lain. Melihat kodenya saja sudah pusing.😂

    ReplyDelete
  3. agak membingungkan ya kalo bagi pemula, soalnya gw gak mudeng sama sekali masalah html javascript dan temen2nya :D, tapi makasih buat caranya, semoga gw bisa dapet mempraktikanya heheh :D

    ReplyDelete
  4. Sebenarnya pernah sih utak-atik css, bahkan sampek edit html di Template Blog, tapi entah kenapa kayaknya masih jarang yang berhasil, kayaknya harus belajar lagi deh

    ReplyDelete
  5. Coba ah, biar sidebar blogger saya jadi keren.😃

    ReplyDelete

Post a Comment

Ajukan pertanyaan dan berikan detailnya.

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Komentar yang kami hapus dan masih menyisakan profile komentatornya bukan komentar kritik, kami tidak anti kritik samasekali. Tapi komentar yang menyertakan link aktif. Karena saran kritik dan bahkan celaan untuk blog dengan niche seperti ini amatlah penting untuk di jadikan alat koreksi. Terimakasih!

Popular Posts

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

KISAH MENAKJUBKAN DI DALAM CANGKANG TELUR

Kisah UAS Dan Mellya Juniarti: Tidak ada yang abadi.

Copyright © editblogtema. All rights reserved.