Dulu Saya pernah menuliskan cuilan instruksi untuk menandai sajian berdasarkan URL pada address bar dengan jQuery atau JavaScript di sini, kali ini Saya akan memakai tag kodisional untuk menandai sajian berdasarkan persamaan URL halaman atau katakan saja pada halaman yang sedang aktif. Dengan begitu, ketika Anda sedang berada pada halaman Tentang, maka sajian navigasi Tentang akan berubah warna sesuai dengan pengaturan tampilan sajian aktif yang Anda buat. Sebagai contoh.
Anggaplah Anda sudah mempunyai sajian navigasi di dalam template dengan kerangka menyerupai ini:
<nav id='nav'> <ul> <li><a href='http://test.blogspot.com'>Beranda</a></li> <li><a href='http://test.blogspot.com/p/about.html'>Tentang</a></li> <li><a href='http://test.blogspot.com/p/archive.html'>Arsip</a></li> <li><a href='http://test.blogspot.com/p/contact.html'>Kontak</a></li> </ul> </nav>Tambahkan masing-masing item sajian dengan ID yang spesifik, contohnya home, about, archive dan sebagainya, sehingga alhasil akan menjadi menyerupai ini:
<nav id='nav'> <ul> <li id='home'><a href='http://test.blogspot.com'>Beranda</a></li> <li id='about'><a href='http://test.blogspot.com/p/about.html'>Tentang</a></li> <li id='archive'><a href='http://test.blogspot.com/p/archive.html'>Arsip</a></li> <li id='contact'><a href='http://test.blogspot.com/p/contact.html'>Kontak</a></li> </ul> </nav>Setelah itu temukan instruksi </head> dan tambahkan kode-kode CSS yang berisi semua ID sajian di atas. Isi selektor-selektor tersebut dengan deklarasi yang sama. Sebagai contoh, di sini Saya menuliskan warna latar hijau dan warna teks putih untuk sajian yang sedang aktif:
<style> #home a {background-color:#0A7936;color:white;} #about a {background-color:#0A7936;color:white;} #archive a {background-color:#0A7936;color:white;} #contact a {background-color:#0A7936;color:white;} </style>Letakkan instruksi di atas sempurna di atas tag </head>
Mengatur Warna Menu dengan Tag Kondisional
Pada pada dasarnya kita hanya akan memecah semua selektor di atas menjadi instruksi CSS tunggal yang akan tampil hanya kalau halaman yang sedang aktif merupakan halaman yang mempunyai URL sama dengan URL pada menu. Kaprikornus kita bisa memakai tag kodisional halaman khusus untuk kasus ini:
<b:if cond='data:blog.url == "URL HALAMAN"'>Pisahkan semua selektor item sajian di atas menjadi menyerupai ini:
<style> <b:if cond='data:blog.url == "URL HALAMAN"'> #home a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "URL HALAMAN"'> #about a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "URL HALAMAN"'> #archive a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "URL HALAMAN"'> #contact a {background-color:#0A7936;color:white;} </b:if> </style>Ganti instruksi URL HALAMAN dengan URL halaman pada sajian yang terkait dengan ID sajian dalam selektor CSS. Dalam referensi sajian yang Saya ilustrasikan di atas, seharusnya kodenya akan menjadi menyerupai ini:
<style> <b:if cond='data:blog.url == data:blog.homepageUrl'> #home a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "http://test.blogspot.com/p/about.html"'> #about a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "http://test.blogspot.com/p/archive.html"'> #archive a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "http://test.blogspot.com/p/contact.html"'> #contact a {background-color:#0A7936;color:white;} </b:if> </style>Catatan: data:blog.homepageUrl setara dengan "http://test.blogspot.com/" berdasarkan sampel alamat blog di atas, dan juga setara dengan window.location.hostname dalam JavaScript.
Klik Simpan Template.
Alternatif Lain
Tanpa Tag Kondisional
Kita bisa menciptakan manipulasi ini tanpa tag kondisional, diantaranya ialah dengan cara menerapkan manipulasi JavaScript atau jQuery (baca di sini) yang lebih praktis. Tapi metode ini mempunyai satu kekurangan yaitu dampak tidak akan bekerja kalau JavaScript dimatikan. Atau kita juga bisa memakai metode yang jauh lebih sederhana lagi, yaitu dengan cara menyisipkan instruksi CSS secara eksklusif ke dalam posting, sama menyerupai ketika kita menciptakan posting Blogazine.
Hal yang paling penting dalam pembuatan manipulasi dampak aktif pada sajian gotong royong hanya ada pada modifikasi ID atau kelas item sajian semoga mereka menjadi lebih spesifik/berbeda satu sama lain.
Dengan Widget Daftar Halaman (Page List)
Blogger mempunyai widget berjulukan Daftar Laman. Dulu gotong royong widget tersebut dipakai untuk menampilkan semua daftar tautan khusus untuk halaman statis, tapi ketika ini widget tersebut sudah berkembang dan bisa ditambahi dengan tautan-tautan non-halaman statis. Dalam widget tersebut sudah terdapat peraturan kondisi tersendiri yaitu <b:if cond='data:link.isCurrentPage'> yang mempunyai kemampuan untuk menambahkan kelas atau keadaan yang berbeda pada item sajian kalau halaman yang sedang aktif ialah halaman yang mempunyai URL sama dengan URL pada sajian tersebut:
<b:widget id='PageList1' locked='false' title='Laman' type='PageList'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <b:if cond='data:mobile'> <select expr:id='data:widget.instanceId + "_select"'> <b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'> <option expr:value='data:link.href' selected='selected'><data:link.title/></option> <b:else/> <option expr:value='data:link.href'><data:link.title/></option> </b:if> </b:loop> </select> <span class='pagelist-arrow'>&#9660;</span> <b:else/> <ul> <b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'> <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li> <b:else/> <li><a expr:href='data:link.href'><data:link.title/></a></li> </b:if> </b:loop> </ul> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget>Untuk menerapkan dampak aktif pada menu, cukup gunakan CSS ini:
/* Versi daftar sajian */ .PageList li.selected a { background-color:#0A7936; color:white; } /* Versi selectbox */ .PageList option[selected] { font-weight:bold; }
Kekurangan manipulasi tampilan sajian aktif pada widget Daftar Laman ialah kita tidak mempunyai kemampuan untuk menambahkan sub-sub sajian gres sebagai anak sajian utama.
Sumber https://www.dte.web.id/