Cara Membuat Daftar Menu Di Sidebar soho, contempo, emporio, notable template.

menu sidebar

blogger telah mengeluarkan beberapa tema template yang lebih modern dibandingkan tema sebelumnya, tema template tersebut adalah contempo, soho, emporio dan notable. template tema blog tersebut hadir dalam berbagai warna, dapat disesuaikan, dan dapat diterapkan ke tema blog dengan mudah.

sesuai dengan pernyataan blogger https://blogger.googleblog.com/2017/03/share-your-unique-style-with-new.html. blogger mengklaim bahwa Tema-tema ini tidak hanya dirancang agar terlihat labih bagus, tema ini juga dirancang untuk bekerja dengan baik dan secara otomatis menyesuaikan dengan layar apa saja, sehingga pembaca akan dapat dengan mudah melihat blog yang berada di komputer, ponsel atau tablet.

salah satu yang menarik dari tema template blogger yang baru (soho, contempo, emporio, notable )  yaitu di side bar atau di side nav yang dapat dibuka dan ditutup dengan klik menu hamburger (navigation menu) yang belum ada di tema template sebelumnya.

sidebar tema template blogger

Mungkin akan ada dipemikiran sebagian orang untuk menambahkan daftar list menu di sidebar nav tema template terbaru tersebut. jika anda salah satu yang berfikiran untuk menambahkan daftar list menu tersebut,
berikut adalah bagaimana cara membuat daftar menu Di Sidebar soho, contempo, emporio, notable template.

cara membuat daftar menu Di Sidebar soho, contempo, emporio, notable template.

1. sign in blogger, di theme pilih Edit HTML

2. cari kode  ]]</b:skin> , gunakan ctrl + f untuk mempermudah mencari  ]]</b:skin>
tempelkan kode berikut sebelum  kode ]]</b:skin>

pilih salah satu menu css berikut

• css menu side bar tanpa garis 

.sidebarmooreyi {

  height: 30%;

  width:180px;

  position: relative;

  z-index: 1;

  top: 0;

  left: 0;

  background-color:#ffffff;

  overflow-x: hidden;

  padding-top: 17px;

}

.sidebarmooreyi a {

  padding: 7px 3px 7px 3px;

  text-decoration: none;

  font-size: 19px;

  color: #1c0c00;

  display: block;

}

.sidebarmooreyi a:hover {

  color: #eb4800;

}

• css menu side bar dengan garis 

 .sidebarmooreyi {
  height: 30%;
  width:180px;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  background-color:#ffffff;
  overflow-x: hidden;
  padding-top: 17px;
}

.sidebarmooreyi a {
  padding: 7px 3px 7px 3px;
  text-decoration: none;
  font-size: 19px;
  color: #1c0c00;
  display: block;
  border-bottom:3px dashed #00f;
}

.sidebarmooreyi a:hover {
  color: #eb4800;
}

lakukan edit css jika ingin mengubah tampilan yang dikehendaki

bila kesulitan menemukan kode ]]</b:skin> . gunakan opsi lain menyimpan kode css diatas, yaitu lewat layout kemudian pilih theme designer, lalu di advanced pilih add css kemudian apply

3. tambahkan HTML berikut.

<div class="sidebarmooreyi">
  <a href="#"> Home</a>
  <a href="#"> Services</a>
  <a href="#"> Clients</a>
  <a href="#"> Contact</a>
</div>

keterangan : isi dengan url sendiri
# : url halaman yang dituju misalnya url home
home :  nama daftar list yang akan dibuat.

4. cara menambahkan html yaitu  di dashboard blogger pilih layout kemudian add a gadget di sidebar, pilih HTML / JAVASCRIPT

5. tempelkan kode HTML no 3 diatas lalu save
  

kemudian lihat tampilan blog dan cobalah side bar navigasinya 

untuk demo sidebar thema contempo bisa dilihat >>> disini <<< 

untuk demo sidebar thema soho bisa dilihat di blog ini 

demikianlah Cara Membuat Daftar Menu Di Sidebar soho, contempo, emporio, notable template, semoga bermanfaat.