Cara Membuat Homepage Menjadi Grid di Template Viomagz

Pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana Cara Membuat Homepage Menjadi Grid di Template Viomagz. Tutorial ini membuat blog kamu menjadi lebih keren pastinya dan membuat blog kamu menjadi responsive, simple dan pastinya menarik. Beberapa jam yang lalu, seorang pengunjung blog showdzgn mengirim pesan melalui whatsapp ini yang isinya request dibuatkan Homepage Menjadi Grid di Template Viomagz.


Secara default tampilan artikel pada homepage blogspot adalah berbentuk statis alias vertikal, Namun kita juga dapat melakukan kustomisasi tampilan tersebut menjadi tampilan grid. untuk tutorial ini sangat mudah sekali hanya menambahkan kode didalam sebuah element.

Cara Membuat Homepage Menjadi Grid di Template Viomagz

1. Silahkan kamu masuk ke Blogger.com dengan menggunakan Gmail kamu.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Cari kode dibawah ini.

.post {

4. Pastekan kode dibawah 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;

5. Kalau sudah silahkan klik SIMPAN.

Bagi kamu yang ingin lebih responsive lagi gambarnya seperti homepage punya admin silahkan ikuti tutorial berikut ini.

Cara Merubah Ukuran Gambar Thumbnail di Viomagz Versi Mobile

1. Silahkan kamu login ke blogger.com dengan menggunakan GMAIL kamu.
2. Masuk ke menu TEMA > Edit HTML.
3. Cari kode CSS berikut ini :

.img-thumbnail {
  width: calc(100% + 30px);
  margin: 0px 0px 15px -15px;
  height: 160px;
  position: relative;
  overflow: hidden;
 }

4. Ganti dengan kode berikut agar thumbnail nya lebih responsive lagi.

.img-thumbnail {
    width: calc(100% + 0px);
    margin: -5px 7px -5px 0px;
    height: 250px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

5. Selanjutnya klick SIMPAN dan Lihat hasilnya.

Bagaimana mudah bukan, untuk kamu yang memiliki sebuah masalah blogger atau mempunyai request silahkan kamu komen dibawah artikel ini. Sekian dulu artikel kali ini tentang bagaimana Cara Membuat Homepage Menjadi Grid di Template Viomagz atas perhatiaannya terima kasih.
Tampilkan Komentar
Sembunyikan Komentar

20 Responses to "Cara Membuat Homepage Menjadi Grid di Template Viomagz"

  1. gambar di homepage masih belum responsif mas jadi ngga pas sama teks dan judul

    ReplyDelete
    Replies
    1. sudah saya update kok gan silahkan di coba, terima kasih sudah berkunjung di blog saya ini.

      Delete
  2. informasinya sangat membantu trimakasih min:)

    ReplyDelete
    Replies
    1. alhamdulillah semoga bermanfaat, terima kasih sudah berkunjung di blog saya mas Andi Adrian

      Delete
  3. Replies
    1. Tidak ada kata lain selain Grid mas hehehehe :V

      Delete
  4. Replies
    1. Sudah di update mas artikel nya, kalau gambar gak full itu memang sudah dari Templatenya sendiri

      Delete
  5. Bukan cas thumbnail bagian height nya gan tapi bagian weight jadi gambar itu melebihi kanan dan kiri pembatas

    ReplyDelete
    Replies
    1. Maaf sebelumnya, silahkan di ulang kembali untuk kodenya sudah kami rubah silahkan di coba lagi.

      Delete
  6. Kalo ditambah ada lengkungannya dithumbnail seperti blog ini gimana ya mas kode nya

    ReplyDelete
    Replies
    1. Tinggal ditambahin border-radius: 10px; terserah mau berapa px sesuai selera. Terima kasih sudah berkunjung di blog saya mas Admin

      Delete
  7. mas, ini berfungsi untuk viomagz versi apa ya? saya coba tapi gak ada perubahan sama sekali..

    ReplyDelete
    Replies
    1. Versi 3 bang bisa kok. banyak yang sudah menerapkannya...

      Delete
  8. bang tolong buatin artikel cara merubah breadcrumbs dong bang

    ReplyDelete
    Replies
    1. Siap bang, pantau terus blog ini Terima kasih sudah berkunjung Bang Syahrul

      Delete
  9. Kak kasih dong tutorial biar tampilan navigasi menu nya bisa seperti di show design.. yang tab kaya beranda, blogegr, dll gitu

    ReplyDelete
  10. kok gak bisa ya mas, versi 3.3 gak berubah sama sekali

    ReplyDelete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel