Tutorial Lengkap Membuat Menu Navigasi di OJS dengan Effek CSS

Seperti yang kita ketahui default-nya OJS hanya menyediakan lokasi menu yang terdapat di bagian Header saja, baik pada OJS 2 maupun OJS 3. Namun kadangkala lokasi menu yang diberikan tidak mencukupi kebutuhan informasi di jurnal kita. Sedangkan masih banyak sekali informasi yang harus di berikan kepada pengunjung maupun author nantinya. Sehingga solusinya adalah dengan kita membuat menu secara manual yang letaknya ada di sidebar (bilah samping), bisa di side kanan maupun di side kiri. Namun di OJS versi 3 hanya bisa di sidebar kanan saja.

Untuk membuat menu sebetulnya sangatlah mudah. Kita hanya cukup tambahkan saja list tulisan menu di Costum Block Manager lalu kita beri link yang mengarah ke halaman statis. Namun karena terbatasnya ilmu kode/coding kita menjadikan tampilan menu yang seadanya saja dan kurang menarik. Di dalam artikel ini saya akan memberikan tutorial kepada Anda bagaimana cara Membuat Menu Navigasi di Sidebar OJS dengan Effek CSS. Saya akan berikan tutorial ini sekaligus dua versi OJS, yaitu OJS 2 dan OJS 3.

Ohya sebelumnya saya juga pernah membuat tutorial dalam bentuk video tentang bagaimana cara membuat menu navigasi sederhana di OJS tanpa menggunakan CSS, cara ini lebih sederhana dan lebih mudah. Anda bisa menemukan video tersebut di sini.

Perlengkapan Kode

Sebelum saya melanjutkan ke tutorial ke OJS nya, saya akan memberikan dua jenis kode. Anda tidak perlu bertanya dulu kode ini dipakai untuk apa, karena nanti akan gunakan di dalam tutorialnya. Ada dua jenis kode, kode HTML dan kode CSS. Ohya perlu Anda ketahui, yang menulis artikel ini bukanlah orang IT dan mempunyai gelar lulusan komputer maupun programer. Bagi Anda yang senasip dengan saya dan merasa menyerah melihat kode ini saya sarankan jangan berhenti. Kodenya sebagai berikut:

CSS

.vertical-menu {
width: 100%; /* lebar dari menu, saran saya tidak perlu di ubah */
}

.vertical-menu a {
background-color: #FFD9D9; /* Warna pada bagian body menu */
color: black; /* Warna tulisan */
display: block;
padding: 12px;
text-decoration: none;
font-family: arial; /*Jenis font*/
}

.vertical-menu a:hover {
background-color: #ccc; /* Warna efek yang keluar ketika di arahkan mouse */
}

.vertical-menu a.active {
background-color: #800000; /* Warna pada header menu */
color: white; /*Warna font*/
font-family: arial; /*Jenis font*/
}

Untuk modifikasi perhatikan tulisan yang dikomentari (…/*…) sebelah kode, Anda bisa mengubah warna dan jenis tulisan. Untuk mengubah warna HTML, Anda bisa melihat daftar warna HTML disini. Kode di atas silahkan Anda copy dan paste di aplikasi Notepad atau aplikasi sejenisnya. Notepad biasanya sudah tersedia di di Windows. Kemudian simpan file dengan nama yang mempunyai estensi .css, contoh: style.css

HTML

<div class="vertical-menu">
	<a class="active"><strong>ADDITIONAL MENU</strong></a>
	<a href="#">FOCUS AND SCOPE</a>
	<a href="#">EDITORIAL TEAM</a>
	<a href="#">REVIEWER</a>
	<a href="#">PEER REVIEW PROCESS</a>
	<a href="#">OPEN ACCESS STATEMENT</a>
	<a href="#">PUBLICATION ETHICS</a>
	<a href="#">AUTHOR GUIDELINES</a>
	<a href="#">PLAGIARISM SCREENING</a>
	<a href="#">COPYRIGHT NOTICE</a>
	<a href="#">AUTHOR FEES</a>
	<a href="#">INDEXING</a>
</div>

Silahkan sesuaikan saja daftar nama-nama menu, seperti FOCUS AND SCOPE, EDITORIAL TEAM, REVIEWER dan lain-lain. Kemudian tanda # Anda ganti dengan link halaman statis yang sudah Anda buat. Jika Anda belum tau bagaimana cara membuat halaman statis di OJS, silahkan ikuti tutorial Membuat Static Pages/Halaman Statis di OJS.

Saya asumsikan Anda sudah mempunyai akun sebagai Jurnal Manager atau Admin utama jurnal. Jika Anda hanya sebagai editor, setau saya tidak bisa (koreksi jika saya salah). Langkah pertama jelas silahkan login menggunakan akun jurnal manager Anda.

Membuat Menu Navigasi di OJS 2

Dalam tutorial ini saya menggunakan OJS 2.4.8-5, namun sepertinya tidak ada perbedaan yang mencolok dengan versi sebelum OJS 2.4.8-5. Berikut ini tutorialnya:

Membuat Menu Navigasi di OJS 3

Membuat menu navigasi di OJS 3 ini lebih mudah daripada di OJS 2. Dalam tutorial ini saya menggunakan versi OJS 3.2.0.1. A da sedikit perbedaan, dari OJS versi sebelumnya, namun saya sudah memberikan catatan untuk setiap perbedaanya. Berikut ini adalah langkah-langkahnya:

Barangkali itu saja tutorial ini, mudah-mudahan dapat membantu saudara-saudara dalam memanagemen jurnal. Jika ada yang perlu di diskusikan silakan tulis di kolom komentar.

Ohya Anda juga boleh menyertakan link OJS hasil karya Anda dalam membuat menu navigasi, tuliskan saja di dalam kolom komentar agar kawan-kawan pengelola jurnal yang lain bisa melihat.