Skip to main content
Home Programming Cara Membuat Website Berita Bola Sederhana dengan HTML dan CSS

Cara Membuat Website Berita Bola Sederhana dengan HTML dan CSS



Pada kesempatan ini saya akan mencoba memberitahu bagaimana cara membuat sebuah website berita khusunya berita bola tetapi saya tidak menjelaskan back end melainkan hanya membuat sebuah front end dari sebuah website yaitu hanya HTML+CSS  ada 2 halaman pada pembuatan website ini saya tetapi pada artikel ini saya hanya akan menjelaskan bagian homepagenya unutk bagian keduanya silahkan lihat disini caranya memang bisa dibilang sulit sulit gampang, karena pada pembuatan web saya harus memperhatikan pada class class dan juga penempatanya. ok untuk itu mari kita simak pada souce code dibawah ini:


Wrapper
<!DOCTYPE html>
<html>
<head>
<title> BolaCaur.Com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<div class="frame">
<div class="logo">
<img width="80" src="image/logo.png">
<div class="fkanan">
<img width="130" title="Follow Us" src="image/socialfu.png">
<img width="45" title="Login Untuk Diskusi" src="image/login.png">
<img width="40" title="Daftar" src="image/daftar.gif">
</div>
</div>
</div>

Wrapper atau saya lebih suka untuk menyingkatnya lagi menajri wrap sama halnya dengan cara membuat web web lain saya menggunakanya untuk wadah dari sebuah body dan footer agar untuk memeper mudah penyesuaianya

Header 



     <header>
<div class="header">
</div>
</header>
<div class="Menu">
<li><a href="index.html" style="color:white">Home</a></li>
<li>Liga Inggris</li>
<li>Liga Italia</li>
<li>Liga Spanyol</li>
<li>Liga Champions</li>
<li>Video Bola</li>
<input placeholder="Cari Berita" type="text" name="">
<button type="Submit">Cari</button>
</div>
<div class="Content">
<div class="RowKanan">
<img width="50" title="Lihat Lainya" src="image/arrowkanan.png">
</div>
<div class="RowKiri">
<img width="50" title="Lihat Lainya" src="image/arrowkiri.png">
</div>
<div class="Content1">
<h5> Rabu, 3 Maret 2019
<br>19:00 WIB </br>
<p>Live On SubiTV</p> 
</h5>
</div>
<div class="Content2">
<h5> Rabu, 3 Maret 2019
<br>20:00 WIB </br>
<p>Live On CaurTV</p> 
</h5>
</div>
<div class="Content3">
<h5> Kamis, 4 Maret 2019
<br>23:00 WIB </br>
<p>Live On SubiTV</p> 
</h5>
</div>
<div class="Content4">
<h5> Kamis, 02 Maret 2019
<br>19:00 WIB </br>
<p>Live On SubiTV</p> 
</h5>
</div>
</div>
Untuk Header di sini saya disini saya mencoba membuat sebuah jadwal yang bisa di scrool ke kiri atau kekanan agar dapat  memuat lebih banyak konten tujuanya.
Isi


<div class="Isi">
<div class="BBerita">
<div class="Berita1">

</div>
<div class="IsiKanan">
<div class="LigaInggris">
<a href style="color:white"> <h2>Liga Inggris</h2> </a>
</div>
<button type="Submit">Berita Lainya....</button>
</div>
<div class="LigaItalia">
</div>
<button type="Submit">Berita Lainya....</button>
</div>
<div class="LigaSpanyol">
</div>
<button type="Submit">Berita Lainya....</button>
</div>
<div class="LigaChampions">
</div>
</div>
Isi nantinya kamu bisa isi dengan berita berita apa yang kamu mau.

Sidebar 


<div class="IsiKiri">
<div id="Login">
<label>Email</label>
<input placeholder="Masukan Email" type="Email" name="">
<p><label>Password</label>
<input placeholder="Masukan Password" type="Password"                                                                 name="">
</p>
<button type="Daftar"><a href="regis.html"                                                                                               style="color:white">Daftar</a></button>
<button type="Submit">Login</a></button>
<h5>Ayo Gabung Dengan Bola Caur.com
atau Bila Kamu Lupa Password
klik 
<a href="#" style="color:orange"> disini </a>
</h5>
</div>
<div id="Kelasemen">
<h3>Kelasemen</h3>

