membuat blog, contact, dan footer

Februari 04, 2021

ASSALAMUALAIKUM. WR WB

Nama : Agung Ramadhan

Cara Mudah Membuat Menu Pada Footer Blog Keren

Pada dasarnya kebanyakan menu diletakan pada bagian atas template blog. Akan tetapi ada juga yang sengaja membuat menu navigasi pada bagian bawah template atau di bagian footer. Seperti yang kita ketahui bahwa fungsi dari menu ialah untuk mempermudah navigasi pengunjung.

CARA MEMBUAT BLOG, CONTACT, DAN FOOTER DENGAN MENGGUNAKAN CARA-CARA DI BAWAH INI:

1. Menggunakan index.html

2. Menggunakan style css

<section class="News" id="News"></section>

<div class="container">

<h1>News</h1>

<div class="card-group">

<div class="card">

<img src="img/AR.png" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Card title</h5>

<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

</div>

<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

<div class="card">

<img src="img/AR.png" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Card title</h5>

<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>

</div>

<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

<div class="card">

<img src="img/AR.png" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Card title</h5>

<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>

</div>

<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

</div>

<section class="News" id="News"></section>

<div class="container">

<h1>Blog</h1>

<div class="card-group">

<div class="card">

<img src="img/AR.png" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Card title</h5>

</div>

<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

<div class="card">

<img src="img/AR.png" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Card title</h5>

</div>

<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

<div class="card">

<img src="img/AR.png" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Card title</h5>

</div>

<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

</div>

</div>

<section class="Contact" id="Contact"></section>

<div class="container">

<h1>Contact</h1>

<div class="row">

<div class="col-sm-12 col-sm-offsite-2">

<form>

<div class="form-group">

<label for="Nama">Nama</label>

<input type="text" class="form-control" id="Nama" placeholder="Masukan Nama">

</div>

<div class="form-group">

<label for="Email">Email</label>

<input type="Email" class="form-control" id="Email"placeholder="Masukan Email">

</div>

<div class="form-group">

<label for="Pesan">Pesan</label>

<textarea class="form-control" rows="5" placeholder="Masukan pesan"></textarea>

</div>

</div>

</div>

</div>

</form>

</div>

</div>

</div>

<div class="footer text-center">

<footer>

<p>Copyright@2021|Agung</p>

</footer>

</div>

Dan ini hasil dari membuat blog contact contoh seperti gambar di atas.

Di atas adalah hasil dari artikel dari membuat Blog, Contact, Footer.

Komentar