Cara Mempercantik Tampilan pada Website Laravel 7 Part #2

 

Halo teman teman pada blog kali ini kita akan belajar mengenai cara mempercantik tampilan pada website kita nah bagi teman teman yang belum liat post sebelumnya bisa dilihat di sini karena post kali ini adalah lanjutan post sebelumnya. Enjoy 😁 

Langkah 1

seperti biasa teman teman di buka xamppnya dan start apache dan MySql nya jika sudah kita akan buka code writer kita

Langkah 2

setelah itu teman teman silahkan download yang 1 plugin yang namanya bootstrap jdi si bootsrap ini berguna mempercantik tampilannya untuk linknya bisa di klik di sini kita akan memaki bootsrap yang versi ke 4 jika sudah silahkan di extract ke direktori C:/ xampp/htdocs/blog/public jika sudah kita buat folder baru yang bernama asset untuk menyimpan isi dari bootstrap.

Langkah 3

silahkan tambahkan kodingan berikut pada view siswa.blade.php seperti berikut

 <link rel="stylesheet" href="{{ asset('asset/css/bootstrap.min.css')}}" />

ini berfungsi untuk memanggil file asset kita yang telah di buat lalu tambahkan kodingan berikut

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <style>

    ul {

        list-style-type: none;

        margin: 0;

        padding: 0;

        overflow: hidden;

        background-color: #333;

    }

    li {

        float: left;

    }

    li a {

        display: block;

        color: white;

        text-align: center;

        padding: 14px 16px;

        text-decoration: none;

    }

    li a:hover {

        background-color: #111;

    }

    </style>

    <ul>

        <li><a class="active" href="index">Home</a></li>

        <li><a href="">Link 1</a></li>

        <li><a href="">Link 2</a></li>

        <li><a href="">Link 3</a></li>

    </ul>

    <!-- Sidebar -->

    <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:8%">

        <h3 class="w3-bar-item">Menu</h3>

        <a href="#" class="w3-bar-item w3-button">Link 1</a>

        <a href="#" class="w3-bar-item w3-button">Link 2</a>

        <a href="#" class="w3-bar-item w3-button">Link 3</a>

    </div>

ini berfungsi untuk membuat sidebar dan topbar kita

Langkah 4

Jika sudah silahkan teman teman save lalu run file yang kita buat tadi maka hasilnya akan seperti ini

Itu saja teman teman pada post kali ini semoga terbantu, jika ada kesalahan kata dalam penyampaian saya mohon maaf Terima Kasih