</table>

</div>
<div id="Populer">
<h3>Berita Populer</h3>
<ol>
</ol>
</div>
</div>
                 </div>
Untuk sidebar sendiri saya mencantumkan sebuah form untuk login dan entry/postingan terpopuler serta kelasemen peringkat club yang bisa dipilih, kamu bisa sesuaikan liga apa yang kamu mau pada kelasemen dengan tag ol li dan juga entry populer pun sama dengan ol li.

Footer 


            <div class="Footer">
<div id="Wf">
<div id="fk">
<h3>Firman Taufik &copy; 2017</h3> 
</div>
<div id="fs">

<img width="150" src="image/socialfu.png">
</div>
</div>
</div>
    </div>
    </body>
 </html>

Footer atau bagian paling bawah saya buatkan terlihat lebih simple dan hanya menggunakan icon sosial media dan copyright nama saya dan tahun pembuatan. 

CSS


*, *:after, *:before {box-sizing:border-box;}
a {
    text-decoration: none;}

body{
background-color: #0d1013;
height: 1000px;
}
.wrap{
height: 2590px;
width: 1000px;
margin: 0 auto;
padding: 10px;
box-shadow:0 0 100px rgba(0,0,0,.3);

}

.frame{
box-shadow:0 0 100px rgba(0,0,0,.3);
height: 50px;
width: 0 auto;
padding: 10px;
margin-bottom: 10px;
border-bottom: 1px solid red;
}
.logo{
height: 50px;
width: auto;
}

.logo img{
float: left;
cursor: pointer;
border: 1px solid;

}

.fkanan{
height: 50px;
text-align: center;
margin-top: 0px;
float: right;

}
.fkanan img{
float: right;
margin-right: 10px;
border: none;
}

