Cara Mengedit Tema Emporio Ala Aing Bag.1 : Header
Seteleh hampir setahaun menggunakan template emporio , tema bawaan dari blogger yang keren dan beberapa kali mencoba mengedit nya namun akhirnya sedikit demi sedikit ketemu dimana letak posisi selektor css yang harus di edit . Karena jujur saya sendiri bukanlah ahli dalam hal ini, hanya belajar lewat internet tanpa sekolah atau kursus secara formal.
Sempat down bahkan putus asa, malah sempat ingin membeli tema premium dari salah satu programer igniel, pemilik igniel.com yaitu templatenya yang ia beri nama Ignielplex. Sangat keren dan elegan. Sepertinya Igniel pun terinfirasi dari tema bawaan blogger tersebut karena setelah saya perhatikan memang mirip, dari segi layout dan tampilan, hanya saja ingielplek telah ditambahkan beberapa fitur sehngga terlihat lebih keren atau profesional.
Namun karena uang dari hasil ngeblog tak kunjung PO, saya akhirnya memutuskan untuk menundanya dan mulai terus berpikir bagaimana cara mengedit tema emporio ini. Dengan skill css yang pas-pasan bahkan jauh dari kata bisa, apalagi Javascript [gelap Ane..] saya terus mencoba dan bertanya kepada para blogger dan mencari tutorial yang ada di internet, namun hasilnya tidak memuaskan bahkan cenderung menyesatkan.
Mereka hanya mencari pengunjung saja, dengan judul Edit Emporio , padahal hanya tulisan omong kosong , tidak menuliskam secara gamblang dan jelas .
Cukup sudah memuji dan menjelakan orang, kita kembali pada tema isi blog dan melanjutkan bagaimana sih cara mengedit tema emporio ini? Tapi sebelum masuk cara pegeditan, saya jelaskan dulu kenapa saya mau menggunakan teplate ini.
Pertama kenapa saya pakai tema ini , karena selain keren dengan grid-grid dihalaman utamnya, tema ini sangant cocok dengan tema blog saya , yakni blog musik. Yang memerlukan gambar untuk cover sebuah album disitulah kenapa saya menggunakan tema ini, lalu tampilan header yang sederhana, juga sidebar yang hanya ada di home page saja walau akhirnya saya mencopot sidebar pada laman utam karena
merasa kurang luas di area laman utama. Kemudian footer yang sama simplenya dengan header.
Lalu kenapa ingin mengeditnya ?
Sebenarnya template emporio ini sudah bagus tapi ketika saya atur lebar pada settingan, thumbnail menjadi kecil karena saya ingin thumbail tampil banyak tiga atau empat berjajar secara horizontal. Saat di pengaturan ketika saya mencoba grid berjajar dua, malah ada pemberitahuan masuk ke google search console kalau blog saya ini tidak mobile friendly.
Maka dari itu saya jadikan empat grid secara horizontal tapi hasilnya gambar thumbnai jadi kecil. Makanya saya yang hanya mempunyai skill 0,000005% berusaha terus. Dan entah sampai kapan saya berhenti mengulik untuk mengedit tema Emporio ini.
Oke deh cukup intermezonya, kita mulai dari header. Namun sebelumnya untuk membackup dulu tema sobat, sebuah ritual yang wajib dilakukan sebelum mengedit tema, jaga-jaga kalau tema ingin sobat ingin kembalikan atau tidak cocok atau bahkan gagal/error.
0. Menampilkan Header Pada Halaman Post
Kita tahu kalau header pada tema emporio, hanya tampil pada halaman home/beranda saja. Namun bila sobat ingin menampilkannya pada halaman post itu sangatlah mudah. Emporian masuk dasboard > edit html, lalu cari kode berikut
<b:class cond='data:view.isSingleItem' name='sticky'/>
kemudian hapus kode tersebut.
1. Menambah Tinggi Sticky Header
Sticky header adalah header yang nempel diatas, kalau di halamna utama dia akan muncul ketika kita scroll keatas, maka akan muncul. Tapi kalau saat di laman post, dia muncul dan menempel tanpa di scroll keatas maupun kebawah . Contoh gambar Sticky Header |
| Contoh Sticky Header |
Kita langsung cari kode berikut: untuk mempercepat pencarian gunakan ctrl+f.
.centered-top
Lalu tambahkan kode css berikut diantara { ... }
height:100px;
Isi nilai ketinggian sesuai selera sobat.
2. Menghilangkan Tanda Panah [Backarrow] Pada Header
Langsung masuk ke edit Html, kita akan menghilangkan tanda panah [backarrow] pada header. Cari kode dibawah ini untuk mempercepat pencarian gunakan ctrl+f.
<b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' name='backArrowIcon'/>
Setelah ketemu, sobat hapus kode tersebut. lalu save, bila muncul pemberitahuan berwarna merah untuk menghapus tag </b:if>. dan hapus saja kode tersebut, lalu save.lihat hasilnya. Bila tidak, langsung lihat hasilnya.
Cara lain untuk menghapus/menghilangkan tanda panah [backarrow] pada head tema emporio [mungkin sama pada tema seperti soho,contempo yang punya ikon backarrow].
untuk cara ini hanya tinggal menambah kode css dibawah ini
<!-- Menghapus BackArrow -->
.blog-name nav {
margin-left: auto !important;
margin-right: auto !important;
}
.return_link {
display: none;
}
Pastekan kode diatas ke atas kode ]]></b:skin>. Lalu save dan lihat hasilnya.
3. Mengganti Icon Backarrow Dengan Icon Home
 |
