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>
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>
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;
}