header{
height: 200px;
width: 0 auto;
background-color: white;
padding: 10px;
border-color: white;
border: 1px solid;
margin-bottom: 10px;
background-image: url(image/logoheader.jpg);
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.Menu {
height: 50px;
margin-bottom: 10px;
background-color:  #333435;
padding: 5px;
box-shadow:0 0 100px rgba(0,0,0,.3);
border-bottom: 1px solid red;
}
.Menu  li{
list-style: none;
float: left;
margin-left: 5px;
font-size: 22px;
color: white;
cursor: pointer;
height: 40px;
text-align: center;
line-height: 30px;
padding: 5px;
}
.Menu li:hover{
color:orange;
}
.Menu input[type="text"]{
height: 30px;
margin-left: 20px;
font-style: bold;
margin-top: 5px;
}
.Menu button[type="submit"]{
height: 30px;
width: 50px;
cursor: pointer;
background-color: orange;
color: white;
border: none;

}
.Menu button:hover{
background-color: red;
}
.Content{
border: 3px solid;
height: 120px;
float: left;
background-color:#ececec;;
width: 100%;
margin-bottom: 10px;
border-color: #333435;
background-image: url(image/rumput.jpg);
}
.Content1{
background-color: red;
width: 200px;
height: 115px;
float: left;
margin-left: 10px;
text-align: center;
cursor: pointer;
background-image: url(image/lfcvsmu.jpg);
background-size: 200px;
color: orange;
box-shadow:0 0 100px rgba(0,0,0,.3);

}
.Content1 h5 {
font-size: 12px;
background-image: url(image/bgkata.png);
background-size: 100%;
margin-top: 60px;
}
.Content1:hover{
color: white;
}
.Content2{
background-color: red;
width: 200px;
height: 115px;
float: left;
margin-left: 10px;
text-align: center;
cursor: pointer;
background-image: url(image/acvsinter.jpg);
background-size: 200px;
color: orange;
box-shadow:0 0 100px rgba(0,0,0,.3);

}
.Content2 h5 {
font-size: 12px;
background-image: url(image/bgkata.png);
background-size: 100%;
margin-top: 60px;
}
.Content2:hover{
color: white;
}
.Content3{
background-color: red;
width: 200px;
height: 115px;
float: left;
margin-left: 10px;
text-align: center;
cursor: pointer;
background-image: url(image/mcvsch.jpg);
background-size: 200px;
color: orange;
box-shadow:0 0 100px rgba(0,0,0,.3);

}
.Content3 h5 {
font-size: 12px;
background-image: url(image/bgkata.png);
background-size: 100%;
margin-top: 60px;
}
.Content3:hover{
color: white;
}
.Content4{
background-color: red;
width: 200px;
height: 115px;
float: left;
margin-left: 10px;
text-align: center;
cursor: pointer;
background-image: url(image/Real-Madrid-Barcelona.jpg);
background-size: 200px;
color: orange;
box-shadow:0 0 100px rgba(0,0,0,.3);

}
.Content4 h5 {
font-size: 12px;
background-image: url(image/bgkata.png);
background-size: 100%;
margin-top: 60px;
}
.Content4:hover{
color: white;
}
.Siaran label{
cursor: pointer;
}
.RowKanan{
cursor: pointer;
float: right;
height: 115px;
}
.RowKanan img{
float: right;
cursor: pointer;
margin-top: 30px;
margin-right: 10px;
}

.RowKiri{
float: left;
cursor: pointer;
height: 115px;
}
.RowKiri img{
margin-top: 30px;
margin-left: 10px;
}


.Isi{
width: 100%;
height: auto;
float: left;
margin-bottom: 10px;
padding: 10px;
}
.Video{
float: right;
background-color: black;
height: auto;
padding: 10px 10px 10px 10px;
margin-top: 10px;
cursor: pointer;
}
.Video h3{
color: white;
cursor: pointer;
}
.Video h3:hover{
color: orange;
}
.IsiKanan{
float: left;
height: auto;
width: 70%;
padding: 10px;
margin-top: 5px;

}
.LigaInggris{
height: 800px;
width: 49%;
float: left;
padding: 10px;
color: white;
text-underline-position: none;
text-decoration: none;
border-color: white;
border-bottom: 1px solid;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.LigaInggris h2{
text-decoration: none;
}
.LigaInggris h2:hover{
color: orange;
cursor: pointer;

}
.LigaInggris button{
background-color: orange;
margin-top: 20px;
cursor: pointer;
border: none;
float: right;
height: 30px;
}
.LigaInggris button:hover{
background-color: red;
}
#LigaInggris1{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/berita1.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
#LigaInggris1 h6{
background-image: url(image/bgkata.png);
margin-top: 95px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaInggris1 h6:hover{
color: orange;
}
#LigaInggris2{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/22735b23-9d2b-4e9b-971c-217c212c32ec_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaInggris2 h6{
background-image: url(image/bgkata.png);
margin-top: 95px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaInggris2 h6:hover{
color: orange;
}

#LigaInggris3{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/66e9659d-95f3-4898-9147-243899344486_43.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaInggris3 h6{
background-image: url(image/bgkata.png);
margin-top: 80px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaInggris3 h6:hover{
color: orange;
}
#LigaInggris4{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/cbbdfafd-cb9b-4f59-9a81-2e23708127c1_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaInggris4 h6{
background-image: url(image/bgkata.png);
margin-top: 95px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaInggris4 h6:hover{
color: orange;
}
.LigaItalia{
height: 800px;
width: 49%;
float: right;
padding: 10px;
color: white;
border-color: white;
border-bottom: 1px solid;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.LigaItalia h2:hover{
color: orange;
cursor: pointer;
}
.LigaItalia button{
background-color: orange;
margin-top: 20px;
cursor: pointer;
border: none;
float: right;
height: 30px;
}
.LigaItalia button:hover{
background-color: red;
}
#LigaItalia1{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/53631b00-f2d0-45b5-9f84-4b3a597cbf3a_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
#LigaItalia1 h6{
background-image: url(image/bgkata.png);
margin-top: 90px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaItalia1 h6:hover{
color: orange;
}
#LigaItalia2{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/dfd86c19-c5d3-4199-9c9c-dddd1137d868_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaItalia2 h6{
background-image: url(image/bgkata.png);
margin-top: 90px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaItalia2 h6:hover{
color: orange;
}

#LigaItalia3{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/c9b0b3ea-188f-4e18-aadc-d4156a5ae4cd_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaItalia3 h6{
background-image: url(image/bgkata.png);
margin-top: 80px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaItalia3 h6:hover{
color: orange;
}

#LigaItalia4{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/ed8ac509-f7cd-43d5-93c6-43ec53244168_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaItalia4 h6{
background-image: url(image/bgkata.png);
margin-top: 80px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaItalia4 h6:hover{
color: orange;
}
.LigaSpanyol{
margin-top: 20px;
height: 800px;
width: 49%;
float: left;
padding: 10px;
color: white;
text-underline-position: none;
text-decoration: none;
box-shadow:0 0 100px rgba(0,0,0,.3);
border-color: white;
border-bottom: 1px solid;
}
.LigaSpanyol h2{
text-decoration: none;
}
.LigaSpanyol h2:hover{
color: orange;
cursor: pointer;

}
.LigaSpanyol button{
background-color: orange;
margin-top: 20px;
cursor: pointer;
border: none;
float: right;
height: 30px;
}
.LigaSpanyol button:hover{
background-color: red;
}
#LigaSpanyol1{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/17055cbb-a215-4e83-9f3f-649cad206a96_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
#LigaSpanyol1 h6{
background-image: url(image/bgkata.png);
margin-top: 70px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaSpanyol1 h6:hover{
color: orange;
}
#LigaSpanyol2{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/03f8d99e-8884-4cce-b97f-1dc42ed4912e_43.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaSpanyol2 h6{
background-image: url(image/bgkata.png);
margin-top: 85px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaSpanyol2 h6:hover{
color: orange;
}
#LigaSpanyol3{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/fe7693a1-e7c9-4074-b801-31cf72212c27_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaSpanyol3 h6{
background-image: url(image/bgkata.png);
margin-top: 85px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaSpanyol3 h6:hover{
color: orange;
}
#LigaSpanyol4{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/feafa7b3-3b13-4433-b03a-32b223cb48c5_916.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaSpanyol4 h6{
background-image: url(image/bgkata.png);
margin-top: 85px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaSpanyol4 h6:hover{
color: orange;
}

.LigaChampions{
margin-top: 20px;
height: 800px;
width: 49%;
box-shadow:0 0 100px rgba(0,0,0,.3);
float: right;
padding: 10px;
color: white;
border-color: white;
border-bottom: 1px solid;
}

.LigaChampions h2:hover{
color: orange;
cursor: pointer;
}
.LigaChampions button{
background-color: orange;
margin-top: 20px;
cursor: pointer;
border: none;
float: right;
height: 30px;
}
.LigaChampions button:hover{
background-color: red;
}
#LigaChampions1{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/32d1ac61-ce45-4359-8375-99398d5ec7c3_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
#LigaChampions1 h6{
background-image: url(image/bgkata.png);
margin-top: 90px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;

}
#LigaChampions1 h6:hover{
color: orange;
}
#LigaChampions2{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/6c3d6d2e-0ffb-4b40-9a99-257e745238dc_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaChampions2 h6{
background-image: url(image/bgkata.png);
margin-top: 90px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaChampions2 h6:hover{
color: orange;
}
#LigaChampions3{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/4fc1b12d-1d03-4e40-aa0a-c6d9abd82599_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaChampions3 h6{
background-image: url(image/bgkata.png);
margin-top: 75px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaChampions3 h6:hover{
color: orange;
}
#LigaChampions4{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/84eb5389-ddbe-44f2-b3b4-6fba5149f500_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaChampions4 h6{
background-image: url(image/bgkata.png);
margin-top: 90px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaChampions4 h6:hover{
color: orange;
}
.BBerita{
height: 1000;
width: 55%;
float: left; ;
padding: 10px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.Berita1{
float: left;
border:1px solid;
height: 300px;
width: 500px;
cursor: pointer;
margin-left: 3px;
box-shadow:0 0 100px rgba(0,0,0,.3);
background: url(image/berita1.jpg);
background-size: 500px;
}


.Berita1 h2{
margin-top: 210px;
cursor: pointer;
height: 90px;
color: white;
padding: 10px;
float: left;
background: url(image/bgkata.png);

}
.Berita1 h2:hover{
color: orange;
}

.Berita1 h2 p{
color: #ececec;
font-size: 15px;
}
.Berita1 h2 p:hover{
color: white;
}
.IsiKiri{
float: right;
height: auto;
width: 28%;
margin-left: 10px;
margin-top: 20px;
padding: 10px;
border-color: white;

}
#Login{
background-color:#333435;
height: 200px;
width: 100%;
margin-bottom: 10px;
padding: 30px 10px 10px 10px;
color: white;
border-bottom: 1px solid;
border-color: white;
}
#Login input{
width: 150px;
}
#Login input[type="Email"]{
margin-left: 35px;
}
#Login input[type="Password"]{
margin-left: 12px;
}
#Login button{
float: right;
}
#Login button[type="Submit"]{
float: right;
cursor: pointer;
background-color: orange;
border: none;
height: 30px;
width: 60px;
color: white;
margin-right: 10px;
}
#Login button:hover{
background-color: red;
}
#Login button[type="Daftar"]{
cursor: pointer;
background-color: black;
border: none;
height: 30px;
width: 60px;
color: white;
}
#Login h5{
margin-top: 50px;
}
#Kelasemen{
background-color:#333435;
margin-bottom: 20px;
height: auto;
padding:10px;
margin-top: 20px;


}
#Kelasemen h3{
color: white;
margin-left: 20px;
float: left;
cursor: pointer;
}
#Kelasemen h3:hover{
color: orange;
}
#Pilke{
float: left;
margin-top: 5px;
margin-left: 10px;
cursor: pointer;
width: 100px;
float: left;

}
table{
border: 1px solid;
color: white;
background-color: orange;
margin-left: 3px;
font-size: 10px;
line-height: 2px;
margin-bottom: 20px;

}
table:hover{
color: black;
}
#Populer{
width: 100%;
height: auto;
border: 1px solid;
background-color:#333435;
float: right;
padding: 10px;

}
#Populer h3{
color: white;
margin-left: 20px;
cursor: pointer;
float: left;
}
#Populer h3:hover{
color: orange;
}
#Populer ol li{