| Icon Home |
Untuk mengganti icon backarrow dengan Icon Home sobat hanya perlu menambahkan kode berikut;
Paste kode berikut di bawah <head>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/679c193dea.js'/>
Kemudian paste kode css berikut di atas ]]></b:skin>, untuk menambahkan hover.
/* Icon Home */
#tombol-home { font-size:22px;color:#fff;margin-top:20px;margin-bottom:20px; }
#tombol-home:hover { opacity: .7; }
#tombol-home i { top: 50%;transform: translateY(-100%); }
Lalu cari kode berikut
<b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' name='backArrowIcon'/>
Hapus atau ganti dengan kode berikut:
<div id='tombol-home'>
<i class='fas fa-home fa-lg'/>
</div>
Seperti contoh gambar dibawah ini
Lalu save dan lihat hasilnya.
Untuk mengatur warna, ganti kode warna #fff dengan keinginan sobat.
4. Menghapus Judul Blog Pada Sticky Header
Untuk menghapusnya, kita masuk ke edit html kemudian cari kode berikut:.sticky .centered-top .blog-name
Lalu tambahkan kode berikut:
display:none;
paste diantara kode { }.
Bila tidak mau di hapus, jangan tambhkan kode diatas.
Lalu save dan lihat hasilnya.
5. Posisi Judul Sticky Header
Kalau hanya ingin menggesernya saja gimana?, posisinya menjadi ditengah atau di sebelah kanan.
Untuk menempatkan posisinya jadi ditengah , cari kode dibawah
.sticky .centered-top .Header h1{
ganti nilai padding yang terakhir dengan nilai diatas 200px [warna merah] atau sesuaikan dengan kemauan sobat.
padding:0 0 0 40px;
Atau sobat ganti menjadi
padding-left:320px;
Atur nilainya yang warna merah sesuai kebutuhan.
Lalu save dan lihat hasilnya.
6. Menambahkan Shadow Box Pada Sticky Header
Untuk menambahkan shadow box atau bayangan pada sticky header kita hanya tinggal masukan kode css dibawah
-webkit-box-shadow: -1px 9px 10px -5px rgba(0,0,0,0.39);
box-shadow: -1px 9px 10px -5px rgba(0,0,0,0.39);
atau bisa disesuaikan pada website berikut html-css-js.com
sobat bisa atur sesuai keinginan sobat, tinggal geser kanan kiri saja.
Lalu copy hasil kode cssnya. lalu cari kode berikut
.sticky .centered-top
paste kode nya, diantara { ... }
Lalu save dan lihat hasilnya.
7. Menghilangkan Box Pencarian Pada Sticky Header.
Box Pencarian memang penting untuk menemukan apa yang pengunjung cari , tinggal masukan kata kunci dan ... ketemu...
Tapi bila sobat tidak menginginkan box pencarian ada di header , Sobat bisa menghilangkan nya;
Cari kode css berikut:
.centered-top .search
Lalu tambahkan kode berikut:
display:none;
paste diantara { ... }
Lalu save dan lihat hasilnya.
8. Menambahkan Css pada Judul Blog
Agar terlihat lebih baik saya menambahkan css pada judul blog seperti contoh gambr berikut;
Judul blog terlihat patern atau timbul.
Cari kode bebrikut
.centered-top .Header h1
Lalu masukan kode css berikut dianatara { ... }
color: #202c2d;
background: #FFFFFF;
text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -1px 2px #808d93, -2px 1px #cdd2d5, -2px 3px #808d93, -3px 2px #cdd2d5, -3px 4px #808d93, -4px 3px #cdd2d5, -4px 5px #808d93, -5px 4px #cdd2d5, -5px 6px #808d93, -6px 5px #cdd2d5, -6px 7px #808d93, -7px 6px #cdd2d5, -7px 8px #808d93, -8px 7px #cdd2d5;
color: #202c2d;
background: #FFFFFF;
Atau bisa disesuaikan menurut selera sobat di html-css-js.com
Ganti nilai Background yang kedua/terakhir warna merah menjadi none.
contoh : background: none;
9. Menghapus Judul Blog
Konyol memang jika kita ingin menghapus judul blog, Tapi sebagai tips sih boleh aja , agar kita tahu posisi selektor
css judul blog, jikalau kita ingin menghias atau menambahkan css kita tinggal paste saja ke dalam tagnya.
Cari
centered-top .blog-name
tambahkan
display:none;
dan save. Lihat hasilnya.
Pokoknya untuk menampilkan atau menghapus kita hanya tinggal menambahkan
kode css
display:none; [untuk menghilangkan]
display:block; [untuk menampilkan]
Walau tidak semua bisa seperti itu, Tapi tergantung dari struktur syntak css maupun htmlnya.
10. Menampilkan Hamburger Menu
Banyak bloger yang tak tahu akan keberadaan Hamburger menu milik emporio ini, mungkin karena tak ada menu di dalamnya yang membuat pihak blogger tak menampilkannya. Namun bila sobat sudah menguasai javascript atau css, sobat bisa mengisinya dengan syntax menu .
Hamburger Mneu pada Header
Hamburger Menu pada Sticky Header
Untuk cara menampilkannya sobat hanya tinggal cari kode di bawah ini:
.centered-top .hamburger-section {
display:none;
Lalu ganti nilai display menjadi block, seperti contoh dibawah:
.centered-top .hamburger-section{
display:block;
Dan satu lagi, kekurangan dari Hamburger menu ini, yakni tidak bisa di tampilkan pada halaman postingan. Hanya tampil pada halaman utama saja. Tapi mungkin kalau sobat sudah bisa menampilkan pada halaman postingan kasih tahu saya. Karena saya sudah menyerah.
Oke sgitu dulu tips dari saya Cara mengubah tema emporio bag.1 header.
Postingan beriikutnya mungkn akan mengedit bagian laman utama/homepage, tapi masih akan saya kembangkan
agar lebih sempurna.
Sekian..
Hep nais dey.....
Wassalam...
Komentar
Posting Komentar