Dalam administrasi jurnal, butuh Editorial Board. Tentu kita sebagai pengelola jurnal, ingin tampilan Editorial Board lebih menarik, salah satunya seperti pada Gambar di bawah ini.

Untuk membuat tampilan Editorial Board seperti Gambar di atas, kita membutuhkan 2 (dua) buah file, yaitu HTML dan CSS.

Pertama adalah HTML kode yang akan kita pastekan di halaman setting jurnal OJS, pada bagian editorial team. Adapun kode HTML untuk membuat tampilan seperti Gambar di atas sebagai berikut:

<div id="groups">
<div class="group">
<h4 style="font-size: 22px; border-bottom: 1px solid #E7E7E7; padding: 5px 0px;">Editor in Chief</h4>
<div class="editorial-list">
<div class="img-profile">
<div class="imgthumb"><img src=" /public/site/images/irvahn/irfan-tanpalogo---copy.jpg" alt="Profile Image" width="123" height="150" /></div>
</div>
<div class="team-content"><strong> <img class="ico-label" src="/public/site/images/irvahn/author.png" />Dr. Muhammad Irfan </strong>
<div class="team-aff">
<p><img class="ico-label" src="/public/site/images/irvahn/scopus.png" />Scopus ID : <a title="Scopus ID" href="https://www.scopus.com/authid/detail.uri?authorId=57200724759" target="_blank" rel="noopener" data-toggle="tooltip">57200724759</a></p>
<p><img class="ico-label" src=" /public/site/images/irvahn/orcid.png" /><a title="ORCID" href="https://orcid.org/0000-0001-7003-2946" target="_blank" rel="noopener" data-toggle="tooltip">https://orcid.org/0000-0001-7003-2946</a></p>
<p> Universitas Sarjanawiyata Tamansiswa,Indonesia</p>
</div>
</div>
</div>
</div>
<div class="group">
<h4 style="font-size: 22px; border-bottom: 1px solid #E7E7E7; padding: 5px 0px;">Journal Manager</h4>
<div class="editorial-list">
<div class="img-profile">
<div class="imgthumb"><img src=" /public/site/images/irvahn/irfan-tanpalogo---copy.jpg" alt="Profile Image" width="123" height="150" /></div>
</div>
<div class="team-content"><strong> <img class="ico-label" src=" /public/site/images/irvahn/author.png" />Dr. Muhammad Irfan </strong>
<div class="team-aff">
<p><img class="ico-label" src=" /public/site/images/irvahn/scopus.png" />Scopus ID : <a title="Scopus ID" href="https://www.scopus.com/authid/detail.uri?authorId=57200724759" target="_blank" rel="noopener" data-toggle="tooltip">57200724759</a></p>
<p><img class="ico-label" src=" /public/site/images/irvahn/orcid.png" /><a title="ORCID" href="https://orcid.org/0000-0001-7003-2946" target="_blank" rel="noopener" data-toggle="tooltip">https://orcid.org/0000-0001-7003-2946</a></p>
<p> Universitas Sarjanawiyata Tamansiswa,Indonesia</p>
</div>
</div>
</div>
</div>
</div>

Beberapa hal yang perlu diperhatikan:

  • ukuran icon 15×15 px
  • ukuran foto tinggi: 150, lebar 123 atau menyesuaikan.

Kedua adalah code CSS yang harus kita tambahkan untuk untuk memformat style kode html supaya tampilannya seperti pada gambar diatas. Kode CSS bisa ditambahkan dengan kode css yang telah ada pada jurnal OJS kita. Caranya buka file css jurnal di menu setting/website klik nama css yang ada untuk melihat kode css yang telah ada klik save page as untuk meyimpan kode css. Kemudian edit kembali file tadi dan tambahkan kode berikut di bawah baris terakhir file css tadi.

Kode css untuk mengatur editorial board:

.editorial-list{
    position: relative;
}
.editorial-list li{
    margin-bottom: 1.125rem;
}
.editorial-list .img-profile{
    position: absolute;
    width: 95px;
    height: 105px;
    border: 1px solid #ddd;
    padding: .5rem;
}
.editorial-list .img-profile .imgthumb{
    width: 80px;
    height: 90px;
    overflow: hidden;
    margin: 0 auto;
    object-fit: fill;
}
.editorial-list .img-profile img{
    width: 100%;
    height:100%;
}
.team-content{
    margin-left: 100px;
    min-height: 130px;
}
.team-content .ico-label{
    width: 18px;
    height: 18px;
    margin-right: .5rem;
} 
.team-aff ul li{
    margin-bottom: 0;
}
.team-aff ul li .tm_label{
    display: inline-block;
    width: 80px;
}
.team-aff ul li .ico-label{
    width: 18px;
    height: 18px;
    margin-right: .5rem;
}

semoga bermanfaat. download tutorial: tutorial membuat editorial board lebih menarik OJS 3