color: white;
float: left;
margin-bottom: 0px;
}
#Populer img{
float: left;
}
#Populer ol li p{
float: left;
}
#Populer ol li p:hover{
color: orange;
}
.Footer{
margin-top: 10px;
height: 100px;
width: 100%;
float: left;
box-shadow:0 0 100px rgba(0,0,0,.3);
color: white;
padding: 10px;

}
#Wf{
padding: 10px 50px 10px 50px;
float: left;
height: 80px;
width: 100%;
float: left;
}
#Wf h3{
width: 300px;
}
#Wf h3:hover{
color: orange;
}
#fk h3{
float: left;
}
#fs img{
float: right;
margin-top: 5px;
}
#fs img:hover{
width: 200px;
}

Pada CSS sendiri memang cukup panjang karena begitu banyaknya class

Untuk hasil akhirnya mungkin seperti ini tetapi ya sesuainakn saja sesuai kemauan anda sendiri


Nah untuk membuatnya kamu tinggal copas saja coding coding diatas silahkan pahami dan yang perlu di ketahui awas penempatan kata tag <div> atau </div> berlebihan atau berkurang, tapi jika kalau kurang paham juga saya kasih contohnya silahkan ambil disini, jangan lupa untuk kelanjutan halaman keduanya disini.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar