Lazada

Cara Mengubah Tampilan Homepage Statis Menjadi Grid Pada Blog

4 Comments September 09, 2018
Cara Mengubah Tampilan Homepage Statis Menjadi Grid Pada Blog
Perbedaan Tampilan Statis Dan Grid
Cara Membuat Tampilan Homepage Blogspot Dari Statis Menjadi Grid Style. Secara default tampilan artikel pada homepage blogspot adalah berbentuk statis alias vertikal, Namun kita juga dapat melakukan kustomisasi tampilan tersebut menjadi tampilan grid atau kotak secara horizontal. Untuk lebih jelasnya silahkan ikuti tutorial berikut ini

Baca juga :
Cara Membuat Auto Readmore Keren Otomatis

Cara Mengubah Tampilan Homepage Blogspot Statis Menjadi Grid Style

1. Masuk ke dalam menu "Tema" dan klik "Edit HTML"
2. Letakkan kode berikut ini di atas kode tag </head>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;archive&quot;'>
<style type='text/css'>
.post-outer{float:left;width:calc(50% - 2px);height:210px;margin:4px 1px}
div.post-body{padding:5px}
.post.hentry{border:1px solid red;margin:4px}
.post-title a,.post-title{font-size:20px;text-decoration:none;color:#f8695e;height:47px;overflow:hidden;display:block}
.thumbnail-post{width:100%;height:140px;display:block;margin:0}
</style>
</b:if>
3. Kemudian cari kode <data:post.body/> yang ada di dalam <b:includable id='post' var='post'>...</b:includable> dan ganti kode tersebut dengan kode berikut
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
    </b:if>
  </b:if>
</b:if>

Setelah itu simpan perubahan tema tersebut dan lihatlah hasilnya
Baca juga :
Cara Membuat Template Blog Dari Awal
Cara Membuat Menu Navigasi Dropdown Sederhana
Template Professional Absolute Grid Style For Blogspot
Itu tadi tutorial singkat mengenai Cara Membuat Tampilan Homepage Statis Menjadi Grid Pada Blog yang dapat saya sampaikan, semoga bermanfaat
Promo Menarik
Thumbnail
Diskon Barang Elektronik Di Lazada Hingga 80%
Cek disini
Thumbnail
Promo Cuci Gudang, Diskon Sampai 50%
Cek disini
Thumbnail
Murah Pol - Barang Murah Berkualitas Mewah
Cek disini
Thumbnail
Tampil Cantik Gak Perlu Mahal - Diskon 50%
Cek disini
Thumbnail
Kumpulan Barang Untuk Kesehatan - Diskon 50%
Cek disini

4 comments:

  1. Replies
    1. errornya kayak gimana gan?
      bisa dijelaskan lebih spesifik?

      Delete
    2. Tampilanna memang jadi 2 tapi bertumpuk

      Delete
    3. Mungkin karena beda template jadinya error. Soalnya kode biasanya lebih dari satu, dan tiap template beda-beda.
      Coba kode diganti satu persatu-satu sambil dicek apakah masih error atau enggak.

      Selain itu script di atas saya buat berdasarkan untuk pembuatan dasar-dasar template blogger sederhana biar mudah diterapkan

      Delete

Komentar spam tidak akan di tampilkan !
Maka nikmat Tuhanmu yang manakah yang kamu dustakan?
Kembalilah ke jalan yang benar sebelum Allah sendiri yang memberikan peringatan kepadamu

Lazada