Tutorial Advance Menu Sidebar dengan CSS HTML dan JavaScript

All About OJS 3
Post Reply
acahya
Posts: 79
Joined: 20 Feb 2017, 09:18
Location: Pekanbaru
Contact:

Tutorial Advance Menu Sidebar dengan CSS HTML dan JavaScript

Post by acahya »

Tutorial ini untuk membuat menu Sidebar dengan menggunakan javascript css dan HTML, karena javascript dilarang saat membuat custom block manager maka dilakukan trik untuk dapat bekerja pada sistem OJS. berikut tuorial dalam bentuk video

Image

https://www.youtube.com/watch?v=eOYPc3_6pkA

Untuk Script yang pertama adalah script java yang akan kita tempelka di Plugins CustomHeader

Code: Select all

<script src=”http://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script>
<script src=”http://jurnalanda.ac.id/script.js”></script>
Script selanjutnya adalah script untuk membuat Menu Sidebar HTML pastekan kode berikut pada CustomBlock Manager.

Code: Select all

<div id='cssmenu'>
<ul>
<li><a href='#'><span>MENU</span></a></li>
<li class='active has-sub'><a href='#'><span>ADDITIONAL MENU</span></a>
<ul>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/about/editorialTeam"><span>Editorial Team</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/reviewers"><span>Peer Review</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/reviewers">Peer Reviewers</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/review"><span>Peer Review Process</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/focusandscope"><span>Focus and Scope</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/ethic "><span>Publication Ethics</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/onlinesubmission"><span>Online Submission</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/guideline"><span>Online Submission Guidelines</span></a></li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/plagiarism "><span>Plagiarism Check</span></a></li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/apcs "><span>Article Proccessing Charge</span></a></li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/openaccess "><span>Open Access Statement</span></a></li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/licence"><span>Licence Term</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>SUPLEMENTARY FILES</span></a>
<ul>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVb2ZWNDZjX09scDg/view?usp=sharing" target="_blank" rel="noopener"><span>COI Disclosure</span></a></li>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVZFVfay0zOFU2ekE/view?usp=sharing" target="_blank"><span>ICMJE Recommendation</span></a></li>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVSHhMU1F3dHhhb28/view?usp=sharing" target="_blank"><span>STROBE Guidelines</span></a></li>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVTE5hZXhEZ1B2ZkU/view?usp=sharing" target="_blank" rel="noopener"><span>SRQR Guidelines</span></a></li>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVdlhoNFlYdmYycFE/view?usp=sharing" target="_blank" rel="noopener"><span>Free Plagiarism Statement</span></a></li>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVQXhEMDAycXZHSEE/view?usp=sharing" target="_blank"><span>Covering Letter and Statement Form</span></a></li>
</ul>
</li>
<li><a href='#'><span>Template</span></a></li>
<li class='last'><a href='#'>Histori Jurnal<span></span></a></li>
</ul>
</div>
Script Berikutnya adalah file css yang akan kita upload di setting/appearance style

Code: Select all

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);
#cssmenu {
position: relative;
margin: 0;
font-family: 'Roboto Condensed';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #dddddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background: #222222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
background: #151515;
color: #ffffff;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #dddddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #ffffff;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #dddddd;
color: #777777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #dddddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666666;
}
Untuk file css diatas dapat kita kombinasikan dengan css yang sudah ada sebelumbya untuk pemformatan style halaman OJS, intinya gabung kode css yang anda pakai dengan css untuk sidebar menu ini.
Last edited by acahya on 04 May 2018, 03:48, edited 1 time in total.
ACahya Channel Site
Artikel Tentang OJS silahkan Klik
Image
http://acahya.web.id/category/ojs/
https://www.youtube.com/c/acahyachannel

ajienoorseto
Posts: 449
Joined: 30 Dec 2016, 21:19
Contact:

Re: Tutorial Advance Menu Sidebar dengan CSS HTML dan JavaScript

Post by ajienoorseto »

akhirnya muncul lagi tutorial dari pak cahya..mantap
Atom Indonesia
http://aij.batan.go.id

acahya
Posts: 79
Joined: 20 Feb 2017, 09:18
Location: Pekanbaru
Contact:

Re: Tutorial Advance Menu Sidebar dengan CSS HTML dan JavaScript

Post by acahya »

ajienoorseto wrote:akhirnya muncul lagi tutorial dari pak cahya..mantap
Kemarin lagi fokus ngejar terbitan Jurnal pak, ini pada telat terbit
ACahya Channel Site
Artikel Tentang OJS silahkan Klik
Image
http://acahya.web.id/category/ojs/
https://www.youtube.com/c/acahyachannel

User avatar
fauziddin
Posts: 40
Joined: 31 Mar 2017, 16:43
Location: Riau
Contact:

Re: Tutorial Advance Menu Sidebar dengan CSS HTML dan JavaScript

Post by fauziddin »

Script Berikutnya adalah file css yang akan kita upload di setting/appearance style

Code: Select all

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);
#cssmenu {
position: relative;
margin: 0;
font-family: 'Roboto Condensed';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #dddddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background: #222222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
background: #151515;
color: #ffffff;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #dddddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #ffffff;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #dddddd;
color: #777777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #dddddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666666;
}
Untuk file css diatas dapat kita kombinasikan dengan css yang sudah ada sebelumbya untuk pemformatan style halaman OJS, intinya gabung kode css yang anda pakai dengan css untuk sidebar menu ini.[/quote]

saya mencoba namun bermasalah..(file sudah saya ubah ekstensi menjadi css)
Image

acahya
Posts: 79
Joined: 20 Feb 2017, 09:18
Location: Pekanbaru
Contact:

Re: Tutorial Advance Menu Sidebar dengan CSS HTML dan JavaScript

Post by acahya »

Terkadang sistem OJS melarang koment yang sudah tidak diterima yaitu dengan perintah */ coba dicari baris yang diawali dengan " */ " kemudian hapus baris tersebut. mudah2an bisa
ACahya Channel Site
Artikel Tentang OJS silahkan Klik
Image
http://acahya.web.id/category/ojs/
https://www.youtube.com/c/acahyachannel

heru
Posts: 2
Joined: 13 May 2020, 19:06

Re: Tutorial Advance Menu Sidebar dengan CSS HTML dan JavaScript

Post by heru »

Pak file java skrip yang diupload ke file manager yang mana ya?

Post Reply