Membuat Thumbnail Post Sederhana Dengan HTML dan CSS

Belajar Web Design

Membuat Thumbnail Post Sederhana dengan HTML dan CSS

Assalamualaikum Wr. Wb.

Teman-teman Webhozz dimanapun berada, gimana kabarnya nih???

Mudah-mudahan sehat dan bahagia selalu ya, amin…

Nah, pada kesempatan kali ini kita akan belajar membuat thumbnail post sederhana.

Sebelumnya, thumbnail post itu apa sih???

Oke, jadi teman-teman tentu aja pernah baca artikel di sebuah situs website.

Yang mana artikel itu biasanya berisi tentang tutorial maupun berita.

Nah, pada halaman awal biasanya akan tampil kumpulan postingan-postingan terbaru, iya kan???

Kita klik salah satu postingannya, dan akan diarahkan ke halaman postingan tersebut secara detail.

Halaman awal sebelumnya itulah yang biasa disebut sebagai thumbnail post.

Biasanya di thumbnail post tersebut, ada judul postingan, foto thumbnailnya, teks pendek, sampai ke tombol baca selengkapnya.

Thumbnail post tersebut berfungsi sebagai pengantar ke halaman postingan yang berisi artikel dengan isi konten yang lengkap.

Kira-kira begitulah kisi-kisinya.

Kita akan membuat dengan cara sederhana, menggunakan html dan css.

Untuk kebutuhannya, siapkan aja salah satu atau dua gambar yang akan dijadikan foto thumbnail.

Oke, lets go.

  1. Buat file dengan script html, seperti berikut ini. Lalu simpan dalam sebuah folder khusus.
//================================
<!DOCTYPE html>
<html>
<head>
    <title>Postingan</title>
</head>
<body>
    
    <div>
        <img src="#">
        <h2>Berita Baru Terkini</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi cum aspernatur maxime officiis voluptates iusto magni facere nostrum, reprehenderit commodi qui. Similique voluptas blanditiis consequatur cupiditate, nihil voluptate perspiciatis mollitia?
        </p>
        <a href="#">Selengkapnya</a>
    </div>

</body>
</html>
//==============================

2. Nah, pastikan gambar dan file html sudah berada dalam satu folder. Lalu panggil gambarnya lewat tag img yang sudah kita buat pada langkah 1.

//================================
    <img src="Desert.jpg">
//================================

3. Lalu ketikkan script kode css berikut pada tag <head></head>

//================================
<style>
    body
    {
        font-family: Arial, Helvetica, sans-serif;
        background-color: black;
    }

    div
    {
        background-color: white;
        width: 55%;
        margin: auto;/*supaya ke tengah*/
        padding: 10px;
        margin-bottom: 10px;
    }

    div h2
    {
        color: darkorange;
    }

    div img
    {
        width: 100%;
        height: 400px;
    }

    a
    {
        text-decoration: none;
        background-color: crimson;
        color: white;
        padding: 8px;
        display: block;/*menjadikan elemen tipe blok*/
        width: 120px;
        text-align: center;
        border-radius: 8px; 
        
    }

    a:hover
    {
        background-color: black;
        transition-duration: 2s;
        transition-property: all;/*ms edge*/
        width: 150px;
        padding: 15px;
    }
</style>
//================================

4. Nah, beginilah hasilnya.

Nah, kira-kira begitulah caranya.

Gimana, mudah kan???

Selamat mencoba ya, dan semoga bermanfaat. Amin.

Wassalamualaikum Wr. Wb.

No related posts.