Cara Menyembunyikan Sidebar dan Menampilkannya Sebagai Hamburger Menu Pada Tema/Template Emporio

Mengedit tema bawaan blogger mamang gampang-gampang susah . Mungkin bagi orang yang sudah menguasai kode seperti css,html maupun javascrip akan sangatlah mudah untuk mengedit tema bawaan dari blogger ini. Bahkan tak sedikit dari mereka bukan hanya mengedit atau meredesain tapi juga mebuat buat templat sendiri dengan style mereka sendiri karena merasa sudah mampu membuatnya dan menjualnya ke para blogger yang menyukai template hasil buatannya.
Namun bagi sebagian orang akan sangat terasa sulit karena keterbatasan akan kemampuannya dalam mengolah kode-kode syntak yang sangat begitu memusingkan kepala. Terutama bagi saya yang hanya mengndalkan css yang pas-pasan. Begitu bisa bisa mengubah tema bawaan dari blogger ini tentu saja ingin membagi dengna blogger lainnya ketika element yang di editnya terlihat tampil berbeda .

Untuk itu saya ingin membagikan bagaimana saya bisa mengubah tampilan sidebar pada tema emporio ini yang yang jadi bebrbeda dengan bawaanya. Yakni sidebar tampil tesembunyi sebagai hamburger menu atau sidebar muncul ketika ikon hamburger menu ditekan. Style ini biasanya pada versi mobile saja. Tapi saya telah berhasil membuatnya untuk tampil hanaya pada tampilan desktop. lalu gimana caranya ? Simak langkah-langkahnya. hanya beberapa langkah saja.

Tapi sebelum memulai langkah pertama sobat emporian harus tahu dulu kalau memunculkan sidebar sebagai hamburger menu akan mengubah style tema emporio ini sendiri. Dan tentu saja bila sobat emporian tidak suka dengan stylenya tentu saja akan merasa menyesal. Maka dari itu p[ertimbangkan dahulu dan lihat dulu hasil dari contoh gambar agar sobat emporian lebih mantap dalam mengeditnya.

Oke langsung saja ke langkah Pertama

1. Langkah Pertama Menghapus/Menghilangkan Sidebar

   
Sebenarnya  untuk menghilangkan sidebar pada tema emporio, hanya dengasn tidak mengisi/memasang  widget sidebar pun sebenarnya  tidak akan muncul. Tapi ruang kosong untuk sidebar tersebut akan muncul. Untuk itu kita harus menghapunya terlebih dahulu.

Untuk menghapusnya , Masuk ke dasboard Edit Html. Lalu cari kode:

+ sidebar.width

Lalu hapus semua kode tersebut
 

Kemudian save

Lihat dulu hasilnya. Biasanya sidebar akan berpindah kebawah. Jika sudah ada dibawah berarti kita akan ke tahap berikutnya.

2. Langkah ke dua

   Cari kode 

body.sidebar-visible .page

   

select kode seperti gambar dan ganti semua dengan kode berikut:

[awas jangan kelebihan dan jangan kekurangan /perhatikan kodenya dengan benar]

   

body.sidebar-visible .page{
overflow-y:scroll;
}
@media (max-width:$(6 * posts.width.stream + 5 * 16px + 143px + 15px +  1px)) {
.feed-view .sidebar-container{
float:$startSide;
margin-$startSide:10px;
max-width:$(sidebar.width);
width:100%;
position:fixed;
padding:20px 10px;
bottom:0;
top:0;
left:auto;
right:0;
}
.feed-view .sidebar-container.sidebar-invisible{
-webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);
transition-timing-function:cubic-bezier(.4,0,.6,1);
-webkit-transform:translateX(100%);
-ms-transform:translateX(100%);
transform:translateX(100%);
}
.feed-view .sidebar-container a{
font:$(sidebar.link.font);
color:$(sidebar.link.color)
}
.feed-view .sidebar-container .sidebar-back{
float:$endSide
}
.feed-view .sidebar-container .navigation{
display:block;
}
.feed-view .sidebar-container .widget{
margin:0px 0 10px 5px;
padding:14px;
}
.feed-view .sidebar-container .widget .title{
font:$(widget.title.font);
margin-bottom:9px;
margin-top:-15px;
padding:18px 0 10px 12px;
}
}

Kemudian Save.

3. Langkah ketiga Menampilkan Icon Hamburger Menu

   Langkah terakhir adalah menampilkan icon hamburger menu untuk menjadikannya tombol agar sidebar muncul/tampil saat di tekan
   cari kode 

   .centered-top .hamburger-section {
   ...}
   

Tambahkan kode 

   display:block;
   
   atau ganti
   

display:none;
   
   menjadi
   
   display:block;

Lalu untuk menampilkan icon hamburger menu yang ada di sticky header cari kode

.sticky  .centered-top .hamburger-section {

lalu tambahkan

display:block;   

Sekarang baru save dan test.
   
   
Oke sekian semoga bermanfaat
terimakasih.
Wassalam....