Hay, guys kali ini aku akan memposting tutorial untuk membuat layout yang
didalamnya ada videonya. Nah di dalam layout itu juga terdapat running text
serta marquee. Layout ini bertemakan RESEP MASAKAN yang didalamnya bermuatkan
video tutorial memasak. Pasti penasaran kan?? Hayoo.. ngaku aja deh. Okeh,
langsung aja kita simak tutorial berikut ini. Semoga bermanfaat ya :)
Pertama, kita buka terlebih dahulu aplikasi Sublime Text 3, kenapa aku
menggunakan Subime Text 3? Kalian pasti bertanya-tanya.. Karena di laptop aku
adanya Sublime Text 3. Sebenarnya sih aku disuruh pakai HTML5 tapi berhubung
laptop aku nggk support jadi pakai Sublime Text 3 aja ya.
Kedua, setelah aplikasi Sublime Text 3 sudah kebuka, kita pilih pengaturan
bahasa yang akan digunakan untuk index. Pilih HTML, Sedangkan untuk Style kita
pilih CSS. Ikuti Langkah seperti dibawah ini
Ketiga, save kedua project tersebut dalam 1 folder. Setelah itu masukkan
syntax sebagi berukut. Masukkan video yang akan dimuat ke dalam 1 folder
dengan extensi .mp4. Sebelumnya harus buat gambar untuk layout bagian
kanan(up-down dan up)nya sebagai contoh pada gambar dibawah ini
- Pada project HTML
<!DOCTYPE html>
<html>
<head>
<title>DAPUR KITA</title>
<link rel="stylesheet" type="text/css"
href="style.css">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('jam').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" +
i}; // add zero in front of numbers <
10
return i;
}
</script>
</head>
<body
onload="startTime()">
<div id="pagewrep"> <!--
Kode ini membuat header-->
<div id="header">
<div class="wkt">
<div
id="tgl"></div>
<div
id="jam"></div>
<script>
var d = new Date();
document.getElementById("tgl").innerHTML
= d.toDateString();
</script>
</div>
<div
class="judul"><h2>DAPUR KICTHEN BUNDA</h2></div>
</div>
<!-- Kode ini membuat button warna merah, biru, hijau
sehingga akan mengubah warna background-->
<div id="menu">
<input type="button"
style="background-color:red;" value="Merah"
class="top-menu" onclick="warna('red')";/>
<input type="button" style="background-color:blue;"
value="Biru" class="top-menu"
onclick="warna('blue')";/>
<input type="button"
style="background-color:green;" value="Hijau"
class="top-menu" onclick="warna('green')";/>
<script
type="text/javascript">
function warna(color){
document.body.style.background=color;
document.getElementById('form').style.color=color;
}
</script>
</div>
<!-- Kode ini membuat menu dan sub menu
yang berada dipinggir kiri-->
<div
id="cont-l"><h4 align="center">KATEGORI
OLAHAN</h4>
<marquee behavior="scroll"
direction="up" scrollamount="4" loop="infinit"
height="350px">
<div
class="cont-menu"><img src="gambar1.jpg"
width="225px" height="50px"
alt="smile"></br></div>
<div
class="cont-menu"><img src="gambar2.jpg"
width="225px" height="50px"
alt="smile"></br></div>
<div
class="cont-menu"><img src="gambar3.jpg"
width="225px" height="50px"
alt="smile"></br></div>
<div
class="cont-menu"><img src="gambar4.jpg"
width="225px" height="50px" alt="smile"></br></div>
<div
class="cont-menu"><img src="gambar5.jpg"
width="225px" height="50px"
alt="smile"></br></div>
<div
class="cont-menu"><img src="gambar6.jpg"
width="225px" height="50px"
alt="smile"></br></div>
<div
class="cont-menu"><img src="gambar7.jpg"
width="225px" height="50px"
alt="smile"></br></div>
<div
class="cont-menu"><img src="gambar8.jpg"
width="225px" hght="50px"
alt="smile"></br></div>
<div
class="cont-menu"><img src="gambar9.jpg"
width="225px" height="50px" alt="smile"></br></div>
<div
class="cont-menu"><img src="gambar10.jpg"
width="225px" height="50px"
alt="smile"></br></div>
</marquee>
<div id="cont-bot">
<div class="cont-botl">
<div
class="container">
<div
id="content-slider">
<div
id="slider"> <!-- Slider
container -->
<div
id="mask"> <!-- Mask
-->
<ul>
<li
id="first" class="animation1"> <!-- ID for tooltip and class for
animation -->
<a
href="#"> <img src="gb1.jpg" width="75px"
height="50px" alt="Cougar"/> </a>
</li>
<li
id="second" class="animation2">
<a
href="#"> <img src="gb2.jpg" width="75px"
height="50px" alt="Lions"/> </a>
</li>
<li
id="third" class="animation3">
<a
href="#"> <img src="gb3.jpg" width="75px"
height="50px" alt="Snowalker"/> </a>
</li>
<li
id="fourth" class="animation4">
<a
href="#"> <img src="gb4.jpg" width="75px"
height="50px" alt="Howling"/> </a>
</li>
<li
id="fifth" class="animation5">
<a
href="#"> <img src="gb5.jpg" width="75px"
height="50px" alt="Sunbathing"/> </a>
</li>
</ul>
</div> <!-- End Mask -->
<div
class="progress-bar"></div>
<!-- Progress Bar -->
</div> <!-- End Slider Container -->
</div>
</div>
</div>
<div class="cont-botr">
<div
class="container">
<div
id="content-slider" >
<div
id="slider"> <!-- Slider
container -->
<div
id="mask"> <!-- Mask
-->
<ul>
<li
id="first" class="animation6"> <!-- ID for tooltip and class for
animation -->
<a
href="#"> <img src="gb6.jpg" width="75px"
height="50px" alt="Cougar"/> </a>
</li>
<li
id="second" class="animation7">
<a
href="#"> <img src="gb7.jpg" width="75px"
height="50px" alt="Lions"/> </a>
</li>
<li
id="third" class="animation8">
<a
href="#"> <img src="gb8.jpg" width="75px"
height="50px" alt="Snowalker"/> </a>
</li>
<li
id="fourth" class="animation9">
<a
href="#"> <img src="gb9.jpg" width="75px"
height="50px" alt="Howling"/> </a>
</li>
<li
id="fifth" class="animation10">
<a
href="#"> <img src="gb10.jpg" width="75px"
height="50px" alt="Sunbathing"/> </a>
</li>
</ul>
</div> <!-- End Mask -->
<div
class="progress-bar"></div>
<!-- Progress Bar -->
</div> <!-- End Slider Container -->
</div>
</div>
</div>
</div>
</div>
<div id="cont-m">
<div
class="cont-marq">TUTORIAL DONAT KENTANG LEMBUT</div>
<div
class="cont-video">
<video width="860px"
height="500px" autoplay loop>
<source src="vndk.mp4"
type="video/mp4">
</video>
</div>
</div>
<!--Kode ini membuat layout bagian
tengah-->
</table>
</form>
</div>
<!-- Kode ini membuat footer-->
<div id="footer"><marquee> RESEP
MASAKAN ==> 1. INDONESIA 2. KOREA SELATAN 3. TIMUR TENGAH 4. TRADISIONAL
INDONESIA
5. MINUMAN 6. MENU DIET 7. MENU
GIZI 8. DESSERT 9. BARAT 10. JEPANG
</marquee>
</div>
</div>
</body>
</html>
- Pada project CSS
#pagewrep{
width:
100%; height: 100px; margin: 0
auto;
}
#header{
width:
100%; height: 200px; line-height: 200px; color: black;
text-align:
center; font-size: 25px; color:white; background-color: orange; text-shadow:
2px 2px 5px;
}
.wkt{
width:auto; height: 200px;
background-color: #DC143C; text-align: center; float: right;
-webkit-border-radius: 20px 20px 20px 20px; padding-right: 40px;
}
#tgl{
width: auto; background-color: visible; line-height: 30px; color: white;
-webkit-border-radius: 20px 20px 20px
20px;
}
#jam{
width:auto; background-color: visible; color: white;
-webkit-border-radius: 20px 20px 20px 20px;
}
.judul{
max-width: auto; height: 50px; background-color: #DC143C; text-align:
center; line-height:50px;
-webkit-border-radius: 20px 20px 20px 20px;
}
#menu{
width:
100%; height: 50px; background-color: #FE4421;
}
.top-menu{
width:
auto; height: 50px; padding-left: 30px; padding-right: 30px; text-align: center;
line-height:
50px; background-color: #FE4421; float:
left; font-weight: bold;
}
.top-menu:hover{
color:
#FFFFFF; background-color: #FEB721;
}
#cont-l{
width:
301px; height: 450px; background-color: yellow; float: left;
padding-left:
57px;
}
.cont-menu:hover{
color:
#FFFFFF; background-color: #FEB721;
}
#cont-bot{
width:
250px; height: 75px; background-color: red; float: left;
}
.cont-botl{
width:
250px; height :75px; float: left; background-color:visible; margin-bottom: 5px;
}
.cont-botr{
width:
215px; height :75px; float: right; background-color: visible; margin-right:
5px; margin-bottom: 5px;
}
#cont-m{
width:
950px; height: auto; background-color: gray; float: right;
padding:
10px;
}
#footer{
width:
100%; height: 40px; background-color: aqua; float: left;
text-align: center; color: black; margin-top: 10px;
margin-bottom:
5px; line-height: 40px; font-size: 18px;
}
#slider {
height: 115px;
width: 215px;
margin: 10px auto 0;
overflow: visible;
position: relative;
}
#mask {
overflow: hidden;
height: 115px;
}
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 215px; /* Width Image */
height: 125px; /* Height Image */
position: absolute;
top: -100px; /* Original Position - Outside of the Slider */
list-style: none;
}
#slider li.animation1 {
animation: cycle 20s linear infinite;
}
#slider li.animation2 {
animation: cycletwo 20s linear infinite;
}
#slider li.animation3 {
animation: cyclethree 20s linear infinite;
}
#slider li.animation4 {
animation: cyclefour 20s linear infinite;
}
#slider li.animation5 {
animation: cyclefive 20s linear infinite;
}
@keyframes cycle {
0% { top: 0px; } /* When you
start the slide, the first image is already visible */
4% { top: 0px; } /* Original
Position */
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3
seconds the image is visible */
20% { top: -100px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1
second exit image */
21% { top: 100px; opacity: 0; z-index: -1; } /* Return to Original
Position */
92% { top: 100px; opacity: 0; z-index: 0; }
96% { top: 100px; opacity: 0; } /* From 96% to 100% = for 1 second enter
image*/
100%{ top: 0px; opacity: 1; }
}
@keyframes cycletwo {
0% { top: 100px; opacity: 0; } /*
Original Position */
16% { top: 100px; opacity: 0; }/* Starts moving after 16% to this
position */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /*
From 20% to 24% = for 1 second enter image*/
36% { top: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the
image is visible */
40% { top: -100px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1
second exit image */
41% { top: 100px; opacity: 0; z-index: -1; } /* Return to Original Position */
100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cyclethree {
0% { top: 100px; opacity: 0; }
36% { top: 100px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: -100px; opacity: 0; z-index: 0; }
61% { top: 100px; opacity: 0; z-index: -1; }
100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cyclefour {
0% { top: 100px; opacity: 0; }
56% { top: 100px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: -100px; opacity: 0; z-index: 0; }
81% { top: 100px; opacity: 0; z-index: -1; }
100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
0% { top: 100px; opacity: 0; }
76% { top: 100px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: -100px; opacity: 0; z-index: 0; }
}
#slider li.animation6 {
animation: cyclefive 20s linear infinite;
}
#slider li.animation7 {
animation: cyclefive 20s linear infinite;
}
#slider li.animation8 {
animation: cyclefive 20s linear infinite;
}
#slider li.animation9 {
animation: cyclefive 20s linear infinite;
}
#slider li.animation10 {
animation: cyclefive 20s linear infinite;
}
@keyframes cycle1 {
0% { top: 0px; } /* When you
start the slide, the first image is already visible */
4% { top: 0px; } /* Original
Position */
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3
seconds the image is visible */
20% { top: 100px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1
second exit image */
21% { top: -100px; opacity: 0; z-index: -1; } /* Return to Original
Position */
92%
{ top: -100px; opacity: 0; z-index: 0; }
96% { top: -100px; opacity: 0; } /* From 96% to 100% = for 1 second
enter image*/
100%{ top: 0px; opacity: 1; }
}
@keyframes cycle2 {
0% { top: -100px; opacity: 0; }
/* Original Position */
16% { top: -100px; opacity: 0; }/* Starts moving after 16% to this
position */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /*
From 20% to 24% = for 1 second enter image*/
36% { top: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the
image is visible */
40% { top: 100px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1
second exit image */
41% { top: -100px; opacity: 0; z-index: -1; } /* Return to Original Position */
100%{ top: -100px; opacity: 0; z-index: -1; }
}
@keyframes cycle3 {
0% { top: -100px; opacity: 0; }
36% { top: -100px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 100px; opacity: 0; z-index: 0; }
61% { top: -100px; opacity: 0; z-index: -1; }
100%{ top: -100px; opacity: 0; z-index: -1; }
}
@keyframes cycle4 {
0% { top: -100px; opacity: 0; }
56% { top: -100px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 100px; opacity: 0; z-index: 0; }
81% { top: -100px; opacity: 0; z-index: -1; }
100%{ top: -100px; opacity: 0; z-index: -1; }
}
@keyframes cycle5 {
0% { top: -100px; opacity: 0; }
76% { top: -100px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 100px; opacity: 0; z-index: 0; }
}
Hasilnya akan seperti gambar dibawah ini
Button warna berguna untuk mengubah warna background. Warna background dapat kita pilih sesuai button yang ada.
Silakan mencoba.
