Artikel ini merupakan artikel lanjutan dari tutorial sebelumnya (Membuat Website Sederhana HTML & CSS Part 1 – Part 7), pastikan kalian sudah mengikuti part-part sebelumnya.
Pada part 8 ini kita hanya membuat Footer Copyright saja, mungkin bisa bermanfaat buat teman-teman yang belum tau.
Silahkan buka codingan sebelumnya (file HTML dan CSS nya) kemudian tambahkan code berikut pada file HTML.
<div class="footer">
<p>Copyright 2017 | <a href="https://posciety.com" target="_blank">Rio Bermano</a></p>
</div><!--akhir class footer-->
Disini menggunakan div dengan class footer, silahkan tentukan sesuai selera jika ingin berbeda dengan contoh diatas misalnya tidak menggunakan div tapi langsung menggunakan tag <footer>.
Baca Juga:
Pada bagian footer biasanya terdapat link yang menuju ke halaman author sebagai perkenalan pada pengunjung bahwa template ini dibuat oleh author tersebut.
Silahkan berikan link website / link lainnya yang diperlukan. Dan ada hak cipta atau yang lebih dikenal dengan Copyright, tidak lupa juga ditambahkan tahun.
Biasanya copyright diterapkan dibagian paling bawah sebuah situs web maka saya terapkan code tersebut dibagian bawah file HTML agar muncul dibagian paling bawah.
Sampai sini tentu belum terlihat rapih karena belum diatur CSS nya, silahkan tambahkan code berikut pada file CSS yang bersangkutan.
.footer {
width: 100%;
height: 50px;
background-color: blue;
margin-top: 10px;
position: relative;
}
.footer p {
color: #fff;
position: absolute;
bottom: 10px;
left: 350px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
Karena ini merupakan part 8. saya rasa tidak perlu dijelaskan lagi secara rinci tentang gaya yang ada pada code diatas karena sudah pernah dijelaskan di part-part sebelumnya. Silahkan tentukan gaya / style untuk footer sesuai dengan kebutuhan dan desain web agar terlihat lebih menarik.
Jika ingin menambahkan simbol / ikon Copyright © pada footer ini, cukup tambahkan saja code ©pada code diatas maka akan muncul sebagai ©. Klik disini untuk mempelajari lebih lanjut tentang membuat simbol hak cipta / copyright pada HTML.
Masih bingung ? Lihat : Video Tutorial Bikin Web/Blog Sendiri Part 8. Jika sudah yakin paham, silahkan lanjut ke Part 9.
Sampai disini, maka seluruh code HTML CSS kalian akan seperti ini (jika tidak ada yang diubah):
HTML
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML Rio Bermano</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="media/image/fav.png" rel="shortcut icon">
</head>
<body>
<header>
<img src="images/satu.jpg">
</header>
<menu>
<li><a href="">Home</a></li>
<li><a href="">Download</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Software</a></li>
<li><a href="">Design</a></li>
<li><a href="">Support</a></li>
<li><a href="contoh-halaman.html">Kontak</a></li>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKanan-->
</div><!--akhir class recomended-->
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Satu</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Dua</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Tiga</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p>
</div><!--akhir class artikelTerlaris-->
<div class="mediaSosial">
<h3>Let's Connect !</h3>
<a href=""><img src="images/googleplus.png" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/bermanorio" target="_blank"><img src="images/facebook.png" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/bermanorio"><img src="images/twitter.png"></a>
<a href="http://www.instagram.com/riobermano"><img src="images/instagram.png"></a>
<a href=""><img src="images/linkedin.png"></a>
<a href=""><img src="images/youtube.png"></a>
<a href=""><img src="images/pinterest.png"></a>
</div>
<div class="subscribe">
<h3>Subscribe</h3>
<form>
Nama:<br/><input type="text" required><br/>
Email:<br/><input type="email" required>
<input type="submit" value="Kirim">
</form>
</div>
</div>
<div class="artikelTerbaru">
<a href=""><img src="images/lima.jpg"></a>
<a href="https://posciety.com"><h2>Artikel Baru Satu</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Dua</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Tiga</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>Copyright 2016 | <a href="https://posciety.com" target="_blank">Rio Bermano</a></p>
</div><!--akhir class footer-->
</body>
</html>
CSS
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}
menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */
/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}
/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}
.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */
/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}
/* akhir class artikelTerbaru */
/* class mediaSosial */
.buaya .widget .mediaSosial {
margin: 5px;
border-top: 5px solid #333;
}
.buaya .widget .mediaSosial h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .mediaSosial img {
width: 30px;
height: 30px;
}
.buaya .widget .mediaSosial img:hover {
opacity: 0.5;
}
/* akhir class mediaSosial */
/* class subscribe */
.buaya .widget .subscribe {
margin: 0 5px;
border-top: 5px solid #333;
}
.buaya .widget .subscribe h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .subscribe input[type="text"] {
width: 95%;
}
.buaya .widget .subscribe input[type="email"] {
width: 95%;
margin-bottom: 5px;
}
.buaya .widget .subscribe input[type="submit"] {
width: 50%;
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class subscribe */
/* footer */
.footer {
width: 100%;
height: 50px;
background-color: blue;
margin-top: 10px;
position: relative;
}
.footer p {
color: #fff;
position: absolute;
bottom: 10px;
left: 350px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
Kesimpulan
footer pada sebuah situs web tidak selalu hanya berupa hak cipta / copyright saja tapi juga ada yang menerapkan widget yang biasa digunakan untuk link-link situs yang tida kditerapkan dibagian menu seperti About Us – Contact Us – Advertising dan lainnya.
Ini semua tergantung dari bagaimana kalian ingin membuat situs web kalian karena ada juga beberapa situs web yang tidak menggunakan widget dibagian footer. Jika ingin menggunaka widget, bisa ikuti tutorial part-part sebelumnya yang menjelaskan tentang sidebar & widget kemudian kalian bisa terapkan tutorial itu di bagian widget.
Selamat mencoba !