Cara Mudah Membuat Menu OJS 3

Tutorial ini merupakan bagian sharing yang sudah saya jelaskan pada saat menjadi pemateri dari belajar online di RJI. Supaya lebih banyak yang bisa mendapatkan ilmu yang sederhana ini maka saya posting ulang di blog ini. Tutorial ini membahas mengenai cara mudah membuat menu pada ojs 3.

Persiapan yang dilakukan
Backup forlder “Plugins”
Download Plugins OJS 3.2.0-1, abaikan jika sudah

Download

Ekstrak file plugins baru
Sumber code warna dapat dicari di:

Akses Link

Aktifkan beberapa plugin seperlunya terutama “theme Manuscript”

menu settings>website>plugins

Custom Basic hanya menambahkan script css pada

menu settings>website>apearance>  “Journal style Sheet”

Nantinya kita upload CSS menu disitu, sekarang kita buat file css sebagai berikut

Buat Custom Block pada 

menu settings>website>plugins>Custom Block Manager

Buat Block baru dengan nama Menu dan tambahkan code berikut:

<div class="w3-bar-block w3-light-grey">
<a class="w3-bar-item w3-button w3-purple">MAIN MENU</a> 
<a class="w3-bar-item w3-button" title="Focus and Scope" href="https://ojs.kuliahkomputer.com/index.php/belajar/page_a">Focus and Scope</a> 
<a class="w3-bar-item w3-button" title="Editorial Board and Reviewers" href="https://ojs.kuliahkomputer.com/index.php/belajar/about/editorialTeam">Editorial Board</a> 
<a class="w3-bar-item w3-button" title="Reviewers" href="https://ojs.kuliahkomputer.com/index.php/belajar/page_b">Reviewer</a> 
</div>

Simpan file dengan nama

style.css

Upload pada menu

menu settings>website>apearance>  “Journal style Sheet”

Kemudian Aktifkan Plugins “Custom Header Plugin” pada

menu settings>website>plugins>Custom Header Plugin

Masukkan kode berikut pada bagian “Header Content”

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Sumber code menu lain bisa dicari di:

https://www.w3schools.com/w3css/w3css_sidebar.asp

Hasilnya seperti berikut

Kalian juga bisa mengganti pilihan warna pada bagian berikut:

<div class="w3-bar-block w3-light-grey">
<a class="w3-bar-item w3-button w3-purple">MAIN MENU</a> 

Dengan pilihan warna dibawah ini:

.w3-amber
.w3-aqua
.w3-blue
.w3-light-blue
.w3-brown
.w3-cyan
.w3-blue-grey
.w3-green
.w3-light-green
.w3-indigo
.w3-khaki
.w3-lime
.w3-orange
.w3-deep-orange
.w3-pink
.w3-purple
.w3-deep-purple
.w3-red
.w3-sand
.w3-teal
.w3-yellow
.w3-white
.w3-black
.w3-grey
.w3-light-grey
.w3-dark-grey
.w3-pale-red
.w3-pale-green
.w3-pale-yellow
.w3-pale-blue

Selesai.
Tunggu kelanjutan tutorial ojs di link ini