Sebenarnya artikel ini adalah lanjutan postingan dari postingan bejudul Cara Mengedit Tema Emporio Ala Aing Bag.1 : Header. Tapi saya langsung lompat ke bagian 3 yakni mengedit emporio bagian laman post, karena saya rasa di halaman utama pada emporio itu sudah cukup sempurna dengan gaya galery gridnya (mennurut saya pribadi). Mungkin lain kali jika ada yang merasa harus di edit saya akan tulis dan share diblog ini. Makanya saya tak mengedit di bagian halaman utamanya.
So..., karena yang paling banyak dicari dan yang paling banyak ditanyakan di internet itu , cara menambah,menampilkan sidebar pada laman post template emporio. Termasuk saya sendiri saat awal ngeblog dan menggunakan template emporio ini untuk di edit. pertanyaan saya saat itu adalah."cara menampilkan sidebar pada laman post emporio" yang saya masukan sebagai keyword pada pencarian google. Kebanyakan pertanyaan yang saya temukan sama. Mayoritas tutor pun hanya menampilkan sidebar saja. Tapi tidak secara detail. Walau sebenarnya, sidebar pada Emporio ini sudah tampil. Hanya saja saya tidak tahu atau tidak sadar kalau sebenarnya sidebar sudah tampil. Saya saat itu mungkin salah pasang widget di bagian tataletak yang memang ada dua bagian. Yang pertama, sidebar yang ada diatas, hanya menampilkan widget dihalaman utama. Sedangkan yang kedua (yang ada dibawahnya}, menampilkan widget hanya pada laman postingan saja. Saya saat itu kurang puas dengan sidebar emporio ini. Seperti ketika di perbesar (ctrl+scroll atas) dengan lebar 80% saja sidebar sudah pindah ke bawah. Tentu saja ini akan mengurangi kenyamanan pengunjung. saat melihat navigasi di sidebar, yang hurufnya terlihat kecil dan lembar artikel bergeser ke tengah. Banyak orang masih butuh tema yang simple, konfensional. Tak perlu menekan ctrl+scroll atas untuk melihat navigasi pada sidebar seperti pada emporio ini. Sidebar yang biasa orang gunakan untuk menaruh widget seperti random post , popular post,profil penulis atau apapun supaya pengunjung tidak tersesat dan dengan mudah bisa menulusuri isi blog.
Nah, untuk itu saya menulis artikel ini sebagai memo, supaya nanti bila mana saya lupa, gampang mencarinya, sekalian sharing juga bila mana ada yang mencari cara menampilkan sidebar pada laman post emporio yang mantul ini.
atau
Dan langsung kita hajar saja template emporio ini.
Langkah Pertama
Setelah masuk dashboard lalu masuk ke Edit Html,
cari kode :
.item-view .main-container
ganti
max-width:890px
menjadi
max-width:600px;
Lalu ubah juga
.item-view .centered-bottom
dari
max-width:1185px
menjadi
'max-width:900px;'
(bisa lebih dikit cuma ga pake sambel. wek wew ..) atau disesuaikan saja. kode ada tepat dibawahnya.
Lalu save, dan lihat hasilnya ... sidebar masih di bawah. Hhehehehehe...
Belum selesai, masih ada yang harus di robah. Tenang jangan emosi dulu ...
Berikutnya
Langkah kedua.
Cari
.item-view .centered .main-container
ini bagian terpenting dari dua bagian terpenting lainnya.
delete selector .centered .main-container yang berwarna merah
.item-view .centered .main-container
hasilnya seperti di bawah ini:
.item-view {
float:none; margin:0 auto }
Dan terakhir,
Langkah Ketiga
Terpenting dari dua terpenting , cari kode ini
.item-view .sidebar-container
kode selector ini ada dua, dan ini yang pertama , lihat isinya berbeda,
Lalu pindahkan selector .item-view .sidebar-container yang pertama beserta isinya
ke selector .item-view .sidebar-container yang kedua seperti contoh di bawah ini
.item-view .sidebar-container {
float:none;
right:3em;
margin:0;
max-height:none;
max-width:none;
padding:0 15px;
position:static;
width:100%
}
.item-view .sidebar-container {
box-sizing:border-box;
margin-$startSide:10px;
margin-top:17px;
margin-left:20px;
max-width:280px;
padding:0;
width:280px
}
Lihat Gambar
Jadi seperti ini
Kemudian save, dan hasil yang diinginkan telah menjadi kenyataan...
Segera rayakan keberhasilan ini dengan menyalakan rokok (bagi yang merokok) dan hisap sedalam dalamnya, awas tembakaunya ke kemakan pait tuh....(rokok kretek)
Weeeeeeeeeewwww
Sekian memo ini saya buat
Bagi yang mencari dan menemukan nya enjoy...
Perhatian!
Copas kepret pake keboard!
Kalau tulis ulang, tampilkan alamat dan url blog ini lengkap
Komentar
Posting Komentar