Hai emporian, memo kali ini adalah Cara menampilkan Menu Navigasi Pada Sticky Header Template Emporio. Untuk menampilkan Menu navigasi ini mungkin sudah banyak blogger yang telah mebahas atau menulis tutorialnya. Tapi untuk menampilkannya pada sticky header, masih belum banyak . Karena Sulit sekali menyesuaikannya dengan element lain yang berdekatan. Seperti terimpa judul blog atau menimpa judul blog maupun posisi terlalu bawah sehingga tidak nyan untuk dilihat dan mengurangi estetika keindahan desain tema emporio itu sendiri
Namun saya telah berhasil menampilkan menu navigasi tema emporio ini dan sudah saya rapikan dengan element lain yang ada disekitar sticky header tema emporio ini. Seperti box search atau judul blog.Posisinya berada diantara keduannya, yakni ditengah .
Untuk demo bisa lihat pada gambar maupun menu blog ini sendiri. Dengan segala kekurangnya navigasi ini bisa menghias dan menambah navigasi blog tema emporio ini.
Bagaimanakah cara menamplikannya?
Untuk menampilkannya, tampilkan dulu menu headernya.
Langkah Pertama Menampilkan Menu
Masuk ke tata letak pada dasboard blog.
Cari Daftar Halaman Atas,
Lalu klik pada icon pensil, akan muncul popup setelah itu klik
Lalu Klik + Tambahkan link eksternal
Lalu akan muncul popup lagi, lalu isi judul halaman. Misal saya akan membuat beranda. Saya Kasih Judul Halaman dengan Beranda. dan dibawahnya Alamat web (URL) saya isi dengan alamat url beranda saya. Saya gunakan alamat halaman utama saya https://endonist.blogspot.com/. Karena ini sebagai contoh.
Di contoh ini saya akan memasang 3 navigasi. Beranda, Profil, dan Kontak, sebagai judul halaman.
Lalu isi setiap Alamat web (URL) dengan alamat url yang ingin sobat emporian kehendaki seperti contoh mengisi alamat url Beranda diatas.
Kurang lebih seperti gamabr diatas
Lalu save, Jangan lupa centang kotak untuk menampilkan dan Judul (opsional) dikosongkan saja.
Cek dulu apakah menu sudah tampil pada laman home. Jika sudah tampil kita akan
lanjut ke langkah berikutnya , yaitu menampilkan menu pada sticky header.
Langkah Kedua
Untuk menampilkan menu pada sticky header, masuk ke tema, lalu masuk edit html,
cari kode
.sticky .centered-top .top-nav
dengan ctrl+f. lalu ganti display:none; menjadi display:block;
Kemudian tambahkan kode berikut
float:none;
-webkit-box-flex:2;
-webkit-flex:2 1 auto;
-ms-flex:2 1 auto;
flex:2 1 auto;
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2
jadi seperti ini
.sticky .centered-top .top-nav{
display:block;
float:none;
-webkit-box-flex:2;
-webkit-flex:2 1 auto;
-ms-flex:2 1 auto;
flex:2 1 auto;
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2
}
Lalu cari kode kode berikut
@media (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
.search{
width:24px
}
Untuk menggeser posisinya dan menampilkan search box sebagai icon saja, karena jika tidak, judul blog akan tertumpuk box search ini.
Posisiinya ada dibawah kode
.top-nav .overflow-button svg{
margin-top:0
}
di atas
.search .search-expand{
display:block;
position:relative;
z-index:8
}
Ganti anka 2 menjadi 4 dan angaka 1 menjadi 5. Bisa lihat hasilnya yang saya tandai
@media (max-width:$(4 * posts.width.stream + 5 * 16px + 143px + 15px + sidebar.width)){
.search{
width:24px
}
Lalu save dan cek , Apakah menu muncul pada sticky header dan search box hanya muncul
icon saja.Kita lanjut ke langkah berikutnya.
Langkah Ketiga
Karena menu hanya akan saya tampilkan pada sticky header, jadi menu pada header akan saya
hapus karena saya sudah punya menu lain.
Cari kode .centered-top .top-nav
seperti dibawah ini
.centered-top .top-nav{
-webkit-box-flex:1;
-webkit-flex:1 0 100%;
-ms-flex:1 0 100%;
flex:1 0 100%;
margin-top:32px;
-webkit-box-ordinal-group:6;
-webkit-order:5;
-ms-flex-order:5;
order:5
}
Lalu hapus isinya Dan ganti dengan
display:none;
jadi seperti ini
.centered-top .top-nav {
display:none
}
Berikutnya cari kode .top-nav .PageList ul
Seperti ini
.top-nav .PageList ul{
list-style:none;
margin:0;
padding:0;
}
Lalu tambahkan kode berikut
display: flex;
flex-wrap: wrap;
justify-content: center;
-webkit-box-flex:1;
-webkit-flex:1 0 100%;
-ms-flex:1 0 100%;
flex:1 0 100%;
margin-top:-3px;
-webkit-box-ordinal-group:6;
-webkit-order:5;
-ms-flex-order:5;
order:5
kode ini
display: flex;
flex-wrap: wrap;
justify-content: center;
untuk mengetengahkan posisi navigasi, sedangkan kode
-webkit-box-flex:1;
-webkit-flex:1 0 100%;
-ms-flex:1 0 100%;
flex:1 0 100%;
margin-top:-3px;
-webkit-box-ordinal-group:6;
-webkit-order:5;
-ms-flex-order:5;
order:5
Ini adalah isi dari .centered-top .top-nav yang saya pindahkan. saya hanya mengganti nilai margin-top menjadi -3px.
Jadi hasilnya seperti ini
.top-nav .PageList ul{
list-style:none;
margin:0;
padding:0;
display: flex;
flex-wrap: wrap;
justify-content: center;
-webkit-box-flex:1;
-webkit-flex:1 0 100%;
-ms-flex:1 0 100%;
flex:1 0 100%;
margin-top:-3px;
-webkit-box-ordinal-group:6;
-webkit-order:5;
-ms-flex-order:5;
order:5
}
lalu save, cek dulu hasilnya.
Sempurna!! navigasi pada header sudah hilang, hanya tinggal ubah warna font dan background
pada settingan penyesuaian.Tapi ini belum selesai. Navigasi belum tampil pada sticky header halaman postingan.
Langkah Keempat : Menampilkan Menu Pada Laman Post
Untuk menampilkannya kita ubah tag kondisionalnya.
Cari kode
<nav class='top-nav' role='navigation'>
diatasnya ada kode tag kondisional seperti berikut
<b:if cond='data:view.isLayoutMode or not data:view.isSingleItem'>
Ubah kode tersebut dengan tag kondisional dibawah ini
<b:if cond='data:view.isHomepage or data:view.isPost'>
Lalu save. Dan selesai....
Wassalam...
Komentar
Posting Komentar