Recent Posts

    Cara Merubah Homepage Menjadi Grid Style di VioMagz

    Cara Ubah Homepage Jadi Grid di VioMagz

    Selamat datang kembali sama admin cararudi, pada kesempatan kali ini saya akan memberikan sebuah cara merubah tampilan homepage pada VioMagz menjadi tampilan Grid Style yang sangat responsive.

    Tampilan Homepage VioMagz ini akan diubah menjadi Grid Style dengan beberapa kode yang saya kutip dari web yang terpercaya dalam hal design. Secara default tampilan Homepage pada VioMagz memang berbentuk Vertikal hal ini yang menjadi gagasan utama artikel ini untuk membuat tampilan homepagenya menjadi grid.

    Cara Membuat Homepage Menjadi Grid di VioMagz

    • Langkah pertama untuk mengubahnya adalah masuk ke dashboard blogger Anda
    • Setelah itu ke menu TEMA > EDIT HTML
    • Cari kode dibawah ini (lebih mudah gunakan CTRL+F secara bersamaan)
    .post {
    • Pastekan kode dibawah ini tepat dibawah kode margin-bottom: 20px;
    padding: 15px 30px 30px 30px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    • Oke langsung saja SIMPAN

    Baca Juga: Cara Membuat Halaman Penghitung Kata (Word Counter) di Blogger

    Sampai saat ini telah selesai sampai situ saja, namun jika Anda merasa bahwa tampilan dari Grid style tersebut kurang responsive, Anda bisa menggunakan tutorial lanjutannya dibawah ini.

    Cara Merubah Homepage Menjadi Grid Agar Lebih Responsive pada Tampilan Gambar

    • Silahkan Anda kembali lagi pada Dashboard Blogger
    • Masuk ke menu Tema dan klik EDIT HTML
    • Cari kode CSS dibawah ini
    .img-thumbnail {
      width: calc(100% + 30px);
      margin: 0px 0px 15px -15px;
      height: 160px;
      position: relative;
      overflow: hidden;
     }
    • Gantilah kode diatas itu dengan kode dibawah ini
    .img-thumbnail {
        width: calc(100% + 0px);
        margin: -5px 7px -5px 0px;
        height: 250px;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }
    • Setelah sukses menggantinya langkah terakhir Anda tinggal SIMPAN template.

    Penutup

    Anda sekarang memiliki blog dengan tampilan grid style dengan menggunakan template VioMagz deh, selamat ya. Demikian tentang Cara Merubah Homepage Menjadi Grid Style di VioMagz semoga informasi yang saya berikan bisa bermanfaat untuk Anda semua, terima kasih.

    2 Komentar untuk "Cara Merubah Homepage Menjadi Grid Style di VioMagz"

    1. saya code nya kayak gini margin-bottom: 30px; itu masih gak apa apa kan di buat grid?

      BalasHapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel